如何實現一個簡單的釋出訂閱模式

wmui發表於2022-03-04
模式

背景

在業務開發中，經常會遇到要處理跨頁面通訊的問題，比如說使用者開啟了一個網站，網站的某些頁面需要根據使用者的登入的狀態不同，顯示不同的資料。顯然這需要我們在登入成功的那一刻，
去通知到那些需要改變的頁面。為了解決類似這樣的問題，釋出訂閱模式誕生了。

思路

一個簡單的釋出訂閱模式需要事件的繫結和觸發是互相隔離的，同時支援動態的新增和刪除事件。基於此就有了一個思路：

  1. 定義一個變數儲存這些事件
  2. 定義一個監聽方法，用於把事件新增到事件變數中
  3. 定義一個刪除方法，用於把是事件從變數中移除
  4. 定義一個觸發方法，用於呼叫變數中的事件

實現

根據上面的思路，大致可以知道使用方式類似下面：

var emitter = new EventEmitter();

var handle = function (data) {
    console.log(data)
}

// 頁面A訂閱LOGIN事件
emitter.on('LOGIN', handle)


// 登入成功，觸發釋出
emitter.emit('LOGIN', {user: { name: 'Jan', age: 18}})

具體程式碼實現

function EventEmitter() {
  // 事件變數
    this._event = {}
}

// 新增訂閱
EventEmitter.prototype.on= function (type, handle) {
    this._event[type] = this._event[type] || []

    this._event[type].push(handle)
}

// 移除訂閱
EventEmitter.prototype.remove = function (type, handle) {
    var index = (this._event[type] || []).indexOf(handle)

    if(index !== -1) {
        this._event[type].splice(index, 1)
    }
}

// 觸發釋出
EventEmitter.prototype.emit = function (type, data) {
    (this._event[type] || []).forEach(function (handle) {
        handle(data)
    })
}
如何實現一個簡單的釋出訂閱模式首發於聚享小站，如果對您有幫助，不要忘記點贊支援一下呦?

相關文章