01 js訂閱模式和觀察者模式(觀察者模式和發布/訂閱模式的區別)

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

【1】定義

觀察者模式定義了對象間的一種一對多的依賴關系，當一個對象的狀態發生改變時，所有依賴于它的對象都將得到通知，并自動更新。觀察者模式屬于行為型模式，行為型模式關注的是對象之間的通訊，觀察者模式就是觀察者和被觀察者之間的通訊。觀察者模式有一個別名叫“發布-訂閱模式”，或者說是“訂閱-發布模式”，訂閱者和訂閱目標是聯系在一起的，當訂閱目標發生改變時，逐個通知訂閱者。

【2】案例

【3】主要解決的問題

一個對象狀態改變給其他對象通知的問題，而且要考慮到易用和低耦合，保證高度的協作。

【4】優點

【5】缺點

【1】介紹

其實24種基本的設計模式中并沒有發布-訂閱模式，上面也說了，他只是觀察者模式的一個別稱。但是經過時間的沉淀，似乎他已經強大了起來，已經獨立于觀察者模式，成為另外一種不同的設計模式。在現在的發布訂閱模式中，稱為發布者的消息發送者不會將消息直接發送給訂閱者，這意味著發布者和訂閱者不知道彼此的存在。在發布者和訂閱者之間存在第三個組件，稱為消息代理或調度中心或中間件，它維持著發布者和訂閱者之間的聯系，過濾所有發布者傳入的消息并相應地分發它們給訂閱者。

【2】案例

【3】優點

【4】缺點

【5】主要解決問題

發布-訂閱模式是前端常用的一種設計模式，現在主流的MVVM框架，都大量使用了此設計模式，其主要作用有以下兩點：

前端的事件綁定有三要素：

從表面上看:

往更深層次講:

從使用層面上講

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

觀察者（Observer）模式又名發布-訂閱（Publish/Subscribe）模式。GOF給觀察者模式如下定義：定義對象間的一種一對多的依賴關系，當一個對象的狀態發生改變時，所有依賴于它的對象都得到通知并被自動更新。

在這里先講一下面向對象設計的一個重要原則——單一職責原則。因此系統的每個對象應該將重點放在問題域中的離散抽象上。因此理想的情況下，一個對象只做一件事情。這樣在開發中也就帶來了諸多的好處：提供了重用性和維護性，也是進行重構的良好的基礎。

因此幾乎所有的設計模式都是基于這個基本的設計原則來的。觀察者模式的起源我覺得應該是在GUI和業務數據的處理上，因為現在絕大多數講解觀察者模式的例子都是這一題材。但是觀察者模式的應用決不僅限于此一方面。

下面我們就來看看觀察者模式的組成部分。

1) 抽象目標角色（Subject）：目標角色知道它的觀察者，可以有任意多個觀察者觀察同一個目標。并且提供注冊和刪除觀察者對象的接口。目標角色往往由抽象類或者接口來實現。

2) 抽象觀察者角色（Observer）：為那些在目標發生改變時需要獲得通知的對象定義一個更新接口。抽象觀察者角色主要由抽象類或者接口來實現。

3) 具體目標角色（Concrete Subject）：將有關狀態存入各個Concrete Observer對象。當它的狀態發生改變時, 向它的各個觀察者發出通知。

4) 具體觀察者角色（Concrete Observer）：存儲有關狀態，這些狀態應與目標的狀態保持一致。實現Observer的更新接口以使自身狀態與目標的狀態保持一致。在本角色內也可以維護一個指向Concrete Subject對象的引用。

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

2019-03-06-12:31 午飯吃完啦～

觀察者模式和發布訂閱模式最大的區別就是發布訂閱模式有個事件 調度中心 ！！！

觀察者模式中觀察者和目標直接進行交互，而發布訂閱模式中統一由 調度中心 進行處理，訂閱者和發布者 互不干擾 。這樣一方面實現了 解耦 ，還有就是可以實現更細粒度的一些控制。比如發布者發布了很多消息，但是不想所有的訂閱者都接收到，就可以在 調度中心 做一些處理，類似于 權限控制之類的。

為方便記憶，關鍵字：調度中心、解耦（發布/訂閱者互不干擾）

js 怎么理解js事件觀察者模式

