js 觀察者模式 訂閱釋出模式

wdapp發表於2020-01-30
JS模式

上次研究觀察者模式，很多文章說它也叫Subscribe/Publish(釋出/訂閱模式)。可在《Javascript設計模式》一書中，這兩種模式還是有些區別的。書中原話如下：

Observer模式要求希望接收到主題通知者的觀察者必須訂閱內容改變的事件 Subscribe/Publish模式使用了一個主題/事件通道，這個通道介於訂閱者和釋出者之間。該事件系統允許程式碼定義應用程式的特定事件，該事件可以傳遞自定義引數，自定義引數包含訂閱者所需要的值。其目的是避免訂閱者和釋出者產生依賴關係。 與Observer模式不同之處在於它允許任何訂閱者執行適當的事件處理程式來註冊和接收發布者發出的通知。

好吧，不明覺厲。下面是我的理解：

觀察者模式中，目標物件負責維護觀察者。釋出/訂閱模式中釋出者不關心訂閱者，只負責把訊息丟出去就不管了。 觀察者模式中，觀察者要提供一個介面，然後當目標物件發生改變時呼叫此介面使自身狀態和目標狀態保持一致。即所有的觀察者都要有一個統一的介面(比如上文中寫的update方法，大家的方法都要叫這個名字)。而釋出/訂閱模式中，訂閱者事件的觸發不是依靠這樣一個介面，而是訂閱者通過監聽一個特定的訊息(這個訊息一般包含名稱和訂閱者所需要的引數)來觸發的。可以理解為訂閱者監聽的不是釋出者，而是訊息池，只要訊息池裡有它關心的訊息，即觸發事件，不管這個訊息是誰釋出過去的。釋出者和訂閱者是解耦的。 下面是js中釋出/訂閱模式的實現，複製貼上到console裡面試一試就明白了：

var pubsub = (function(){
	var q = {}
	topics = {},
	subUid = -1;
//釋出訊息
q.publish = function(topic, args) {
if(!topics[topic]) {return;}
var subs = topics[topic],
len = subs.length;
while(len--) {
	subs[len].func(topic, args);
}
return this;
};
//訂閱事件
q.subscribe = function(topic, func) {
topics[topic] = topics[topic] ? topics[topic] : [];
var token = (++subUid).toString();
topics[topic].push({
	token : token,
	func : func
});
return token;
};
return q;
//取消訂閱就不寫了，遍歷topics，然後通過儲存前面返回token，刪除指定元素
})();
//觸發的事件
var logmsg = function(topics, data) {
console.log("logging:" + topics + ":" + data);
}
//監聽指定的訊息'msgName'
var sub = pubsub.subscribe('msgName', logmsg);
// var sub = pubsub.subscribe('anotherMsgName', logmsg);
//釋出訊息'msgName'
pubsub.publish('msgName', 'hello world');
//釋出無人監聽的訊息'msgName1'
pubsub.publish('anotherMsgName', 'me too!');
複製程式碼

相關文章