JavaScript设计模式 - 订阅发布模式(观察者模式)

Posted 2020-10-01 Sorrow.X

var Event = (function() {
            var global = this,    
                Event,
                _default = ‘default‘;

            Event = function() {
                var _create,
                    _listen,
                    _trigger,
                    _remove,
                    _shift = Array.prototype.shift,
                    _unshift = Array.prototype.unshift,
                    namespaceCache = {},
                    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);
                };

                _trigger = function() {
                    var cache = _shift.call(arguments),
                        key = _shift.call(arguments),
                        args = arguments,
                        _self = this,
                        stack = cache[key];

                    if (!stack || !stack.length) return;

                    return each(stack, function() {
                        return this.apply(_self, args);
                    });
                };

                _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 {
                            cache[key] = [];
                        };
                    };
                };

                _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;
                            },

                            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();
                            }, 

                            remove: function(key, fn) {
                                _remove(key, cache, fn);
                            },

                            one: function(key, fn, last) {
                                _remove(key, cache);
                                this.listen(key, fn, last);
                            }

                        };
                    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.remove(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(‘evt1‘, 1, 2);
        event.trigger(‘evt1‘, 3, 4);    // 都存到offlineStack中去了

        event.listen(‘evt1‘, e1);    // 当有listen监听时,遍历offlineStack中的方法,发给第一次的listen
        event.listen(‘evt1‘, e2);*/

        /*// 先订阅后发布
        event.listen(‘evt1‘, e1);   
        event.listen(‘evt1‘, e2);    // 先订阅的事件都存到cache对象中去了

        event.trigger(‘evt1‘, 1, 2);    // 每次发布,都会遍历cache对象中对象事件名的数组
        event.trigger(‘evt1‘, 3, 4);   */

        /*// 先发布后订阅 listen方法第三个参数可以是last,只有只会去多个trigger中的最后一个
        event.trigger(‘evt1‘, 1, 2);    // 1).
        event.trigger(‘evt1‘, 3, 4);    // 2). 都存到offlineStack中去了

        event.listen(‘evt1‘, e1, ‘last‘);    // 只会收到2).这个trigger*/

        /*// 先订阅后发布再删除然后再发布,会发现evt1事件对象的cache[key]数组中少了e1函数,所以
        // 再次发布只有e2执行了
        event.listen(‘evt1‘, e1);   
        event.listen(‘evt1‘, e2);   

        event.trigger(‘evt1‘, 1, 2);   
        event.remove(‘evt1‘, e1);
        event.trigger(‘evt1‘, 3, 4);*/

        // 订阅的再多,也只使用一个订阅
        /*// 1). 先订阅后发布
        event.one(‘evt1‘, e1);
        event.one(‘evt1‘, e2);    // 会使用这个,因为前一个被删了

        event.trigger(‘evt1‘, 11, 22);    // 所以会执行两次e2函数
        event.trigger(‘evt1‘, 33, 44);*/

        // 2). 先发布后订阅
        /*event.trigger(‘evt1‘, 11, 22);    // 所以会执行两次e2函数
        event.trigger(‘evt1‘, 33, 44);

        event.one(‘evt1‘, e1);    // 会使用这个,因为offlineStack被置为null了
        event.one(‘evt1‘, e2);    // 这个不执行了,需要等到下次trigger才会触发,因为e1从cache中删掉了,加入了e2, 如果后面还有one方法以此类推,会删除上一个监听的函数,添加新的监听函数*/

        // 3). 先发布后订阅 one方法的第三个参数last会只接收最后一个trigger
        event.trigger(‘evt1‘, 11, 22);   
        event.trigger(‘evt1‘, 33, 44);

        event.one(‘evt1‘, e2, ‘last‘);
        event.one(‘evt1‘, e1, ‘last‘);