本文實例講述了javascript設計模式 ? 觀察者模式原理與用法。分享給大家供大家參考，具體如下：

介紹：前面我們針對系統(tǒng)內(nèi)一對多，多對多的情況做了解決方案，是使用中介者模式，將所有關聯(lián)關系交由中介者處理。這一節(jié)我們介紹另外一種解決一對多問題的設計模式：觀察者模式觀察者模式是使用頻率最高的設計模式之一，用于建立一種對象與對象之間的依賴關系。

定義：定義對象之間的之間的一種一對多依賴關系，使得每當一個對象狀態(tài)發(fā)生改變時，其相關依賴對象皆得到通知并被自動更新。觀察者模式的別名包括發(fā)布-訂閱模式，模型-視圖模式，監(jiān)聽模式或從屬模式。觀察者模式是一種對象行為型模式。

場景：我們使用觀察者模式做一個進制轉(zhuǎn)換的小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的數(shù)組中，當目標發(fā)生change時通知所有觀察者。BinaryObserver，OctalObserver，HexaObserver這三個類稱為觀察者，觀察者將對目標的改變作出反應。在觀察者中需要維護一個指向目標對象的引用。

觀察者模式總結：

優(yōu)點：* 觀察者模式可以實現(xiàn)表示層和數(shù)據(jù)邏輯層的分離，定義了穩(wěn)定的消息更新傳遞機制。* 觀察者模式在觀察目標和觀察者者之間建立一個抽象的耦合。觀察目標只需要維持一個抽象觀察者的集合，無需了解其具體觀察者。* 觀察者模式支持廣播通信，觀察目標會向所有已注冊的觀察者發(fā)送通知，簡化了一對多系統(tǒng)的設計難度

缺點：* 在存在大量觀察者時，對所有觀察者的通知會花大量時間* 如果觀察者和目標之間存在循環(huán)依賴，將會導致系統(tǒng)崩潰

適用場景：* 系統(tǒng)中存在一個對象的改變將導致一個或多個其他對象也發(fā)生改變。* 系統(tǒng)中存在大量依賴鏈，A影響B(tài)，B影響C，C影響D

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。