PubSub模式
從原生的js角度,我們要監聽某事件的方法就是利用addEventListener方法,但是當我們的頁面趨於複雜,比如要向某個元素添加多個處理事件,那麼就要用一個封裝函數彙集多個處理函數
link.onclick = function() {
clickHandler1.apply(this, arguments);
clickHandler2.apply(this, arguments);
};
在jquery中,jquery.on()方法使用的比較多,在新版的jquery中,也捨棄了bind()方法,統一使用on,jQuery 將link 元素的事件發佈給了任何想訂閱此事件的人。
Node.js中的EventEmitter 對象
要想給EventEmitter 對象添加一個事件處理器,只要以事件類型和事件處理器爲參數調用on 方法即可。
emitter.on('evacuate', function(message) {
console.log(message);
});
emit(意爲“觸發”)方法負責調用給定事件類型的所有處理器。舉個例子,下面這行代碼:
emitter.emit('evacuate');
將調用evacuate 事件的所有處理器。
請注意,這裏的術語事件跟事件隊列沒有任何關係。
使用emit 方法觸發事件時,可以添加任意多的附加參數。所有參數均傳遞至所有處理器。
emitter.emit('evacuate', 'Woman and children first!');
實現一個PubSub模式
一個PubSub模型主要方法有3個,訂閱,退訂,發佈
var PubSub = {};
// 用於儲存事件隊列
var queue = {};
// 訂閱接口
PubSub.on = function(event, cb) {
if (!queue[event]) {
queue[event] = [];
}
queue[event].push(cb);
};
// 退訂接口
PubSub.off = function(event, cb) {
var currentEvent = queue[event];
var len = 0;
if (currentEvent) {
len = currentEvent.length;
for (var i = len - 1; i >= 0; i--) {
if (currentEvent[i] === cb) {
currentEvent.splice(i, 1);
}
}
}
};
// 發佈接口
PubSub.emit = function(event) {
var currentEvent = queue[event];
if (currentEvent) {
for (var i = 0; i < currentEvent.length; i++) {
currentEvent[i]();
}
}
};
//使用
// 訂閱
var callbackA = function () {
console.log('event a happened')
};
PubSub.on('a', callbackA);
PubSub.on('b', function() {
console.log('event b happened')
});
// 退訂 , 第二個參賽傳入回調函數的引用
PubSub.off('a', callbackA);
// 發佈
PubSub.emit('a');
PubSub.emit('b');