觀察者模式主要應用于對象之間一對多的依賴關系，當一個對象發生改變時，多個對該對象有依賴的其他對象也會跟著做出相應改變，這就非常適合用觀察者模式來實現。使用觀察者模式可以根據需要增加或刪除對象，解決一對多對象間的耦合關系，使程序更易于擴展和維護。

基礎知識:

觀察者模式定義了對象間的一種一對多依賴關系，每當一個對象發生改變時，其相關依賴對象皆得到通知并被進行相應的改變。觀察者模式又叫做發布-訂閱模式。生活中有很多類似的關系，比如買粉絲買粉絲訂閱，多個讀者訂閱一個買粉絲買粉絲，一旦買粉絲有更新，多個讀者都會收到更新，而這種情況在應用程序中也非常常見，js綁定各種事件本質上就是觀察者模式的實現。

觀察者模式是一個非常有用的設計模式，它主要有兩個角色組成：

（1）目標對象：作為一對多關系中的一，可以用來管理觀察者的增加和刪除。

（2）觀察者對象：觀察目標對象，一旦目標發生改變則做出相應的反應。

觀察者模式 vs 發布-訂閱模式

差異總結：

1. 在觀察者模式中，觀察者 （Observer） 是知道Subject的，Subject一直保持對觀察者進行記錄。然而，在發布訂閱模式中，發布者 （Publisher） 和訂閱者 （Subscriber） 不知道對方的存在。它們只有通過消息代理 （ 信息中介 ） 進行通信。

2. 在發布訂閱模式中，組件是松散耦合的，正好和觀察者模式相反。

3. 觀察者模式大多數時候是同步的，比如當事件觸發，Subject就會去調用觀察者的方法。而發布-訂閱模式大多數時候是異步的（使用消息隊列）。

4. 在觀察者模式中依賴于Subject 對象的一系列 Observer 對象在被通知之后只能執行同一個特定的更新方法，而在發布訂閱模式中則可以基于不同的主題去執行不同的自定義事件。

模型闡述：

觀察者模式里，觀察者（Observer）直接訂閱（subscribe）主題（Subject），而當主題被激活的時候，會觸發（fire）觀察者里的事件。

訂閱發布模式里，訂閱者（Subscriber）通過監聽（on）事件總線（Event Bus）里的事件，當事件總線里的事件被觸發（emit）的時候，訂閱者將會執行相應的操作。而這里需要注意的是，事件總線里的事件是通過發布者（Publisher）進行發布（publish）和 通知事件總線 觸發 的。

Javascript如何實現接口？

在javascript中并沒有原生的創建或者實現接口的方式，或者判定一個類型是否實現了某個接口，我們只能利用js的靈活性的特點，模擬接口。

在javascript中實現接口有三種方式：注釋描述、屬性驗證、鴨子模型。

note：因為我看的是英文書，翻譯水平有限，不知道有些詞匯如何翻譯，大家只能領會精神了。

1. 注釋描述 （Describing Interfaces with Comments）

例子：

復制代碼 代碼如下:

/*

interface Composite {

function add(child);

function remove(child);

function getChild(index);

}

interface FormItem {

function save();

}

*/

var CompositeForm = function(id, method, action) { // implements Composite, FormItem

...

};

//Implement the Composite interface.

CompositeForm.prototype.add = function(child) {

...

};

CompositeForm.prototype.remove = function(child) {

...

};

CompositeForm.prototype.getChild = function(index) {

...

};

// Implement the FormItem interface.

CompositeForm.prototype.save = function() {

...

};

模擬其他面向對象語言，使用interface 和 implements關鍵字，但是需要將他們注釋起來，這樣就不會有語法錯誤。

這樣做的目的，只是為了告訴其他編程人員，這些類需要實現什么方法，需要在編程的時候加以注意。但是沒有提供一種驗證方式，這些類是否正確實現了這些接口中的方法，這種方式就是一種文檔化的作法。

2. 屬性驗證（Emulating Interfaces with Attribute Checking）

例子：

復制代碼 代碼如下:

/* interface

Composite {

function add(child);

function remove(child);

function getChild(index);

}

interface FormItem {

function save();

}

*/

var CompositeForm = function(id, method, action) {

this.implementsInterfaces = ['Composite', 'FormItem'];

...

};

...

function addForm(formInstance) {

if(!implements(formInstance, 'Composite', 'FormItem')) {

throw new Error("Obj

很赞哦!（9979）