javascript设计模式学习笔记之发布-订阅模式

发布-订阅模式

• 定义对象间的一种 一对多 的依赖关系, 当一个对象的状态发生改变时, 所有依赖于它的对象都将得到通知
• 简单实现

    // 定义发布者
    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)