定義
定義對象間的一種一對多的依賴關係,當一個對象的狀態發生改變時,所有依賴於它的對象都將得到通知。在 JavaScript 中,一般用事件模型來替代傳統的發佈-訂閱模式。
要點
- 發佈-訂閱模式的優點非常明顯,一為時間上的解耦,二為對象之間的解耦。
- 在異步編程中使用發佈-訂閱模式,我們就無需過多關注對象在異步運行期間的內部狀態,而只需要訂閱感興趣的事件發生點。
- DOM 事件
- 發佈-訂閱模式的實現:首先指定好發佈者;給發佈者添加一個緩存列表,用於存放回調函數來通知訂閱者;最後發佈消息的時候,發佈者會遍歷這個緩存列表,依次觸發裡面存放的訂閱者回調函數。
- 發佈-訂閱模式的通用實現:event, installEvent
- 發佈-訂閱模式也可以用一個全局的 Event 對象來實現,訂閱者不需要瞭解消息來自哪個發佈者,發佈者也不知道消息會推送給哪些訂閱者,Event 類似一個「中介者」的角色。
- 發佈-訂閱模式還可以支持先發佈後訂閱和命名空間的功能。
核心代碼
var Event = (function() {
var clientList = {};
var listen;
var trigger;
var remove;
listen = function(key, fn) {
if (!clientList[key]) {
clientList[key] = [];
}
clientList[key].push(fn);
};
trigger = function() {
var key = Array.prototype.shift.call(arguments);
var fns = clientList[key];
if (!fns || fns.length === 0) {
return false;
}
for (var i = 0, fn; fn = fns[i++];) {
fn.apply(this, arguments);
}
};
remove = function(key, fn) {
var fns = clientList[key];
if (!fns) {
return false;
}
if (!fn) {
// 移除全部訂閱
fns && (fns.length = 0);
} else {
for (var l = fns.length - 1; l >= 0; l--) {
var _fn = fns[l];
if (_fn === fn) {
fns.splice(l, 1);
}
}
}
};
return {
listen: listen,
trigger: trigger,
remove: remove
};
})();
Event.listen('ev1', function(param1, param2, ...) {
// callback
});
Event.trigger('ev1', param1, param2, ...);