JavaScript的釋出訂閱模式

這裡要說明一下什麼是釋出-訂閱模式。

釋出-訂閱模式裡面包含了三個子產品，釋出者，訂閱者和進行中心。這裡進行中心相當于報刊辦事大廳。

釋出者相當與某個雜志負責人，他來中心這注冊一個的雜志，而訂閱者相當于使用者，我在中心訂閱了這分雜志。

每當釋出者釋出了一期雜志，辦事大廳就會通知訂閱者來拿新雜志。這樣在結合下面的圖應該很好了解了。

其實就是将釋出者和訂閱者解耦了，在實際開發中，經常會遇到某個方法内處理很多的邏輯，最簡單的就是直接在方法内直接寫。這種是高度耦合的面向過程的寫法。對于代碼維護不友好。

而釋出-訂閱模式就是将兩者分離。我觸發了某個事件（這裡我們将觸發該方法定義為事件），我隻向排程中心通知，我并不知道排程中心内會怎麼處理，有多少個人響應。我隻管通知。

而訂閱者隻管在排程中心訂閱，有人調用它才響應。

還有一點就是假設我們有3個js檔案，事件觸發在a.js内，而響應該事件的在b.js和c.js内，要是用正常調用的方法的話，就要把b.js和c.js的方法傳到a.js内。這是一個非常麻煩的操作。

而釋出-訂閱模式是将排程中心挂在了全局，我們隻管調用排程中心相應的方法注冊和訂閱。

ps：還有一點要注意的，很多人會把觀察者模式和釋出-訂閱模式混淆，其實兩者之間還是有點差別的，不過在本文我不會詳細講。

下面我們來實作一個釋出-訂閱模式的類

class Event {
  constructor () {}
  // 首先定義一個事件容器，用來裝事件數組（因為訂閱者可以是多個）
  handlers = {}


  // 事件添加方法，參數有事件名和事件方法
  addEventListener (type, handler) {
    // 首先判斷handlers内有沒有type事件容器，沒有則建立一個新數組容器
    if (!(type in this.handlers)) {
      this.handlers[type] = []
    }
    // 将事件存入
    this.handlers[type].push(handler)
  }


  // 觸發事件兩個參數（事件名，參數）
  dispatchEvent (type, ...params) {
    // 若沒有注冊該事件則抛出錯誤
    if (!(type in this.handlers)) {
      return new Error('未注冊該事件')
    }
    // 便利觸發
    this.handlers[type].forEach(handler => {
      handler(...params)
    })
  }


  // 事件移除參數（事件名，删除的事件，若無第二個參數則删除該事件的訂閱和釋出）
  removeEventListener (type, handler) {
      // 無效事件抛出
      if (!(type in this.handlers)) {
        return new Error('無效事件')
      }
      if (!handler) {
        // 直接移除事件
        delete this.handlers[type]
      } else {
        const idx = this.handlers[type].findIndex(ele => ele === handler)
        // 抛出異常事件
        if (idx === undefined) {
          return new Error('無該綁定事件')
        }
        // 移除事件
        this.handlers[type].splice(idx, 1)
        if (this.handlers[type].length === 0) {
          delete this.handlers[type]
        }
      }
    }
}      

下面是完整的使用demo

var event = new Event() // 建立event執行個體
// 定義一個自定義事件:"load"
function load (params) {
  console.log('load', params)
}
event.addEventListener('load', load)
// 再定義一個load事件
function load2 (params) {
  console.log('load2', params)
}
event.addEventListener('load', load2)
// 觸發該事件
event.dispatchEvent('load', 'load事件觸發')
// 移除load2事件
event.removeEventListener('load', load2)
// 移除所有load事件
event.removeEventListener('load')