美文网首页
發佈-訂閱模式

發佈-訂閱模式

作者: JohnSmith | 来源:发表于2015-06-11 11:08 被阅读27次

    定義

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

    相关文章

      网友评论

          本文标题:發佈-訂閱模式

          本文链接:https://www.haomeiwen.com/subject/ofejqttx.html