JavaScript设计模式之发布-订阅模式（观察者模式）-Part2

时间 2019-11-07

标签 javascript 设计模式发布订阅观察者 part2 栏目 JavaScript 繁體版

原文原文链接

《JavaScript设计模式与开发实践》读书笔记。ajax

看此文章前，建议先看JavaScript设计模式之发布-订阅模式（观察者模式）-Part1算法

在Part1中，已经介绍了什么是发布-订阅模式，同时，也实现了发布-订阅模式。可是，就Part1中实现的例子来讲，仍是存在了两个小问题：segmentfault

咱们给每一个发布者对象都添加了listen和trigger方法，以及一个缓存列表clientList，这实际上是一种资源的浪费。设计模式
订阅者与发布者之间存在必定的耦合性，订阅者至少要知道发布者对象的名字，才能顺利订阅。以下：缓存

// 张三订阅问题A, sgQuestionSystem是发布者的对象（问题系统）
sgQuestionSystem.listen('questionA', 3, function(questionTitle, content) {
    console.log('张三您在早前订阅了问题：questionA');
    console.log('现' + questionTitle + '有了新动态');
    console.log('内容为：' + content);
});

若是张三还对其它东西感兴趣，而发布者又不是同一个，那么，这意味着张三须要再对另外一个发布者对象进行订阅。以下：数据结构

// 张三订阅文章A动态, sgArticleSystem是发布者的对象（文章系统）
sgArticleSystem.listen('articleA', 3, function(articleTitle, content) { 
    console.log('张三您在早前订阅了文章：articleA');
    console.log('现' + articleTitle+ '有了新动态');
    console.log('内容为：' + content);
});

全局的发布-订阅对象app

相信你们都知道什么是中介公司吧，在现实生活中，咱们只要把订阅的请求交给中介公司，而各大发布者也只须要经过中介公司来发布信息。这样一来，咱们就无需关心消息是哪一个发布者发布的，咱们只需关心是否能顺利收到消息。固然，订阅者与发布者都须要知道这个中介公司。异步

一样，在程序中，咱们能够用一个全局的 Event 对象来实现中介公司的做用。Event做为一个消息中心，把订阅者和发布者联系起来。见以下代码：数据结构和算法

var Event = (function(){
    var clientList = {}, // 缓存列表
        listen,
        trigger,
        remove;
    
    listen = function(key, id, fn){
        if(!clientList[key]){
            clientList[key] = [];    // 初始化
        }
        clientList[key].push({      // 将订阅的id, 回调函数添加到对应的消息列表里
            id: id,                         
            fn: fn                          
        });
    };
    
    trigger = function() {
        var key = Array.prototype.shift.call(arguments),
            fns = clientList[key];
        if(!fns || fns.length == 0) {
            return false;
        }
        for(var i = 0; i < fns.length; i++) {
            fns[i].fn.apply(this, arguments);
        }
    };
    
    remove = function(key, id) {
        var fns = clientList[key];
        
        if(!fns) {                // 若是key对应的消息没人订阅，直接返回
            return false;
        }
        
        if(!id) {           // 若是没传具体的惟一标识，则取消key的全部对应消息
            fns && (fns.length = 0);
        } else {
            for(var l = fns.length - 1; l >=0; l--) {
                var _id = fns[l].id;
                if(_id == id) {
                    fns.splice(l, 1);    // 删除订阅者的回调函数
                }
            }
        }
    };
    
    return {
        listen: listen,
        trigger: trigger,
        remove: remove
    }
})();

Event.listen('questA', 1, function(content) {
    console.log('内容为：' + content);
});

Event.trigger('questA', '王五回答了该问题');

必须先订阅再发布吗？函数

咱们所了解的发布-订阅模式，都是订阅者必须先订阅一个消息，随后才能接收到发布者发布的消息。若是把顺序反过来，发布者先发布一个消息，而在此以前并无对象来订阅它，那么这条消息就消失在宇宙中了。

而在实际项目在，先发布后订阅是存在的。例如在商城网站中，获取到用户信息以后才能渲染用户导航模块，而获取用户信息的操做是一个异步请求。当请求成功返回以后才能发布一个事件，在此以前订阅了此事件的用户导航模块才能接收到这个信息。

