JS 發(fā)布訂閱模式

AlienZHOU 發(fā)布于2019-08-23 12:32 / 2802人閱讀

摘要：發(fā)布訂閱模式事件發(fā)布訂閱模式在異步編程中幫助我們完成更松的解耦，甚至在的架構(gòu)中以及設(shè)計模式中也少不了發(fā)布訂閱模式的參與。

首先聲明，本文并非原創(chuàng)。原文請點擊這里，本文是在原文的基礎(chǔ)上加入一些自己的一些東西，方便以后自己理解與查看。

發(fā)布訂閱模式

事件發(fā)布/訂閱模式 (PubSub) 在異步編程中幫助我們完成更松的解耦，甚至在 MVC、MVVC 的架構(gòu)中以及設(shè)計模式中也少不了發(fā)布-訂閱模式的參與。

優(yōu)點：在異步編程中實現(xiàn)更深的解耦

缺點：如果過多的使用發(fā)布訂閱模式，會增加維護的難度

實現(xiàn)發(fā)布訂閱模式

var Event = function() {
    this.obj = {}
}

Event.prototype.on = function(eventType,fn) {
    if(!this.obj[eventType]) {
        this.obj[eventType] = []
    }
    this.obj[eventType].push(fn)
}

Event.prototype.emit = function() {
    // 取第一個參數(shù)，作為eventType
    var eventType = Array.prototype.shift.call(arguments);
    //  獲取事件數(shù)組
    var arr = this.obj[eventType];
    var len = arr.length;
    // 循環(huán)數(shù)組，一次執(zhí)行其中的函數(shù)
    for(var i=0;i
以上代碼只能實現(xiàn)先訂閱，再發(fā)布。直接發(fā)布就會報錯。如何實現(xiàn)可以先發(fā)布，然后訂閱？
var Event = function() {
    this.obj = {}；
    this.cacheList = [];
}

Event.prototype.emit = function() {
    const args = arguments;  //函數(shù)參數(shù)
    const that = this;  //this指向,保持cache函數(shù)的this指向
    function cache() {
        var eventType = Array.prototype.shift.call(arg)
        var arr = that.obj[eventType]
        for (let i = 0; i < arr.length; i++) {
          arr[i].apply(arr[i], arg)
        }
    }
    this.cacheList.push(cache)  // 采用閉包，保持對emit函數(shù)中參數(shù)和that的引用
}

Event.prototype.on = function(eventType,fn) {
    if(!this.obj[eventType]) {
        this.obj[eventType] = []
    }
    this.obj[eventType].push(fn)
    // 在訂閱函數(shù)中執(zhí)行emit函數(shù)中緩存的函數(shù)
    for (let i = 0; i < this.cacheList.length; i++) {
        this.cacheList[i]()
    }
}

改成這樣后就實現(xiàn)了先發(fā)布函數(shù)，再訂閱的過程。但是也只能先發(fā)布，然后再訂閱，反過來就行不通。

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

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

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

相關(guān)文章

10分鐘弄懂一種簡單的js設(shè)計模式（觀察者/發(fā)布訂閱）

摘要：發(fā)布者注冊發(fā)布訂閱者自動打印消息消息觀察者模式與發(fā)布訂閱模式類似。在此種模式中，一個目標物件在它本身的狀態(tài)改變時主動發(fā)出通知，觀察者收到通知從而使他們的狀態(tài)自動發(fā)生變化。做為非科班出身的前端er，每次聽到設(shè)計模式都感覺很高大上，總感覺這些東西是造火箭原子彈用的，距離我們這些造螺絲釘很遙遠。但是最近在做一個聊天消息的業(yè)務(wù)時，發(fā)現(xiàn)貌似用上發(fā)布訂閱模式業(yè)務(wù)就很清晰了。創(chuàng)建一個消息類當作發(fā)布...

xiguadada 2019-08-26 10:13 評論0 收藏0
JS每日一題:設(shè)計模式-如何理解觀察者(發(fā)布訂閱)模式?

摘要：期設(shè)計模式如何理解觀察者發(fā)布訂閱模式定義觀察者模式又叫發(fā)布訂閱模式，它定義了一種一對多的關(guān)系，讓多個觀察者對象同時監(jiān)聽某一個主題對象，這個主題對象的狀態(tài)發(fā)生變化時就會通知所有的觀察者對象，使得它們能夠自動更新自己生活實例理解你今天去看一個 20190411期設(shè)計模式-如何理解觀察者(發(fā)布訂閱)模式? 定義: 觀察者模式又叫發(fā)布訂閱模式（Publish/Subscribe），它定義了一...

baishancloud 2019-08-23 16:53 評論0 收藏0
觀察者模式和發(fā)布訂閱模式（JS）

摘要：最近被人問到設(shè)計模式，觀察者模式和發(fā)布訂閱模式二者有什么區(qū)別。觀察者模式觀察者模式，目標和觀察者是基類，目標提供維護觀察者的一系列方法，觀察者提供更新接口。最近被人問到設(shè)計模式，觀察者（Observer）模式和發(fā)布（Publish）/訂閱（Subscribe）模式二者有什么區(qū)別。其實這兩種模式還是有些許差異的，本質(zhì)上的區(qū)別是調(diào)度的方式不同。觀察者模式觀察者模式，目標和觀察者是基類...

Sanchi 2019-08-23 12:59 評論0 收藏0
js中的一對多 - 訂閱發(fā)布模式

摘要：解決命名空間問題暫不管，刪除訂閱問題這個用處不大目前我們先著手解決這個問題對應(yīng)的消息么有被人訂閱沒有傳入具體的回調(diào)函數(shù)表示取消對應(yīng)的所有訂閱反向遍歷刪除訂閱回調(diào)函數(shù)這個對象，能夠解決大部分事件模擬的問題。訂閱發(fā)布模式如果按數(shù)學(xué)翻譯其實就是.一對多的映射關(guān)系.怎么解釋呢？就是一個開關(guān)，同時并聯(lián)幾個燈泡(在不同房間),觸發(fā)的時候，幾個燈泡都會得到指令，然后執(zhí)行發(fā)光的行為。訂閱發(fā)布模式...

Cobub 2019-08-22 11:00 評論0 收藏0
JS設(shè)計模式之Obeserver（觀察者）模式、Publish/Subscribe（發(fā)布/訂閱）模式

摘要：觀察者模式定義設(shè)計模式中對的定義一個對象稱為維持一系列依賴于它觀察者的對象，將有關(guān)狀態(tài)的任何變更自動通知給它們。如圖模式比較觀察者模式則多了一個類似于話題調(diào)度中心的流程，發(fā)布者和訂閱者解耦。 Obeserver（觀察者）模式定義《js設(shè)計模式》中對Observer的定義：一個對象（稱為subject）維持一系列依賴于它（觀察者）的對象，將有關(guān)狀態(tài)的任何變更自動通知給它們。《設(shè)計模...

荊兆峰 2019-08-26 13:37 評論0 收藏0
簡單理解觀察者模式(pub/sub)在前端中的應(yīng)用

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

guyan0319 2019-08-23 12:10 評論0 收藏0