觀察者模式:定議

定義對象間的一種一對多的關系，當一個對象狀態改變時 (一般稱為被觀察者)，依賴于該對象的對象被通知，并更新;

觀察者模式:說明

1. 觀察者模式是行為模式，也被稱為：發布-訂閱模式、模型-視圖模式、源-監聽器模式、從屬者模；

2. 面對象過程中觀察者模式的組成:

　　1>. 抽象主題角色：這個角色里，定義維護了一份對觀察者列表的管理集，一組用數組來存放，并定義了對一些基礎的接口，比例用來添加跟刪除觀察者的方法；

　　2>. 具體主題角色：這個角色，對于與客戶，具體業務狀態數據交互，并做一定的處理，然后再通知各個觀察者 更新自己;

　　抽象跟具體主題里的 一些常用的方法接口，如果 add|delete 或 notified方法，在哪個方法不是固定的; add跟delete也可以出現在 具體的主題角色里；

　　3>. 抽象觀察者角色：為所有觀察者定義一個統一的接口，這個接口叫更新接口；

　　4>. 具體觀察者角色：實現抽象觀察者角色的各自的更新方法；

3. 執行過程：

　　

4. 觀察者模式-結構圖:

　　

5. 場景實例描述:

　　1>. 比如說母親通知孩子吃飯的例子，一個家里有一兩個孩子，這兩個小孩子有點調皮，喜歡亂跑，媽媽把飯煮好了，但是看不到小孩的身影，叫也沒見小孩回應回來的，所以媽媽就在小孩身上裝了個 通知設備，一到把飯煮好，媽媽就在一個通知設備上按個按鈕，就可以小孩身上的設備上發出聲音：‘飯煮好了，快點回來吃飯’，然后小孩就可以馬上回來吃剛上桌溫熱的飯菜了；

　　2>. java的事件監聽機制包括：事件源，事件監聽器，事件對象；

　　　　事件監聽器相當于觀察者，觀察者用于提供統一的更新方法;

　　　　事件源與事件對象相當于被觀察者 (具體主題對象)

6. 觀察者模式所應用到的原則: 對象的單一性質原則，開閉原則等；開閉原則所體現到的就是面對對象編碼所提到要以接口來編程的原則，這樣程序對象間就可以更好的復用及解耦;

7. 觀察者模式主要組成: 被觀察對象(目標對象, 具體對象, 主題), 觀察者 (訂閱者, 監聽者), 事件(更新方法);

8. 當具體觀察者對象的更新方法接收為普通類型數據,比如 string 時, 一般稱為“推”模式；

　　當 更新方法傳遞的是，被觀察者(具體主題對象)時，一般被稱為“拉”模式；

?

源碼實例

1. 主題對象:

function Subject() {this.Observers = []; }Subject.prototype.add = function(observer) {this.Observers.push(observer); }Subject.prototype.remove = function(observer) {var me = this;for (idx in me.Observers) {if (me.Observers[idx] == observer) {me.Observers[idx].splice(idx, 1);break;}} }//推模式 Subject.prototype.notifyState = function(info) {var me = this;for (idx in me.Observers) {me.Observers[idx].update(info)} }//接模式 Subject.prototype.notifyObservers = function(subject) {var me = this;for (idx in me.Observers) {me.Observers[idx].updateSubject(subject)} }

2. 具體主體對象

function ConcreteSubject() {Subject.call(this); }ConcreteSubject.prototype.operate = function() {var state = 'info';this.notifyState(state);this.notifyObservers(this); }

?

3. 觀察者對象A

function ConcreteObserverA() {this.update = function(info) {console.log('A Observer'+info);}
　　this.updateSubject = function(subject) {console.log('A Observer object');} }

4. 觀察者對象B

function ConcreteObserverB() {this.update = function(info) {console.log('B Observer'+info);}this.updateSubject = function(subject) {console.log('B Observer object');} }

5. 使用方法;

var subject = new ConcreteSubject();var aobserver = new ConcreteObserverA(); var bobserver = new ConcreteObserverB();subject.add(aobserver); subject.add(bobserver);subject.operate();

其他說明

主題對象是可以多種不同存在的，就是上面的媽媽叫孩子吃飯例子，一個小區，一個小村莊會有多個的母親，一個母親下會有一個或幾個的孩子；

母親是被觀察者，小孩們是觀察者，他們在等待母親主動推送消息通知他們去吃飯，但是小孩子回家的具體方式是不一樣的，有的是馬上跑回來，有的是慢慢吞吞回家去;

母親是一個對象類，這個對象類當發生煮飯煮熟了，就會執行operate這個方法，去通知這小孩子的觀察類對象，然后再更新自己回家去，在面向對象原則里，類要求功能單一職責，這有助于應用情況的擴展以及解耦;

轉載于:https://www.cnblogs.com/editor/p/4783551.html

總結

以上是生活随笔為你收集整理的[设计模式] Javascript 之 观察者模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。