跳至主要內容

观察者模式

oorzc2022年9月29日大约 6 分钟

观察者模式

发布—订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在 JavaScript 开发中，我们一般用事件模型来替代传统的发布—订阅模式。

推送售楼信息

// 发布—订阅的功能提取出来，放在一个单独的对象内：
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),
            // (1); 
            fns = this.clientList[key];
        if (!fns || fns.length === 0) {
            // 如果没有绑定对应的消息
            return false;
        }
        for (var i = 0, fn; fn = fns[i++];) {
            fn.apply(this, arguments);
            // (2) // arguments 是 trigger 时带上的参数
        }
    },
    remove: function (key, fn) {
        var fns = this.clientList[key];
        if (!fns) { // 如果 key 对应的消息没有被人订阅，则直接返回
            return false;
        }
        if (!fn) { // 如果没有传入具体的回调函数，表示需要取消 key 对应消息的所有订阅
            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);
                }
            }
        }
    }
};


// 再定义一个 installEvent 函数，这个函数可以给所有的对象都动态安装发布—订阅功能：
var installEvent = function (obj) {
    for (var i in event) {
        obj[i] = event[i];
    }
};
// 我们给售楼处对象 salesOffices 动态增加发布—订阅功能：
var salesOffices = {};
installEvent(salesOffices);

// 小明订阅消息
salesOffices.listen('squareMeter88', fn1 = function (price) {
    console.log('价格= ' + price);
});

// 小红订阅消息
salesOffices.listen('squareMeter88', fn2 = function (price) {
    console.log('价格= ' + price);
});

salesOffices.remove('squareMeter88', fn1);
// 删除小明的订阅
salesOffices.trigger('squareMeter88', 2000000);
// 输出：2000000

网站登录

//动态增加发布—订阅功能：
var login = {};
installEvent(login);

// 各模块监听登录成功的消息：
var header = (function () {
    // header 模块
    login.listen('loginSucc', function (data) {
        header.setAvatar(data.avatar);
    });
    return {
        setAvatar: function (data) {
            console.log('设置 header 模块的头像');
        }
    }
})();

var nav = (function () {
    // nav 模块
    login.listen('loginSucc', function (data) {
        nav.setAvatar(data.avatar);
    });
    return {
        setAvatar: function (avatar) {
            console.log('设置 nav 模块的头像');
        }
    }
})();

// 登录成功
$.ajax('http:// xxx.com?login', function (data) {
    let data = {
        avatar: "1111"
    }
    // 发布登录成功的消息
    login.trigger('loginSucc', data);
});


// 我们随时可以把 setAvatar 的方法名改成 setTouxiang。如果有一天在登录完成之后，又增加一个刷新收货地址列表的行为，那么只要在收货地址模块里加上监听消息的方法即可，而这可以让开发该模块的同事自己完成，你作为登录模块的开发者，永远不用再关心这些行为了。
// 代码如下：
var address = (function () {
    // nav 模块
    login.listen('loginSucc', function (obj) {
        address.refresh(obj);
    });
    return {
        refresh: function (avatar) {
            console.log('刷新收货地址列表');
        }
    }
})();

全局的发布－订阅对象

上面的发布订阅还存在两个问题：

  1. 我们给每个发布者对象都添加了 listen 和 trigger 方法，以及一个缓存列表 clientList，这其实是一种资源浪费。

  2. 小明跟售楼处对象还是存在一定的耦合性，小明至少要知道售楼处对象的名字是
    salesOffices，才能顺利的订阅到事件。见如下代码：

salesOffices.listen('squareMeter100', function (price) {
    // 小明订阅消息
    console.log('价格= ' + price);
});
// 如果小明还关心 300 平方米的房子，而这套房子的卖家是 salesOffices2，这意味着小明要开始订阅 salesOffices2 对象。见如下代码：
salesOffices2.listen('squareMeter300', function (price) {
    // 小明订阅消息
    console.log('价格= ' + price);
});

优化

在程序中，发布—订阅模式可以用一个全局的 Event 对象来实现，订阅者不需要了解消息来自哪个发布者，发布者也不知道消息会推送给哪些订阅者，Event 作为一个类似“中介者”的角色，把订阅者和发布者联系起来。

var Event = (function () {
    var clientList = {},
        listen,
        trigger,
        remove;
    listen = function (key, fn) {
        if (!clientList[key]) {
            clientList[key] = [];
        }
        clientList[key].push(fn);
    };
    trigger = function () {
        var key = Array.prototype.shift.call(arguments),
            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('squareMeter88', function (price) {
    // 小红订阅消息
    console.log('价格= ' + price);
    // 输出：'价格=2000000' 
});

// 售楼处发布消息
Event.trigger('squareMeter88', 2000000);

全局的发布—订阅对象里只有一个 clinetList 来存放消息名和回调函数，大家都通过它来订
阅和发布各种消息，久而久之，难免会出现事件名冲突的情况，所以我们还可以给 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 = {},
            _create,
            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 {
                    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.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('click', 1);
Event.listen('click', function (a) {
    console.log(a);
    // 输出：1 
});

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

小结

发布—订阅模式的优点非常明显，一为时间上的解耦，二为对象之间的解耦。它的应用非常广泛，既可以用在异步编程中，也可以帮助我们完成更松耦合的代码编写。发布—订阅模式还可以用来帮助实现一些别的设计模式，比如中介者模式。从架构上来看，无论是 MVC 还是 MVVM，都少不了发布—订阅模式的参与，而且 JavaScript 本身也是一门基于事件驱动的语言。

当然，发布—订阅模式也不是完全没有缺点。创建订阅者本身要消耗一定的时间和内存，而且当你订阅一个消息后，也许此消息最后都未发生，但这个订阅者会始终存在于内存中。另外，发布—订阅模式虽然可以弱化对象之间的联系，但如果过度使用的话，对象和对象之间的必要联系也将被深埋在背后，会导致程序难以跟踪维护和理解。特别是有多个发布者和订阅者嵌套到一起的时候，要跟踪一个 bug 不是件轻松的事情。

贡献者: oorzc