經(jīng)典設(shè)計模式：發(fā)布訂閱

let sub = (function () {
  // 自定義事件池
  let pond = {}
  
  // 向事件池中存放方法
  const on = function on(type, func) {
    !pond.hasOwnProperty(type) ? pond[type] = [] : null
    let arr = pond[type]
    let i = 0
    // 存儲之前實現(xiàn)去重處理
    for(; i < arr.lenth; i++){
      if(arr[i] === func){
        return
      }
    }
    arr.push(func)
  }
  
  // 向事件池中存放方法
  const off = function on(type, func) {
    let arr = pond[type] || []
    let i = 0
    for(; i < arr.lenth; i++){
      if(arr[i] === func){
        // 移除這一項：為了不產(chǎn)生數(shù)組塌陷問題，我們不直接從原始數(shù)組中刪除，只是把當前項賦值為null
        arr[i] = null
        return
      }
    }
  }
  
  // 通知事件池中的方法執(zhí)行
  const fire = function on(type, ...params) {
    let arr = pond[type] || []
    let i = 0
    for(; i < arr.lenth; i++){
      if(arr[i] === null){
        arr.splice(i, 1)
        i--
        continue
      }
      arr[i](...params)
    }
  }
  
  return {
    on,
    off,
    fire
  }
})()

const fn1 = x => console.log('fn1', x)
const fn2 = x => console.log('fn2', x)

sub.on('LBJhui', fn1)
sub.on('LBJhui', fn1)
sub.on('LBJhui', fn2)

setTimeoouut(() => {
  sub.fire('LBJhui', 100)
})

自定義DOM事件

JavaScript中的模擬事件觸發(fā)：無需手動操作，也可以基于一些代碼觸發(fā)事件「不兼容IE6-8」

• createEvent 創(chuàng)建事件對象「DOM2中事件參數(shù)是“復(fù)數(shù)”，DOM3中是“單數(shù)”」
  • MouseEvent
  • KeyboardEvent 「DOM新增」
  • Event
  • ...
• initMouseEvent / initKeyboardEvent / initEvent 模式事件對象數(shù)據(jù)
  • type事件類型
  • bubbles 是否冒泡傳播
  • cancelable 事件是否可以取消
• dispatchEvent 手動觸發(fā)事件

let box = document.querySelector('.box')

//DOM0 事件綁定
box.onclick = function (ev) {
  console.log('DOM0 CLICK', ev)
}

//DOM2 事件綁定：事件池
box.addEventListener('click', function (ev) {
  console.log('DOM2 CLICK', ev)
})  

setTimeout(() => {
  // box.onclick() // 缺少事件對象
  
  // 1.創(chuàng)建事件對象
  let evv = document.createEvent('MouseEvent')
  ev.initMouseEvent('click', true, true)
  
  // 2.自動觸發(fā)事件
  box.dispatchEvent(ev)
})

自定義DOM事件

• document.createEvent('CustomEvent') 或者 new CustomEvent('event_name', {'detail': xxx })

let box = document.querySelector('.box')

// 創(chuàng)建自定義事件
let ev = document.createEvent('CustomEvent')
ev.initCustomEvent('LBJhui', true, true, {
  clientX: 10,
  clientY: 20
})

box.addEventListener('LBJhui', ev => {
  console.log(ev)
})

定時器動畫

• setInterval / clearInterval
• setTimeout / clearTimeout

「弊端」

• 容易出現(xiàn)卡頓、抖動的現(xiàn)象「丟幀」
  • 定時器設(shè)定的等待執(zhí)行時間是不可靠的
  • 不同設(shè)備的刷新頻率不一樣，我們設(shè)定的等待時間和刷新頻率不一致

擴展：屏幕刷新頻率(圖像在屏幕上更新的速度，也即屏幕上的圖像每秒鐘出現(xiàn)的次數(shù))

• 60赫茲(Hz):顯示器以每秒60次的頻率不斷的更新屏幕上的圖像
• 視覺停留效應(yīng)：16.7ms

requestAnimationFrame / cancelAnimationFrame 「不兼容IE6-9」

• 由系統(tǒng)來決定回調(diào)函數(shù)的執(zhí)行時機
• CPU節(jié)能：當頁面被隱藏或最小化時，setTimeout仍然在處理中；requestAnimationFrame只有在頁面處于激活狀態(tài)下才會執(zhí)行
• 函數(shù)節(jié)流：回調(diào)函數(shù)在屏幕每一次的刷新間隔中只被執(zhí)行一次
• requestAnimationFrame會把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成，在隱藏或不可見的元素中，將不會進行重繪或回流

requestIdleCallback:在瀏覽器的空閑時間段調(diào)用的函數(shù)，這樣一些不重要的任務(wù)可以延后執(zhí)行，防止頁面卡頓

• requestIdleCallback([callback], [option -> timeout])
• 只有新版瀏覽器才支持