發(fā)布訂閱模式實現(xiàn)及發(fā)布訂閱者模式與觀察者模式的不同

Jensen 發(fā)布于2019-08-02 10:32 / 2907人閱讀

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

概念

發(fā)布訂閱者模式，是javascript甚至大多數(shù)語言都有的語言模式，比較概念的解釋是，

訂閱者把自己想訂閱的事件注冊到調(diào)度中心，當(dāng)該事件觸發(fā)時候，發(fā)布者發(fā)布該事件到調(diào)度中心（第三方），由調(diào)度中心統(tǒng)一調(diào)度訂閱者注冊到調(diào)度中心的處理代碼。

優(yōu)缺點

優(yōu)點
1.一對多。
一個發(fā)布者可以綁定多個訂閱者，當(dāng)事件觸發(fā)時，由調(diào)度中心全部通知。
2.解耦。
發(fā)布訂閱者模式中，訂閱者是不知道也不關(guān)心事件是為什么觸發(fā)，是由哪一個事件觸發(fā)，只知道事件觸發(fā)時候，會告訴自己。發(fā)布者也不用一一通知，只要告訴調(diào)度中心，事件觸發(fā)了就好了。所以代碼松耦合。
3.程序便于擴展。
缺點：
實現(xiàn)方式麻煩？

舉例

用平時身邊的例子解釋，比如你被阿里邀請面試，面試完你問面試官什么時候出結(jié)果，面試官告訴你結(jié)果出來時候會通知你的，這樣你就不用天天打電話問面試結(jié)果了，等面試結(jié)果出來，面試官會把面試結(jié)果統(tǒng)一發(fā)郵件給面試者，當(dāng)你收到面試結(jié)果后，進行下一步操作，是到阿里上班，還是面試下一家。

代碼實現(xiàn)

var observer = function () {
    var _observer = {};     
    let _queue = {};     // 所有事件的隊列
    /**
    * @param 注冊的事件名稱
    * @param 事件觸發(fā)時執(zhí)行的函數(shù)
    */
    _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 已經(jīng)觸發(fā)的事件（發(fā)布事件）
    */
    _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;
}()

發(fā)布訂閱者模式與觀察者模式區(qū)別

發(fā)布訂閱者模式與觀察者模式是很相似的，之前的好多網(wǎng)站、博客上也把它們畫上等號，但是我前段時間接到一個面試，問我，發(fā)布訂閱者模式與觀察者模式有什么卻別，當(dāng)時說一樣的，結(jié)果面試管說其實不一樣，好吧，一臉懵逼，結(jié)束時候自己查閱了一下，確實不太一樣。

區(qū)別

在觀察者模式中，觀察者是知道Subject的，Subject一直保持對觀察者進行記錄。然而，在發(fā)布訂閱模式中，發(fā)布者和訂閱者不知道對方的存在。它們只有通過調(diào)度中心進行通信。

在發(fā)布訂閱模式中，組件是松散耦合的，正好和觀察者模式相反。

觀察者模式大多數(shù)時候是同步的，比如當(dāng)事件觸發(fā)，Subject就會去調(diào)用觀察者的方法。而發(fā)布-訂閱模式大多數(shù)時候是異步的（使用消息隊列）

舉個例子
觀察者模式就像你沒有經(jīng)驗卻買了比特幣或者股票，然后害怕賠錢一直盯著k線圖，一有變化立馬就知道了，然后做下一步操作，是觀望是買是拋都可以，熟悉vue的同學(xué)應(yīng)該知道watch這個方法吧，對，就是觀察者模式，國外有一圖拿過來給你們看看

參考

1.觀察者模式 vs 發(fā)布-訂閱模式
2.Observer vs Pub-Sub

云服務(wù)器 GPU云服務(wù)器發(fā)布訂閱模式訂閱發(fā)布模式 DTS 訂閱發(fā)布模式訂閱模式

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52418.html

發(fā)表評論

登陸后可評論

0條評論

Jensen

男|高級講師

我要關(guān)注我要私信

TA的文章

食品和農(nóng)業(yè)組織難逃網(wǎng)絡(luò)攻擊!美國農(nóng)場因勒索軟件攻擊損失900萬美元

閱讀 2453·2021-09-08 09:45
Electron 14.0.0 發(fā)布、StackBlitz 支持快速創(chuàng)建 Nuxt.js 應(yīng)用 |

閱讀 3391·2021-09-08 09:45
(S)CSS中實現(xiàn)主題樣式的4?種方式

閱讀 3131·2019-08-30 15:54
javascript系列--javascript深入淺出圖解作用域鏈和閉包

閱讀 3380·2019-08-26 13:54
snabbdom源碼解析（二） h函數(shù)

閱讀 1446·2019-08-26 13:26
函數(shù)式編程學(xué)習(xí)

閱讀 1412·2019-08-26 13:23
2018年9月所遇知識點整理

閱讀 942·2019-08-23 17:57
javascript真●私有變量

閱讀 2209·2019-08-23 17:14

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

發(fā)布訂閱模式實現(xiàn)及發(fā)布訂閱者模式與觀察者模式的不同

相關(guān)文章