本文實例講述了Javascript觀察者模式(publish/subscribe)原理與實現方法。分享給大家供大家參考,具體如下:
觀察者模式又叫做發布訂閱模式,它定義了一種一對多的關系,讓多個觀察者對象同時監聽某一個主題對象,這個主題對象的狀態發生改變時就會通知所有觀察著對象。它是由兩類對象組成,主題和觀察者,主題負責發布事件,同時觀察者通過訂閱這些事件來觀察該主體,發布者和訂閱者是完全解耦的,彼此不知道對方的存在,兩者僅僅共享一個自定義事件的名稱。
在Nodejs中通過EventEmitter實現了原生的對於這一模式的支持。在Javascript中事件監聽機制就可以理解為一種觀察者模式。
下面給出一個JS自定義的PubSub,仔細閱讀下面這段代碼有助於你理解觀察者模式。相關代碼請查看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; }, // 觸發事件(發布事件) 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); //觸發事件A pubsub.emit('A', '我是參數'); //刪除事件A的訂閱源callback pubsub.off('A', callback); pubsub.emit('A', '我是第二次調用的參數');
運行結果。
更多關於Javascript相關內容可查看本站專題:《javascript面向對象入門教程》、《Javascript中json操作技巧總結》、《Javascript切換特效與技巧總結》、《Javascript查找算法技巧總結》、《Javascript動畫特效與技巧匯總》、《Javascript錯誤與調試技巧總結》、《Javascript數據結構與算法技巧總結》、《Javascript遍歷算法與技巧總結》及《Javascript數學運算用法總結》
希望本文所述對大家Javascript程序設計有所幫助。