發布 訂閱模式

2021-10-02 04:27:41 字數 2039 閱讀 5098

一、核心概述

發布訂閱模式主要包含三大塊:快取陣列、訂閱、發布

快取陣列

乙個陣列

訂閱往陣列裡面壓入函式fn

發布裡面迴圈遍歷陣列,然後執行陣列中的函式。

二、簡單**實現及改進

(1)實現

var subpub = {};

subpub.cache = ;

subpub.subscribe = function(fn)

subpub.publish = function()

} //test

subpub.subscribe(function(price,square))

subpub.publish(200,102);

subpub.publish(300,153)

(2)改進 --- 主要針對訂閱者不需要接收到所有的發布事件---key

var subpub = {};

subpub.cache = {}; //是乙個陣列物件

subpub.subscribe = function (key, fn)

this.cache[key].push(fn);

}subpub.publish = function ()

}//test

subpub.subscribe('lowprice',function (price, square) )

subpub.subscribe('highprice',function (price, square) )

subpub.publish('lowprice',200, 102);

subpub.publish('highprice',400, 153)

取消訂閱的事件

subpub.subscribe('lowprice', fn1 = function (price, square) )

subpub.subscribe('lowprice', fn11 = function (price, square) )

subpub.subscribe('highprice', fn2 = function (price, square) )

//取消訂閱的事件

subpub.remove = function (key, fn)

if(!fn) else )}}

subpub.remove('lowprice',fn1)

subpub.publish('lowprice', 200, 102);

取消的時候,注意區分不同情況。上述使用了filter函式用來過濾需要取消訂閱的事件

三、現實專案需求

**登入====》登入以後需要在各處顯示客戶的資訊。不能在使用者登陸後去依次呼叫模組的重新整理或或其他相關函式,要監聽登入這一次操作。

//封裝一下

var event = ,

subscribe: function (key, fn)

this.cache[key].push(fn);

},publish: function ()

},remove: function (key, fn)

if (!fn) else )}}

};var eventforpub = function (obj)

}var login = {};

eventforpub(login)

var headitem = (function () )

return

}})();

var buyitem = (function () )

return

}})();

var data=

login.publish('login',data);

執行結果如下:

發布 訂閱模式

發布 訂閱模式又叫觀察者模式,它定義物件間的一種一對多的關係,當乙個物件的狀態發生改變時,所有依賴於它的物件都將得到通知。在js中,我們一般用事件模型來替代傳統的發布 訂閱模式。實現 varpubsub function p 訂閱 p.subscribe function flag,fn 發布 p....

發布訂閱模式

不同的語言,相同的模式。最近在關注設計模式的知識,發布訂閱模式其實是物件間一對多的依賴關係,當乙個物件的狀態發生改變時,所有依賴與它的物件都將得到狀態改變的通知。作用 1 廣泛應用於非同步程式設計中 2 物件間鬆散耦合的編寫 自定義事件 let corp 定義乙個公司物件 這裡放乙個列表來緩衝回掉函...

發布訂閱模式

前言 應用場景 專案做久了以後會越來越大,當很多人去做同乙個人專案的時候,裡面的邏輯耦合度當然是越低越好,有這麼乙個場景 需求 3個人同時開發乙個專案的時候,分別開發登入模組login 商品模組showshoplist 書籍模組showbooklist 當使用者登入成功的時候,需要使用者資訊去重新整...