然而，由于异步的缘由，咱们不能保证ajax请求的事件，可能用户的导航模块还没加载好（即还没订阅消息），请求就返回（即发布消息）。所以，咱们须要让咱们的发布-订阅对象拥有先发布-后订阅的能力。

具体的实现请看后续最终代码。

全局事件的命名冲突

全局的发布-订阅对象里只有一个clientList来存放消息名和回调函数，你们都经过它来订阅-发布各类消息，长此以往，不免会出现事件名冲突，因此咱们还能够给Event对象提供建立命名空间的功能。

最终代码以下：

var Event = (function(){
    var global = this,
        Event,
        _default = 'default';
   
    Event = function(){
        var _listen,
            _trigger,
            _remove,
            _slice = Array.prototype.slice,
            _shift = Array.prototype.shift,
            _unshift = Array.prototype.unshift,
            namespaceCache = {},
            _creat,
            find,
            each = function(ary, fn){
                var ret;
                for(var i = 0, l = ary.length; i < l; i++) {
                    var n = ary[i];
                    ret = fn.call(n, i, n);
                }
                return ret;
            };
            
            _listen = function(key, fn, cache) {
                if(!cache[key]) {
                    cache[key] = [];
                }
                cache[key].push(fn);
            };
            
            _remove = function(key, cache, fn) {
                if(cache[key]) {
                    if(fn) {
                        for(var i = cache[key].length; i >=0; i--) {
                            if(cache[key][i] == fn) {
                                cache[key].splice(i, 1);
                            }
                        }
                    }  else {    // 若没有fn,表示所有清空
                        cache[key] = [];
                    }    
                }
            };
            
            _trigger = function() {
                var cache = _shift.call(arguments),
                      key = _shift.call(arguments),
                      args = arguments,
                      _self= this,
                      ret,
                      stack = cache[key];
                 
                 if(!stack || !stack.length) {
                     return;
                 }
                 
                 return each(stack, function(){
                     return this.apply(_self, args);
                 })
            };
            
            _create = function(namespace) {
                var namespace = namespace || _default;
                var cache = {},
                    offlineStack = [],
                    ret = {
                        listen: function(key, fn, last) {
                            _listen(key, fn, cache);
                            if(offlineStack == null) {
                                return;
                            }
                            if(last == 'last') {
                                offlineStack.length &&　offlineStack.pop()();
                            } else {
                                each(offlineStack, function() {
                                    this();
                                });
                            }
                            offlineStack = null;
                        },
                        one: function(key, fn, last) {
                            _remove(key, cache);
                            this.listen(key, fn, last);
                        },
                        remove: function(key, fn) {
                            _remove(key, cache, fn);
                        },
                        trigger: function() {
                            var fn,
                                args,
                                _self = this;
                            
                             _unshift.call(arguments, cache);
                             args = arguments;
                             fn = function() {
                                 return _trigger.apply(_self, args);
                             };
                             if(offlineStack) {
                                 return offlineStack.push(fn);
                             }
                             return fn();
                        }
                    };
                    
                    return namespace? (namespaceCache[namespace] ? namespaceCache[namespace]: namespaceCache[namespace] = ret) : ret;
            };
            return {
                create: _create,
                one: function(key, fn, last) {
                    var event = this.create();
                    event.one(key, fn, last);
                },
                remove: function(key, fn){
                    var event = this.create();
                    event.one(key, fn);
                },
                listen: function(key, fn, last){
                    var event = this.create();
                    event.listen(key, fn, last);
                },
                trigger: function(){
                    var event = this.create();
                    event.trigger.apply(this, arguments);
                }
            };
            
    }();
    return Event;
})();

/********** 先发布后订阅 ***********/
Event.trigger('click', 1);
Event.listen('click', function(a){
    console.log(a)
});

/********** 使用命名空间 ***********/
Event.create('namespace1').listen('click', function(a){ 
    console.log(a);
});
Event.create('namespace1').trigger('click', 1);

附：
JavaScript数据结构和算法系列：
JS 栈
 JS 队列-优先队列、循环队列

JavaScript设计模式系列：
JavaScript设计模式之策略模式