同步和非同步 事件

瀏覽器提供了同步和非同步機制 JS是單執行緒的，提供了兩個佇列，一個是主佇列（放同步程式碼），一個是非同步佇列佇列池。

同步

所有的程式碼按順序執行，每一部分執行完後才能執行下面的程式碼。

非同步

這塊程式碼執行後，可以去做其他事情，等這塊程式碼執行完後，再回來處理這裡的事項。

• 非同步效能會比較高 
  
  • 回撥函式 ajax 定時器 時間

區別

• 先執行同步的程式碼，再執行非同步的程式碼。
• 同步程式碼執行結束後才會去執行非同步程式碼

預設定時器間隔時間 5~10ms

問題

非同步回撥地獄 
全部寫成同步又會造成程式碼阻塞

• 解決：promise處理 非同步程式碼當成同步來寫（可以用async + await解決）

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

• 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)

訂閱釋出模式

• 讓寫出的程式碼具有可維護性，可複用性，可移植性。不再專注於程式碼本身，而是站在巨集觀的角度思考程式碼，想如何規劃和管理程式碼
• 程式碼至少滿足”低耦合 高內聚”
• 低耦合:每個模組之間的程式碼沒有關聯性
• 高內聚:每個模組程式碼都是由關聯性很強的程式碼組成，都是用來實現單一的功能，得遵守單一職責的原理
• 如何將單獨的功能在需要執行的地方執行 ->訂閱釋出模式 
  訂閱和釋出

訂閱

做計劃

釋出

執行計劃

取訂閱

取消計劃