同步 异步和事件

同步和异步 事件

浏览器提供了同步和异步机制 JS是单线程的，提供了两个队列，一个是主队列（放同步代码），一个是异步队列队列池。

同步

所有的代码按顺序执行，每一部分执行完后才能执行下面的代码。

异步

这块代码执行后，可以去做其他事情，等这块代码执行完后，再回来处理这里的事项。

• 异步性能会比较高 
  
  • 回调函数 ajax 定时器 时间

区别

• 先执行同步的代码，再执行异步的代码。
• 同步代码执行结束后才会去执行异步代码

默认定时器间隔时间 5~10ms

问题

异步回调地狱 
全部写成同步又会造成代码阻塞

• 解决：promise处理 异步代码当成同步来写（可以用async + await解决）

function Promise(callback){

this.x = 1;

callback();

}

Promise

Promise是JS内置的构造函数

• 参数是一个回调函数 
  
  • 回调函数有两个参数： 
    
    • resolve(表示执行成功的回调)
    • reject(表示执行失败的回调) 
      then方法 Promise类原型上的方法
• then有两个参数 
  
  • 第一个是成功回调
  • 第二个参数表示失败的回调
• then方法的返回值 
  
  • Promise类的实例，所以可以继续调用then方法
  • //除过报错全成功 只有手动抛出异常状态才会变成失败的状态（前提是没有再返回Promise对象） 
    Promise有三种状态
• 第一种是pending（等待状态）
• 第二种是fulfilled(成功的状态)
• 第三种是rejected(失败的状态)

事件

事件绑定：事件（行为）发生时做些具体的事情（给事件绑定行为） 
绑定事件分为DOM0级事件绑定 和 DOM2级事件绑定

DOM0级事件绑定问题：对同一元素，同一事件绑定多个行为时，后面的行为会覆盖前面的行为，最后只会执行最后一次绑定的行为

• DOM0级事件绑定 
  oDiv.onclick = function(){alert(1)} 
  
  • 事件行为移除 
    oDiv.onclick = null
• DOM2级事件绑定 
  oDiv.addEventListener('click',function(){alert(1)},false); 
  
  • 参数1：事件类型
  • 参数2：事件绑定的行为
  • 参数3：事件传播的方式 
    oDiv.removeEventListener('click',fn,false);
• IE低版本浏览器6~8：oDiv.attachEvent('onclick',fn);，没有做重复绑定的处理
• oDiv.detachEvent('onclick',fn);

DOM2级绑定 addEventListener和attachEvent 
IE没有做重复绑定处理。DOM2级事件会对同一个元素绑定同一个事件绑定多次时只绑定一次。 
标准浏览器下事件绑定行为中的this是绑定的元素 IE事件绑定行为中是window 
IE下事件绑定行为执行的顺序是乱的，而标准浏览器是按照先后绑定的顺序执行

事件对象

浏览器记录了事件相关的信息

• //本身存在，用来存储事件相关的信息 也可以用arguments[0]接收
• 标准浏览器放在参数里接收
• ie6~8:通过window.event接收
• e = e || window.event

let oDiv = document.getElementsByClassName('box')[0];

oDiv.onclick = function (e) {//本身存在，用来存储事件相关的信息 也可以用arguments[0]接收

console.log(e.clientX);//到可视窗口左边的距离

}

• e.clientX：到可视窗口左边的距离
• e.clientY：到可视窗口上边的距离
• e.pageY ：到文档左边的距离（包含滚动条卷出去的高度） e.clientY + document.documentElement,scrollTop||docment.body.scrollTop
• e.target: 事件源 事件绑定的元素
• e.preventDefault 阻止默认行为 
  
  • ie低版本浏览器：e.returnValue = false
• e.stopPropagation 阻止冒泡 
  
  • ie低版本浏览器：e.cancleBubble = true

事件传播

• 冒泡和捕获 不能同时看到
• DOM0级事件只能看到事件冒泡
• DOM2级事件可以自己设置冒泡（false）或捕获(true)

事件冒泡

当前元素事件被触发后，其祖先元素的相同事件也会被触发 由内往外（先自己后祖先）

事件捕获

当前元素事件被触发后，其祖先元素的相同事件也会被触发 由外往内（先自己后祖先）

事件委托

oUl.get(0)

订阅发布模式

• 让写出的代码具有可维护性，可复用性，可移植性。不再专注于代码本身，而是站在宏观的角度思考代码，想如何规划和管理代码
• 代码至少满足”低耦合 高内聚”
• 低耦合:每个模块之间的代码没有关联性
• 高内聚:每个模块代码都是由关联性很强的代码组成，都是用来实现单一的功能，得遵守单一职责的原理
• 如何将单独的功能在需要执行的地方执行 ->订阅发布模式 
  订阅和发布

订阅

做计划

发布

执行计划

取订阅

取消计划