發(fā)布-訂閱模式簡述

發(fā)布---訂閱模式又叫觀察者模式，它定義了對象間的一種一對多的關系，讓多個觀察者對象同時監(jiān)聽某一個主題對象，當一個對象發(fā)生改變時，所有依賴于它的對象都將得到通知。

以網(wǎng)購為例：

假設小紅看上了一雙鞋子，但該鞋子已經(jīng)斷貨了，賣家承諾她到貨通知。與此同時，小明、小花燈也關注了這雙鞋子。

在這個場景中，賣家就是發(fā)布者，小紅等人都屬于訂閱者。當鞋子到貨時，會依次通知到每個人。

發(fā)布訂閱模式的優(yōu)點：

支持簡單的廣播通信，當對象狀態(tài)發(fā)生改變時，會自動通知已經(jīng)訂閱過的對象。

發(fā)布者與訂閱者耦合性降低，發(fā)布者只管發(fā)布一條消息出去，它不關心這條消息如何被訂閱者使用，同時，訂閱者只監(jiān)聽發(fā)布者的事件名，只要發(fā)布者的事件名不變，它不管發(fā)布者如何改變；同理賣家（發(fā)布者）它只需要將鞋子來貨的這件事告訴訂閱者(買家)，他不管買家到底買還是不買，還是買其他賣家的。只要鞋子到貨了就通知訂閱者即可。

發(fā)布訂閱模式的缺點：

創(chuàng)建訂閱者需要消耗一定的時間和內(nèi)存。如果過度使用的話，反而使代碼不好理解及代碼不好維護等等。

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

首先要想好誰是發(fā)布者(比如上面的賣家)。

然后給發(fā)布者添加一個緩存列表，用于存放回調(diào)函數(shù)來通知訂閱者(比如上面的買家收藏了賣家的店鋪，賣家通過收藏了該店鋪的一個列表名單)。

最后就是發(fā)布消息，發(fā)布者遍歷這個緩存列表，依次觸發(fā)里面存放的訂閱者回調(diào)函數(shù)。

實戰(zhàn)

發(fā)布訂閱模式是最經(jīng)典的設計模式之一，介紹的文章也非常多。這里不打算過多介紹。直接上代碼~~~

var Event = (function(){var list = {},listen,trigger,remove;listen = function(key,fn){if(!list[key]) {// 如果還沒有訂閱過此類消息，給該類消息創(chuàng)建一個緩存列表list[key] = [];}list[key].push(fn); // 訂閱消息添加到緩存列表};trigger = function(){var key = Array.prototype.shift.call(arguments), // 取出消息類型名稱fns = list[key]; // 取出該消息對應的回調(diào)函數(shù)的集合// 如果沒有訂閱過該消息的話，則返回if(!fns || fns.length === 0) {return false;}for(var i = 0, fn; fn = fns[i++];) {fn.apply(this,arguments); // arguments 是發(fā)布消息時附送的參數(shù)}};remove = function(key,fn){// 如果key對應的消息沒有訂閱過的話，則返回var fns = list[key];// 如果沒有傳入具體的回調(diào)函數(shù)，表示需要取消key對應消息的所有訂閱if(!fns) {return false;}if(!fn) {fns && (fns.length = 0);}else {for(var i = fns.length - 1; i >= 0; i--){var _fn = fns[i];if(_fn === fn) {fns.splice(i,1);// 刪除訂閱者的回調(diào)函數(shù)}}}};return {listen: listen,trigger: trigger,remove: remove} })(); // 測試代碼如下： Event.listen("color",function(size) {console.log("尺碼為:"+size); // 打印出尺碼為42 }); Event.trigger("color",42); 復制代碼

總結(jié)

以上是生活随笔為你收集整理的JS设计模式七：发布-订阅模式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。