欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript設(shè)計(jì)模式 – 觀察者模式原理與用法實(shí)例分析

 更新時(shí)間：2020年04月22日 09:10:46   作者：李小強(qiáng)  
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 觀察者模式,結(jié)合實(shí)例形式分析了javascript觀察者模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了javascript設(shè)計(jì)模式 – 觀察者模式原理與用法。分享給大家供大家參考，具體如下：

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

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

場(chǎng)景：我們使用觀察者模式做一個(gè)進(jì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

在這個(gè)例子里面Subject稱為目標(biāo)，它是被觀察的對(duì)象，一個(gè)目標(biāo)允許被多個(gè)觀察者觀察，這些觀察者存放于obServer的數(shù)組中，當(dāng)目標(biāo)發(fā)生change時(shí)通知所有觀察者。
BinaryObserver，OctalObserver，HexaObserver這三個(gè)類稱為觀察者，觀察者將對(duì)目標(biāo)的改變作出反應(yīng)。在觀察者中需要維護(hù)一個(gè)指向目標(biāo)對(duì)象的引用。

觀察者模式總結(jié)：

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

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

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

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

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

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論