發佈訂閱模式實現及發佈訂閱者模式與觀察者模式的不一樣

概念

發佈訂閱者模式，是javascript甚至大多數語言都有的語言模式，比較概念的解釋是，

訂閱者把本身想訂閱的事件註冊到調度中心，當該事件觸發時候，發佈者發佈該事件到調度中心（第三方），由調度中心統一調度訂閱者註冊到調度中心的處理代碼。

優缺點

優勢
1.一對多。
一個發佈者能夠綁定多個訂閱者，當事件觸發時，由調度中心所有通知。
2.解耦。
發佈訂閱者模式中，訂閱者是不知道也不關心事件是爲何觸發，是由哪個事件觸發，只知道事件觸發時候，會告訴本身。發佈者也不用一一通知，只要告訴調度中心，事件觸發了就行了。因此代碼鬆耦合。
3.程序便於擴展。
缺點：
實現方式麻煩？

舉例

用平時身邊的例子解釋，好比你被阿里邀請面試，面試完你問面試官何時出結果，面試官告訴你結果出來時候會通知你的，這樣你就不用每天打電話問面試結果了，等面試結果出來，面試官會把面試結果統一發郵件給面試者，當你收到面試結果後，進行下一步操做，是到阿里上班，仍是面試下一家。

代碼實現

var observer = function () {
    var _observer = {};     
    let _queue = {};     // 全部事件的隊列
    /**
    * @param 註冊的事件名稱
    * @param 事件觸發時執行的函數
    */
    _observer.on = function (eventName, fn) {
        if (Object.prototype.toString.call(fn) !== '[object Function]') return;
        if (_queue[eventName] && _queue[eventName].length > 0) {
            // 若是以前註冊過eventName事件
            _queue[eventName].push(fn);
        } else {
            // 以前沒有註冊過eventName事件
            _queue[eventName] = [fn];
        }
    },
     /**
    * @param 已經觸發的事件（發佈事件）
    */
    _observer.trigger = function (triggerEventName) {
        var args = Array.prototype.slice.call(arguments,1);
        if (!_queue[triggerEventName]) return;
        for (var i = 0; i < _queue[triggerEventName].length; i++) {
            _queue[triggerEventName][i].apply(null, args);
        }
    },
    // 移除註冊事件
    _observer.remove = function (removeEventName) {
        for(var k in _queue) {
            if (k === removeEventName) {
                delete _queue[k];
            }
        }
    }
    // 移除全部註冊事件
    _observer.removeAll = function () {
        _queue = {};
    }
    return _observer;
}()

發佈訂閱者模式與觀察者模式區別

發佈訂閱者模式與觀察者模式是很類似的，以前的好多網站、博客上也把它們畫上等號，可是我前段時間接到一個面試，問我，發佈訂閱者模式與觀察者模式有什麼卻別，當時說同樣的，結果面試管說其實不同，好吧，一臉懵逼，結束時候本身查閱了一下，確實不太同樣。

區別

• 在觀察者模式中，觀察者是知道Subject的，Subject一直保持對觀察者進行記錄。然而，在發佈訂閱模式中，發佈者和訂閱者不知道對方的存在。它們只有經過調度中心進行通訊。
• 在發佈訂閱模式中，組件是鬆散耦合的，正好和觀察者模式相反。
• 觀察者模式大多數時候是同步的，好比當事件觸發，Subject就會去調用觀察者的方法。而發佈-訂閱模式大多數時候是異步的（使用消息隊列）

舉個例子
觀察者模式就像你沒有經驗卻買了比特幣或者股票，而後懼怕賠錢一直盯着k線圖，一有變化立馬就知道了，而後作下一步操做，是觀望是買是拋均可以，熟悉vue的同窗應該知道watch這個方法吧，對，就是觀察者模式，國外有一圖拿過來給大家看看

參考

1.觀察者模式 vs 發佈-訂閱模式
2.Observer vs Pub-Sub