JS的發布訂閱模式

這里要說明一下什么是發布-訂閱模式

• 發布-訂閱模式里面包含了三個模塊，發布者，訂閱者和處理中心。這里處理中心相當於報刊辦事大廳。發布者相當與某個雜志負責人，他來中心這注冊一個的雜志，而訂閱者相當於用戶，我在中心訂閱了這分雜志。每當發布者發布了一期雜志，辦事大廳就會通知訂閱者來拿新雜志。這樣在結合下面的圖應該很好理解了。
  
• 其實就是將發布者和訂閱者解耦了，在實際開發中，經常會遇到某個方法內處理很多的邏輯，最簡單的就是直接在方法內直接寫。這種是高度耦合的面向過程的寫法。對於代碼維護不友好。而發布-訂閱模式就是將兩者分離。我觸發了某個事件（這里我們將觸發該方法定義為事件），我只向調度中心通知，我並不知道調度中心內會怎么處理，有多少個人響應。我只管通知。而訂閱者只管在調度中心訂閱，有人調用它才響應。
• 還有一點就是假設我們有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 === -1) {
          return new Error('無該綁定事件')
        }
        // 移除事件
        this.handlers[type].splice(idx, 1)
        if (this.handlers[type].length === 0) {
          delete this.handlers[type]
        }
      }
    }
}

ok到現在為止就已經實現了基本發布訂閱的功能了，其實很簡單，如果還有什么奇怪的需求，都可以通通往里面加。

下面是完整的使用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')

希望大家轉載時注明出處：https://www.cnblogs.com/suyuanli/p/9655699.html