Forward の Blog

概念在javaScript中我们我们有两大编程思想，面向过程（POP）和 面向对象（OOP）； 面向过程：关心的是代码每一步的的实现，先去做什么然后再做什么 面向对象：不管新具体的代码实现细节，只关心结果；好处：减少代码冗余；便于后期维护； 面向对象的特征 继承 ->子类继承了父类的属性方法 封装-> 将实现同样的代码段，放到一个函数中，可以重复使用，不需要关系代码实现的细节，实现代码的高内聚，低耦合 多态 类和对象的关系 类是对象的抽象，对象是类的具体 类是对象的模板，对象是类的产品 如何创建类使用class关键字，class后面跟上类名，类名的命名使用帕斯卡命名法(首字母大写) 如何实例化一个类实例化一个类就是创建一个实例(对象)，使用关键字new，后面跟上类名和实参列表，返回值是一个实例(对象) 构造器 构造器就是类中自带的一个方法，可以理解为前缀方法 当我们创建一个实例(对象)的同时，他会被自动调用，即出现new的时候，构造器自动执行； 每个类都有构造器，即使我们不定义构造器也存在，为空 构造器的方法是固定的，为constructor 因为class类 ...

EventLoop(事件循环)概念：首先我们需要知道JS是一种单线程语言，简单的说就是：只有一条通道，那么在任务多的情况下，就会出现拥挤的情况，这种情况下就产生了 ‘多线程’ ，但是这种“多线程”是通过单线程模仿的，也就是假的。那么就产生了同步任务和异步任务。 导图要表达的内容用文字来表述的话： 同步和异步任务分别进入不同的执行”场所”，同步的进入主线程，异步的进入Event Table并注册函数。 当指定的事情完成时，Event Table会将这个函数移入Event Queue(任务队列)。 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。 上述过程会不断重复，也就是常说的Event Loop(事件循环)。 事件循环中，每进行一次循环操作称为tick。 何为异步代码在执行过程中，会遇到一些无法立即处理的任务，比如： 计时完成后需要执行的任务 ：setTimeout、setInterval`； 网络通信完成后需要执行的任务 ： XHR、Fetch； 用户操作后需要执行的任务： addEventListener； 如果让渲染主线程等待 ...

拖拽位置信息 clientX / clientY 获取距离可视区域的距离； pageX / pageY 获取距离文档的（没有滚动条的时候与client一样）； screenX / screenY 获取距离屏幕 （指的电脑屏幕）； 拖拽涉及到的事件 按下：onmousedown 移动：onmousemove 抬起：onmouseup 拖拽的实现 找到一个固定值(不变的点)=>鼠标距离拖拽元素的距离(因为按下拖动的时候这个距离不变)。 获取拖拽后元素距离body的距离 (offset不行) 第一版代码123456789101112131415<style> * { padding: 0; margin: 0; } .box { width: 100px; height: 100px; background-color: red; position: absolu ...

懒加载页面运行到浏览器，图片是不立即进行加载的。 懒加载的优势 保证图片一定能够加载成功，防止破图，增强用户体验。 有利于性能优化。 懒加载的实现 在css中设置占位背景图，并将图片设置为display:none； 将真实的图片的地址放到结构的自定义属性上，不直接给到图片的src； 保证这个图片的地址是正确的，在赋值给这个图片的src； 首屏页面保证图片资源一定能够加载成功才去加载当前这张图片，即延迟一定时间去展示图片。 步骤： 先弄一个占位背景图； 默认图片是隐藏的； 创建一个临时的图片； 将真实图片的地址赋值给当前这个临时图片的src； 判断当前这个图片资源是否加载成功； 1234567891011121314151617181920212223<style> * { padding: 0; margin: 0; } .box { width: 200px; height: 200px; /* 1.先弄一个占位背景图 */ back ...

浏览器 整个屏幕的尺寸：window.screen.width/height； 浏览器的尺寸：window.outerWidth/outerHeight； 浏览器内部尺寸(包括滚定条)：window.innerWidth/innerHeight； 视口尺寸(不包括滚动条)：document.documentElement.clientWidth/clientHeight； 单个元素client系列 clientWidth：元素自身的宽度+左右填充；width + padding-left + padding-right clientHeight：元素自身的高度+上下填充；height + padding-top + padding-bottom clientLeft：元素对象的左边框；border-left clientTop：元素对象的上边框；border-top offset系列 offsetWidth：clientWidth+左右边框；clientWidth + border-left + border-right+滚动条(如果有) offsetHeight：clientH ...

Dom文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口(API)。 (DOM就是用来处理HTML机构)。 节点加载HTML页面时，web浏览器生成一个树型结构，用来表示页面内部结构，称之为DOM树，DOM将这种树型结构理解为由节点组成。 节点属性 nodeType（节点类型） nodeName（节点名称） nodeValue（节点值） 1（元素节点） 大写的标签名 null 3（文本节点） #text 文本内容 8（注释节点） #comment 注释内容 9（文档节点） #document null 获取子节点Tip：是属性，不是方法。 父亲节点.children; 获取直接元素子节点。注：即nodeType==1的元素节点。 父亲节点.childNodes; 获取直接子节点 (和结构相关结构边了这个集合也会改变：比如去掉空格或者换行就相当于去掉了文本节点text)。 获取子节点，获取到了就是一个类数组集合，获取不到就是空集合。 12345678910111213 ...

预解析 代码运行到浏览器，浏览器提供了一个供JS代码执行的环境(栈区)，在代码执行之前先进行预解析；预解析完成了，代码才会执行。 预解析又称为变量提升，预解析会对所有(全局与局部)带有var和function关键字的进行预解析； 预解析分为以下两部分： 声明 var a； 定义 a=100；(赋值) var的预解析只声明不定义；function的预解析声明+定义（function在预解析的声明+定义已经完成了） 知识点： js中分为两大区域 栈区：提供代码运行的环境 堆区：存储引用数据类型的值 js中一旦遇到引用数据类型，就会开辟一块堆内存，将引用数据类型的值进行储存，并给这块堆内存分配一个16进制地址。 函数执行会生成一个私有作用域，里面代码从上到下执行。（栈区） 栗子1： 1234567console.log(a,b); //undefined undefinedvar a = 100;var b = 200;sum(); function sum(){ console.log("2022平安喜乐") //2022平 ...

箭头函数定义 箭头函数是ES6之后增加的一种编写函数的方法，并且它比函数表达式要更加简洁 箭头函数不会绑定this、arguments属性； 箭头函数不能作为构造函数来使用（不能和new一起来使用，会抛出错误）；–> (因为箭头函数没有原型)； 和普通函数对比普通函数12345678// methods1: function声明function foo1() { };// methods2 函数表达式const foo2 = function (name, age) { console.log("函数体代码"); console.log(name, age);}; 箭头函数12345//箭头函数的完整写法(和之前 函数表达式 写法类似)const foo3 = (name, age) => { console.log("箭头函数函数体代码"); console.log(name, age);} 箭头函数简写 如果箭头函数只有一个参数，那么() ...

This指向 函数在调用时，JavaScript会默认给this绑定一个值； this 的指向不是在创建时就绑定了，而是在调用时被绑定的； this的绑定和定义的位置（编写的位置）没有关系； this的绑定和调用方式以及调用的位置有关系； 四种绑定规则 默认绑定； 隐式绑定； 显示绑定； new绑定； 默认绑定(独立调用) 独立的调用，this 就代表 window 对象。 独立调用：xxx()为调用，没有小括号的不叫调用；函数前面没有别的东西调用叫独立； 普通函数被独立的调用 1234567// 定义函数function foo() { console.log("foo", this);}// 独立的调用foo(); // Window 函数定义在对象中，但是独立调用 12345678910111213const obj = { name: "fsllala", say: function () { console.log("say", ...

websocket一、websocket是什么 websocket是一种网络通信协议，是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。 在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并进行双向数据传输。（维基百科） 二、websocket与http网络协议的联系与区别联系： 都是基于TPC的； 都是可靠性传输协议； 都是应用层协议； WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输时候是不需要HTTP协议的； 区别：http是一种无状态的、无连接的单向的应用层协议、采用请求/响应模式。即，通信请求只能由客户端发起，服务端对请求做出应答处理。 无状态：协议对于事务处理没有记忆能力；在传统的方式上(long pull 与 ajax 轮询)，要不断的建立，关闭HTTP协议，由于HTTP是非状态性的，每次都要重新传输 identity info （鉴别信息），来告诉服务端你是谁。降低了效率，消耗了过多的流量/时间。 无连接：每次连接只处理一个请求，服务器处 ...