發布訂閱模式實現及發布訂閱者模式與觀察者模式的不同

YanceyOfficial 發布于2019-08-22 17:34 / 385人閱讀

摘要：發布訂閱者模式中，訂閱者是不知道也不關心事件是為什么觸發，是由哪一個事件觸發，只知道事件觸發時候，會告訴自己。然而，在發布訂閱模式中，發布者和訂閱者不知道對方的存在。在發布訂閱模式中，組件是松散耦合的，正好和觀察者模式相反。

概念

發布訂閱者模式，是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

云服務器 GPU云服務器發布訂閱模式訂閱發布模式 DTS 訂閱發布模式訂閱模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95300.html

發布訂閱模式實現及發布訂閱者模式與觀察者模式的不同

摘要：發布訂閱者模式中，訂閱者是不知道也不關心事件是為什么觸發，是由哪一個事件觸發，只知道事件觸發時候，會告訴自己。然而，在發布訂閱模式中，發布者和訂閱者不知道對方的存在。在發布訂閱模式中，組件是松散耦合的，正好和觀察者模式相反。概念發布訂閱者模式，是javascript甚至大多數語言都有的語言模式，比較概念的解釋是，訂閱者把自己想訂閱的事件注冊到調度中心，當該事件觸發時候，發布者發布...

Jensen 2019-08-02 10:32 評論0 收藏0
JavaScript 設計模式（六）：觀察者模式與發布訂閱模式

摘要：觀察者模式維護單一事件對應多個依賴該事件的對象關系發布訂閱維護多個事件主題及依賴各事件主題的對象之間的關系觀察者模式是目標對象直接觸發通知全部通知，觀察對象被迫接收通知。觀察者模式（Observer）觀察者模式：定義了對象間一種一對多的依賴關系，當目標對象 Subject 的狀態發生改變時，所有依賴它的對象 Observer 都會得到通知。簡單點：女神有男朋友了，朋友圈曬個圖，甜...

bingo 2019-08-23 18:36 評論0 收藏0
設計模式之觀察者模式與發布訂閱模式

摘要：觀察者模式與發布訂閱的區別在模式中，知道，同時還保留了的記錄。發布者訂閱者在大多情況下是異步方式使用消息隊列。圖片源于網絡侵權必刪如果以結構來分辨模式，發布訂閱模式相比觀察者模式多了一個中間件訂閱器，所以發布訂閱模式是不同于觀察者模式的。學習了一段時間設計模式，當學到觀察者模式和發布訂閱模式的時候遇到了很大的問題，這兩個模式有點類似，有點傻傻分不清楚，博客起因如此，開始對觀察者和發布...

BaronZhang 2019-08-23 18:03 評論0 收藏0
簡單理解觀察者模式(pub/sub)在前端中的應用

摘要：概念觀察者模式被廣泛地應用于客戶端編程中。所有的瀏覽器事件，等都是使用觀察者模式的例子。在觀察者模式中，一個對象訂閱另一個對象的指定活動并得到通知，而不是調用另一個對象的方法。此外，觀察者模式還可用于實現數據綁定。概念觀察者模式被廣泛地應用于JavaScript客戶端編程中。所有的瀏覽器事件（mouseover，keypress等）都是使用觀察者模式的例子。這種模式的另一個名字叫自...

guyan0319 2019-08-23 12:10 評論0 收藏0
JavaScript 發布-訂閱模式

摘要：發布訂閱模式訂閱者把自己想訂閱的事件注冊到調度中心，當發布者發布該事件到調度中心，也就是該事件觸發時，由調度中心統一調度訂閱者注冊到調度中心的處理代碼。發布-訂閱模式，看似陌生，其實不然。工作中經常會用到，例如 Node.js EventEmitter 中的 on 和 emit 方法；Vue 中的 $on 和 $emit 方法。他們都使用了發布-訂閱模式，讓開發變得更加高效方便。一...

13651657101 2019-08-26 13:53 評論0 收藏0