溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
