觀察者模式和發布訂閱模式的區別

有這麼一段**經常會出現在**中

1
var pubsub = (()=>;
3function
subscribe(topic,fn)
7topics[topic].push(fn);8}
9function
publish(topic,...args)15}
16return
20 })()

測試**

1 pubsub.subscribe('test',function(a,b));
4 pubsub.publish('test','123','hh'); //
123 hh（發布者b發布了test事件）

呼叫publish後列印出了123 hh。很奇妙的一段**，當然實際上只是遍歷了陣列，然後把陣列中的所有函式全部執行一遍而已。但是對於乙個沒讀過實現**的人來說，卻是乙個神奇的存在，js居然能訂閱發布訊息，太酷了。

有的時候我會叫他觀察者模式，有時候又會叫他發布訂閱模式，覺得叫什麼都是對的。

但是，他們並不一樣。

在觀察者模式中，觀察者需要直接訂閱目標事件。在目標發出內容改變的事件後，直接接收事件並作出響應。發布訂閱模式相比觀察者模式多了個事件通道，訂閱者和發布者不是直接關聯的。

這段話可以看出上面的例子是發布訂閱模式。訂閱者a和發布者b是通過pubsub這個物件關聯起來的，他們沒有直接的交流。

那麼真正的觀察者模式是怎麼樣的？

乙個或多個觀察者對目標的狀態感興趣，通過將自己依附在目標物件上以便註冊所感興趣的內容。目標狀態發生改變並且觀察者可能對這些改變感興趣，會傳送乙個通知訊息，呼叫每個觀察者的更新方法。當觀察者不再對目標狀態感興趣時，他們可以簡單將自己從中分離。

我們來實現下觀察者模式。首先是目標的建構函式，他有個陣列，用於新增觀察者。還有個廣播方法，遍歷觀察者陣列後呼叫他們的update方法：

1
class subject
5addsub(sub)
8notify());12}
13 }

那麼觀察者就得有個update方法：

1
class observer
5 }

測試**

1 let subject = new
subject();
2 let ob = new
observer();3//
目標新增觀察者了
4subject.addsub(ob);5//
目標發布訊息呼叫觀察者的更新方法了
6 subject.notify(); //
update

可以看到目標和觀察者是直接聯絡在一起的。觀察者把自身新增到了目標物件中，可見和發布訂閱模式差別還是很大的。在這種模式下，目標更像乙個發布者，他讓新增進來的所有觀察者都執行了update函式，而觀察者就像乙個訂閱者。

個人覺得發布/訂閱模式比較簡單，使用的也比較廣泛。由於他訂閱者和發布者不直接關聯的特點我們完全可以把管理事件的物件寫到乙個單獨檔案中，作為庫來使用。發布訂閱模式中，雙方不知道對方的存在，而觀察者模式中，目標和觀察者是直接聯絡起來的。具體選擇什麼模式，得視場景而定。一般來說，發布/訂閱就夠用了，簡單清晰，符合我們dom事件程式設計的觀念。

觀察者模式**被用到過？vue的雙向繫結。下篇就講一下觀察者模式在vue雙向繫結實現中的運用。

觀察者模式和發布 訂閱模式的區別

觀察者模式和發布訂閱模式的區別

觀察者模式和發布訂閱模式

發布訂閱和觀察者模式的區別

相關推薦

觀察者模式和發布訂閱模式的區別