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

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

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

概念

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

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

優(yōu)缺點(diǎn)

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

舉例

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

代碼實(shí)現(xiàn)

var observer = function () {
    var _observer = {};     
    let _queue = {};     // 所有事件的隊(duì)列
    /**
    * @param 注冊(cè)的事件名稱
    * @param 事件觸發(fā)時(shí)執(zhí)行的函數(shù)
    */
    _observer.on = function (eventName, fn) {
        if (Object.prototype.toString.call(fn) !== "[object Function]") return;
        if (_queue[eventName] && _queue[eventName].length > 0) {
            // 如果之前注冊(cè)過(guò)eventName事件
            _queue[eventName].push(fn);
        } else {
            // 之前沒(méi)有注冊(cè)過(guò)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);
        }
    },
    // 移除注冊(cè)事件
    _observer.remove = function (removeEventName) {
        for(var k in _queue) {
            if (k === removeEventName) {
                delete _queue[k];
            }
        }
    }
    // 移除所有注冊(cè)事件
    _observer.removeAll = function () {
        _queue = {};
    }
    return _observer;
}()

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

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

區(qū)別

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

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

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

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

參考

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/52418.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Jensen

男|高級(jí)講師

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

TA的文章

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

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

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

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

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

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

閱讀 1384·2019-08-26 13:23
2018年9月所遇知識(shí)點(diǎn)整理

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

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

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章