javascript設計模式 – 觀察者模式原理與用法例項分析
本文例項講述了javascript設計模式 – 觀察者模式原理與用法。分享給大家供大家參考,具體如下:
介紹:前面我們針對系統內一對多,多對多的情況做了解決方案,是使用中介者模式,將所有關聯關係交由中介者處理。這一節我們介紹另外一種解決一對多問題的設計模式:觀察者模式
觀察者模式是使用頻率最高的設計模式之一,用於建立一種物件與物件之間的依賴關係。
定義:定義物件之間的之間的一種一對多依賴關係,使得每當一個物件狀態發生改變時,其相關依賴物件皆得到通知並被自動更新。觀察者模式的別名包括髮布-訂閱模式,模型-檢視模式,監聽模式或從屬模式。觀察者模式是一種物件行為型模式。
場景:我們使用觀察者模式做一個進位制轉換的小demo
示例:
var Subject = function(){ var obServer = []; var _state; this.getState = function(){ return _state; } this.setState = function(state){ _state = state; this.notifyAllObservers(); } this.attach = function(ob){ obServer.push(ob); } this.notifyAllObservers = function(){ obServer.map(function(item){ item.update(); }); } } var BinaryObserver = function(subject){ var _subject = subject; _subject.attach(this); this.update = function(){ console.log('Binary String:' + _subject.getState().toString(2)); } } var OctalObserver = function(subject){ var _subject = subject; _subject.attach(this); this.update = function(){ console.log('Octal String:' + _subject.getState().toString(8)); } } var HexaObserver = function(subject){ var _subject = subject; _subject.attach(this); this.update = function(){ console.log('Hex String:' + _subject.getState().toString(16)); } } var subject = new Subject(); new HexaObserver(subject); new OctalObserver(subject); new BinaryObserver(subject); subject.setState(15); // Hex String:f // Octal String:17 // Binary String:1111
在這個例子裡面Subject稱為目標,它是被觀察的物件,一個目標允許被多個觀察者觀察,這些觀察者存放於obServer的陣列中,當目標發生change時通知所有觀察者。
BinaryObserver,OctalObserver,HexaObserver這三個類稱為觀察者,觀察者將對目標的改變作出反應。在觀察者中需要維護一個指向目標物件的引用。
觀察者模式總結:
優點:
* 觀察者模式可以實現表示層和資料邏輯層的分離,定義了穩定的訊息更新傳遞機制。
* 觀察者模式在觀察目標和觀察者者之間建立一個抽象的耦合。觀察目標只需要維持一個抽象觀察者的集合,無需瞭解其具體觀察者。
* 觀察者模式支援廣播通訊,觀察目標會向所有已註冊的觀察者傳送通知,簡化了一對多系統的設計難度
缺點:
* 在存在大量觀察者時,對所有觀察者的通知會花大量時間
* 如果觀察者和目標之間存在迴圈依賴,將會導致系統崩潰
適用場景:
* 系統中存在一個物件的改變將導致一個或多個其他物件也發生改變。
* 系統中存在大量依賴鏈,A影響B,B影響C,C影響D
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具:http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
更多關於JavaScript相關內容感興趣的讀者可檢視本站專題:《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程式設計有所幫助。