發佈-訂閱模式

定義

定義對象間的一種一對多的依賴關係，當一個對象的狀態發生改變時，所有依賴於它的對象都將得到通知。在 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, ...);