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 === undefined) {
return new Error('無該綁定事件')
}
// 移除事件
this.handlers[type].splice(idx, 1)
if (this.handlers[type].length === 0) {
delete this.handlers[type]
}
}
}
}ok到現在爲止就已經實現了基本發佈訂閱的功能了，其實很簡單，如果還有什麼奇怪的需求，都可以通通往裏面加。