正常操作，正常分析，大家好，我是D1n910。

今天我繼續(xù)來學習 《JavaScript 設計模式》的第四篇 行為型設計模式

這是一個連續(xù)的讀書筆記，所以如果你之前的內容沒有看的話，可以去看看（建議直接看書，當然書的例子都比較早了，是2015年之前的代碼內容，過了六年了，前端發(fā)展了很多，比如類的聲明可以直接用 Class 了）。

直接查看目錄就可以查看到所有的系列文章啦。

這里再次感謝 《Javascript 設計模式》及其作者 張榮銘，專欄內容是在它的基礎上生成的。

現(xiàn)在會覺得很多設計模式離我們有點遙遠，是因為我們現(xiàn)在都在用大佬寫好的框架吧，很多設計模式都包含在框架里了。

后面有機會的話，我希望我可以查看目前主流框架的源代碼，然后進行講解。

第四篇 行為型設計模式

行為型設計模式用于不同對象之間職責劃分或算法抽象，行為型設計模式不僅僅涉及類和對象，還涉及類或對象之間的交流模式并加以實現(xiàn)。

第 17?章 通信衛(wèi)星 —— 觀察者模式

觀察者模式（Observe）: 又被稱作發(fā)布-訂閱者模式或者消息機制，定義了一種依賴關系。解決了主體對象與觀察者對象之間功能的耦合。

嘿呀，這就是我最感興趣的模式之一了！因為之前學過Redux，里面的實現(xiàn)原理有觀察者模式。

在我們的頁面上，不同模塊之間通常會有聯(lián)動效果。

場景是：一個消息發(fā)布框。工程師 A 實現(xiàn)了編輯消息框，工程師 B 實現(xiàn)了消息列表，工程師 C 實現(xiàn)了消息通知。

希望在【編輯消息框】后，點擊發(fā)送，能夠同時更新【消息列表】，又進行【消息通知】。

這里我們就可以引入觀察者模式來很方便地實現(xiàn)我們的需求。

觀察者模式的核心就是觀察者，它有下面三個主要的內容：

1. 觀察者允許方法訂閱事件；

2. 觀察者觀察事件是否發(fā)生，如果事件發(fā)生了，就執(zhí)行事件對應的方法；

3. 觀察者允許方法取消訂閱事件。

根據這些上面的內容，實現(xiàn)的觀察者對象大體如下：

我們再具體實現(xiàn)這三個方法

訂閱消息

訂閱消息這里將方法推入到該消息的執(zhí)行方法隊列中；

發(fā)布消息

觸發(fā)發(fā)布消息以后，會遍歷執(zhí)行訂閱消息的方法隊列。

移除訂閱

可以根據消息以及要取消訂閱的函數(shù)，遍歷方法隊列進行刪除消息訂閱

應用觀察者模式

我們可以實現(xiàn)一個簡單的聊天室功能。

最終效果如下：

本章 End

加油加油

2021年02月24日 D1n910 學習于南山后海