JavaScript觀察者模式(publish/subscribe)原理與實(shí)現(xiàn)方法
本文實(shí)例講述了JavaScript觀察者模式(publish/subscribe)原理與實(shí)現(xiàn)方法。分享給大家供大家參考,具體如下:
觀察者模式又叫做發(fā)布訂閱模式,它定義了一種一對(duì)多的關(guān)系,讓多個(gè)觀察者對(duì)象同時(shí)監(jiān)聽(tīng)某一個(gè)主題對(duì)象,這個(gè)主題對(duì)象的狀態(tài)發(fā)生改變時(shí)就會(huì)通知所有觀察著對(duì)象。它是由兩類(lèi)對(duì)象組成,主題和觀察者,主題負(fù)責(zé)發(fā)布事件,同時(shí)觀察者通過(guò)訂閱這些事件來(lái)觀察該主體,發(fā)布者和訂閱者是完全解耦的,彼此不知道對(duì)方的存在,兩者僅僅共享一個(gè)自定義事件的名稱(chēng)。
在Nodejs中通過(guò)EventEmitter實(shí)現(xiàn)了原生的對(duì)于這一模式的支持。在JavaScript中事件監(jiān)聽(tīng)機(jī)制就可以理解為一種觀察者模式。
下面給出一個(gè)JS自定義的PubSub,仔細(xì)閱讀下面這段代碼有助于你理解觀察者模式。相關(guān)代碼請(qǐng)查看github。
function PubSub() { this.handlers = {}; } PubSub.prototype = { // 訂閱事件 on: function(eventType, handler){ var self = this; if(!(eventType in self.handlers)) { self.handlers[eventType] = []; } self.handlers[eventType].push(handler); return this; }, // 觸發(fā)事件(發(fā)布事件) emit: function(eventType){ var self = this; var handlerArgs = Array.prototype.slice.call(arguments,1); for(var i = 0; i < self.handlers[eventType].length; i++) { self.handlers[eventType][i].apply(self,handlerArgs); } return self; }, // 刪除訂閱事件 off: function(eventType, handler){ var currentEvent = this.handlers[eventType]; var len = 0; if (currentEvent) { len = currentEvent.length; for (var i = len - 1; i >= 0; i--){ if (currentEvent[i] === handler){ currentEvent.splice(i, 1); } } } return this; } }; var pubsub = new PubSub(); var callback = function(data){ console.log(data); }; //訂閱事件A pubsub.on('A', function(data){ console.log(1 + data); }); pubsub.on('A', function(data){ console.log(2 + data); }); pubsub.on('A', callback); //觸發(fā)事件A pubsub.emit('A', '我是參數(shù)'); //刪除事件A的訂閱源callback pubsub.off('A', callback); pubsub.emit('A', '我是第二次調(diào)用的參數(shù)');
運(yùn)行結(jié)果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題:《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JavaScript觀察者模式原理與用法實(shí)例詳解
- 原生javascript實(shí)現(xiàn)類(lèi)似vue的數(shù)據(jù)綁定功能示例【觀察者模式】
- PHP觀察者模式實(shí)例分析【對(duì)比JS觀察者模式】
- JavaScript設(shè)計(jì)模式之觀察者模式實(shí)例詳解
- JavaScript設(shè)計(jì)模式之觀察者模式(發(fā)布訂閱模式)原理與實(shí)現(xiàn)方法示例
- JS設(shè)計(jì)模式之觀察者模式實(shí)現(xiàn)實(shí)時(shí)改變頁(yè)面中金額數(shù)的方法
- JavaScript原生實(shí)現(xiàn)觀察者模式的示例
- JavaScript編程設(shè)計(jì)模式之觀察者模式(Observer Pattern)實(shí)例詳解
- javascript觀察者模式實(shí)現(xiàn)自動(dòng)刷新效果
- 深入理解Javascript中的觀察者模式
- Javascript設(shè)計(jì)模式之觀察者模式(推薦)
- 學(xué)習(xí)JavaScript設(shè)計(jì)模式之觀察者模式
- JavaScript觀察者模式(經(jīng)典)
- 怎樣用JavaScript實(shí)現(xiàn)觀察者模式
相關(guān)文章
js簡(jiǎn)單實(shí)現(xiàn)豎向tab選項(xiàng)卡的方法
這篇文章主要介紹了js簡(jiǎn)單實(shí)現(xiàn)豎向tab選項(xiàng)卡的方法,涉及javascript實(shí)現(xiàn)tab切換效果的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-05-05TypeScript實(shí)現(xiàn)數(shù)組和樹(shù)的相互轉(zhuǎn)換
樹(shù)或者圖是個(gè)比較抽象的概念,并不存在這樣的數(shù)據(jù)類(lèi)型。數(shù)組就比較簡(jiǎn)單了,因此數(shù)組和樹(shù)的轉(zhuǎn)換可以理解為數(shù)組和對(duì)象之間的轉(zhuǎn)換。本文將用TypeScript實(shí)現(xiàn)數(shù)組和樹(shù)的相互轉(zhuǎn)換,感興趣的可以了解一下2022-06-06微信小程序ReferenceError:xxx?is?not?defined報(bào)錯(cuò)解決辦法
最近在學(xué)習(xí)微信小程序的開(kāi)發(fā),在一個(gè)練手項(xiàng)目中竟然報(bào)錯(cuò),所以下面這篇文章主要給大家介紹了關(guān)于微信小程序ReferenceError:xxx?is?not?defined報(bào)錯(cuò)的解決辦法,需要的朋友可以參考下2023-12-12JavaScript性能優(yōu)化 創(chuàng)建文檔碎片(document.createDocumentFragment)
講這個(gè)方法之前,我們應(yīng)該先了解下插入節(jié)點(diǎn)時(shí)瀏覽器會(huì)做什么。2010-07-07JS實(shí)現(xiàn)點(diǎn)擊按鈕自動(dòng)增加一個(gè)單元格的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊按鈕自動(dòng)增加一個(gè)單元格的方法,實(shí)例分析了javascript操作表格單元格的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03微信小程序用戶(hù)授權(quán),以及判斷登錄是否過(guò)期的方法
這篇文章主要介紹了微信小程序用戶(hù)授權(quán)及判斷登錄是否過(guò)期,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ) 2.4
DOM(Document Object Model),即“文檔對(duì)象模型”?;谡Z(yǔ)義的邏輯結(jié)構(gòu),DOM將網(wǎng)頁(yè)內(nèi)的元素與內(nèi)容呈現(xiàn)為一個(gè)清晰、易讀的樹(shù)狀模型,下面小編把最近整理有關(guān)javascript筆記之DOM基礎(chǔ)分享給大家,有需要的朋友可以參考下2015-08-08JavaScript中的object轉(zhuǎn)換函數(shù)toString()與valueOf()介紹
這篇文章主要介紹了JavaScript中的object轉(zhuǎn)換函數(shù)toString()與valueOf()介紹,需要的朋友可以參考下2014-12-12