您好,登錄后才能下訂單哦!
這篇文章主要講解了如何使用javascript中的觀察者模式,內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
觀察者模式是使用頻率最高的設(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
看完上述內(nèi)容,是不是對(duì)如何使用javascript中的觀察者模式有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。