宣布-定阅形式

• 定义对象间的一种 一对多 的依靠关联, 当一个对象的状况发作转变时, 一切依靠于它的对象都将获得关照
• 简朴完成

    // 定义宣布者
    var salesOffices = {};

    // 缓存列表, 寄存定阅者的回调函数
    salesOffices.clientList = [];
    
    // 定义定阅者
    salesOffices.listen = function (fn) {
        this.clientList.push(fn);
    }

    // 宣布音讯
    salesOffices.trigger = function () {
        for (var i = 0, fn; fn = this.clientList[i++];) {
            fn.apply(this, arguments)
        }
    }
    
    /*** 测试 ***/
    
    // 定阅者1
    salesOffices.listen(function (price, squareMeter) {
        console.log('价钱=' + price);
        console.log('squareMeter= ' + squareMeter);
    });

    // 定阅者2
    salesOffices.listen(function (price, squareMeter) {
        console.log('价钱=' + price);
        console.log('squareMeter= ' + squareMeter);
    });

    // 宣布音讯
    salesOffices.trigger(2000, 80);
    salesOffices.trigger(3000, 100);

• 上面的完成体式格局, 致使了, 每一个定阅者都邑收到宣布者宣布的音讯

    // 定义宣布者
    var salesOffices = {};

    // 缓存列表, 寄存定阅者的回调函数
    salesOffices.clientList = {};

    // 定义定阅者 (增添缓存, 增添标示 key )
    salesOffices.listen = function (key, fn) {
        if (!this.clientList[key]) {
            this.clientList[key] = [];
        }
        this.clientList[key].push(fn);
    }

    // 宣布音讯
    salesOffices.trigger = function () {

        var key = Array.prototype.shift.call(arguments),
            fns = this.clientList[key];

        if (!fns || fns.length === 0) {
            return false;
        }

        for (var i = 0, fn; fn = fns[i++];) {
            fn.apply(this, arguments)
        }
    }

提炼宣布-定阅形式

    // 中心事宜
    var event = {
        clientList: {},
        listen: function (key, fn) {
            if (!this.clientList[key]) {
                this.clientList[key] = [];
            }
            this.clientList[key].push(fn);
        },
        trigger: function () {
            var key = Array.prototype.shift.call(arguments),
                fns = this.clientList[key];

            if (!fns || fns.length === 0) {
                return false
            }

            for (var i = 0, fn; fn = fns[i++];) {
                fn.apply(this, arguments);
            }
        }
    }
    
    // 作废定阅音讯
    event.remove = function (key, fn) {
        var fns = this.clientList[key];

        if (!fns) {
            return false;
        }

        if (!fn) {
            // 没有传入fn 作废key对应的一切的定阅
            fns && (fns.length = 0);
        } else {
            // 传入fn 删除对应的fn
            for (var l = fns.length - 1; l >= 0; l--) {
                var _fn = fns[l];
                if (_fn === fn) {
                    fns.splice(l, 1)
                }
            }
        }
    }
    
    // 给任何对象动态增添宣布-定阅功用
    var installEvent = function (obj) {
        for (var key in event) {
            if (event.hasOwnProperty(key)) {
                obj[key] = event[key];
            }
        }
    }
    
    /*** 测试 ***/
    var salesOffices = {};

    installEvent(salesOffices);

    // 定阅者1
    salesOffices.listen('squareMeter80', function (price) {
        console.log('价钱=' + price);
    });

    // 定阅者2
    salesOffices.listen('squareMeter100', function (price) {
        console.log('价钱=' + price);
    });

    // 宣布音讯
    salesOffices.trigger('squareMeter80', 20000);
    salesOffices.trigger('squareMeter100', 30000);

• 登录案例

    // 登录胜利, 宣布胜利音讯
    $.ajax('http://xxx.com/login', function (data) {
        login.trigger('loginSuccess', data);
    });

    // 这类写法也很好
    var header = (function () {
        // 定阅音讯
        login.listen('loginSuccess', function (data) {
            header.setAvatar(data);
        })
        return {
            setAvatar: function (data) {
                console.log('header 模块拿到用户信息')
            }
        }
    })();

• 以上写法会有三个题目

  • 须要一个相似’中介者’的角色, 把宣布者和定阅者联络起来(经由过程 全局的 Event 来处理)
  • 以上必须先定阅, 才宣布
  • 全局定名的争执

完成相似 Event 的宣布-定阅形式

• 长处1: 时候上的解耦,
• 长处2: 对象之间的解耦
• 瑕玷1: 建立定阅者本生要斲丧内存和时候
• 瑕玷2: 弱化了对象之间的联络以后, 对象之间的必要联络也被湮没

    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 = {},
                _create,
                find,
                each = function(arr, fn) {
                    var ret;
                    for (var i = 0, l = arr.length; i < l; i++) {
                        var n = arr[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[eky]) {
                    if (fn) {
                        for (var i = cache[key].length - 1; i >= 0; i--) {
                            if (cache[key][i] === fn) {
                                cache[key].splice(i, 1);
                            }
                        }
                    } else {
                        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) {
                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, fn, 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.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;
    })();

视察者(observer) 形式 和 宣布/定阅形式 之间的区分

• 本质上的区分实时在调理的处所差别
• 分清晰谁是宣布者, 谁是视察者, 谁是定阅者
• 视察者形式

    // subject(宣布) 中的目的发作变化. Observer(视察) 能接遭到变化
    function ObserverList() {
        this.observerList = [];
    }

    ObserverList.prototype.add = function (obj) {
        return this.observerList.push(obj);
    }
    
    ObserverList.prototype.get = function (index) {
        if (index > -1 && this.observerList.length) {
            return this.observerList[index];
        }
    }

    ObserverList.prototype.indexOf = function (obj, startIndex) {
        var i = startIndex;

        while(i < this.observerList.length) {
            if (this.observerList[i] === obj) {
                return i;
            }
            i++;
        }

        return -1;
    }
    
    ObserverList.prototype.removeAt = function (index) {
        this.observerList.splice(index, 1);
    }
    
    // 宣布者
    function Subject() {
        this.observers = new ObserverList();
    }

    Subject.prototype.addObserver = function (observer) {
        this.observers.add(observer);
    }

    Subject.prototype.removeObserver = function (observer) {
        this.observers.removeAt(this.observers.indexOf(observer, 0));
    }

    Subject.prototype.notify = function (context) {
        var observerCount = this.observers.count();
        for (var i = 0; i < observerCount; i++) {
            this.observers.get(i).update(context);
        }
    }

    // 视察者
    function Observer() {
        this.update = function () {
            // ...
        }
    }

• 宣布(Publish)/定阅(Subscribe)形式

    var pubsub = {};
    (function (myObject) {
        var topics = {};

        var subUid = -1;

        // 宣布
        myObject.publish = function (topic, args) {
            if (!topics[topic]) {
                return false;
            }

            var subscribers = topics[topic],
                len = subscribers ? subscribers.length : 0;

            while (len--) {
                subscribers[len].func(topic, args);
            }

            return this;
        }

        // 定阅者
        myObject.subscribe = function (topic, func) {
            if (!topics[topic]) {
                topics[topic] = [];
            }

            var token = (++subUid).toString();

            topics[topic].push({
                token: token,
                func: func
            })
        }

        // 作废定阅
        myObject.unsubscribe = function (token) {
            for (var m in topics) {
                if (topics[m]) {
                    for (var i = 0, j = topics[m].length; i < j; i++) {
                        if (topics[m][i].token === token) {
                            topics[m].splice(i, 1);
                            return token;
                        }
                    }
                }
            }
            return this;
        }
    })(pubsub)