溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了如何使用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
看完上述內容，是不是對如何使用javascript中的觀察者模式有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
