JavaScript 觀察者模式與發佈訂閱模式

觀察者模式：定義了對象間一種一對多的依賴關係，當目標對象 Subject 的狀態發生改變時，所有依賴它的對象 Observer 都會得到通知。

模式特徵:

一個目標者對象 Subject，擁有方法：添加 / 刪除 / 通知 Observer；

多個觀察者對象 Observer，擁有方法：接收 Subject 狀態變更通知並處理；

目標對象 Subject 狀態變更時，通知所有 Observer。

Subject 添加一系列 Observer， Subject 負責維護與這些 Observer 之間的聯繫，“你對我有興趣，我更新就會通知你”。

代碼實現：

優勢:目標者與觀察者，功能耦合度降低，專注自身功能邏輯；觀察者被動接收更新，時間上解耦，實時接收目標者更新狀態。

缺點：觀察者模式雖然實現了對象間依賴關係的低耦合，但卻不能對事件通知進行細分管控，如 “篩選通知”，“指定主題事件通知” 。

比如上面的例子，僅通知 “前端開發者” ？觀察者對象如何只接收自己需要的更新通知？上例中，兩個觀察者接收目標者狀態變更通知後，都執行了 update()，並無區分。

“00後都在追求個性的時代，我能不能有點不一樣？”，這就引出我們的下一個模式。進階版的觀察者模式。“發佈訂閱模式”，部分文章對兩者是否一樣都存在爭議。僅代表個人觀點：兩種模式很類似，但是還是略有不同，就是多了個第三者，因 JavaScript 非正規面嚮對象語言，且函數回調編程的特點，使得 “發佈訂閱模式” 在 JavaScript 中代碼實現可等同為 “觀察模式”。

發佈訂閱模式：基於一個事件（主題）通道，希望接收通知的對象 Subscriber 通過自定義事件訂閱主題，被激活事件的對象 Publisher 通過發佈主題事件的方式通知各個訂閱該主題的 Subscriber 對象。

發佈訂閱模式與觀察者模式的不同，“第三者” （事件中心）出現。目標對象並不直接通知觀察者，而是通過事件中心來派發通知。

代碼實現

發佈訂閱模式中，訂閱者各自實現不同的邏輯，且只接收自己對應的事件通知。實現你想要的 “不一樣”。

DOM 事件監聽也是 “發佈訂閱模式” 的應用：

發佈訂閱的通知順序：

先訂閱後發佈時才通知（常規）

訂閱後可獲取過往以後的發佈通知 （QQ離線消息，上線後獲取之前的信息）

流行庫的應用

jQuery 的 on 和 trigger，$.callback();

Vue 的雙向數據綁定;

Vue 的父子組件通信 $on/$emit