JavaScript设计模式 发布-订阅模式

一.生活场景

小明、小红、小强最近看上了一个楼盘，到了售楼处之后才被告知，该楼盘的房子早已售罄。售楼MM 告诉他们，不久后有尾盘推出。小明、小红、小强离开之前，把电话号码留在了售楼处。售楼 MM 答应他们，新楼盘一推出就马上发信息通知。他们的电话号码都被记在售楼处的花名册上，新楼盘推出的时候，售楼 MM 会翻开花名册，遍历上面的电话号码，依次发送一条短信来通知他们。

二.定义

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

• 发布—订阅模式可以广泛应用于异步编程中，这是一种替代传递回调函数的方案。
• 发布—订阅模式可以取代对象之间硬编码的通知机制，一个对象不用再显式地调用另外一个对象的某个接口。

三.开发实践

1.网站登录
假设网站有 header 头部、nav 导航、消息列表、购物车等模块。这几个模块的渲染加载必须先用 ajax 异步请求获取用户的登录信息。
1）一般实现伪代码：

$.ajax({
    url: 'http:// xxx.com/login',
    type: 'post',
    contentType: 'application/json',
    dataType:'json',
    success: function(data) {
        if(data.status === "200") { // 登录成功
            header.setAvatar(data.avatar); //加载header模块
            nav.setAvatar(data.avatar);//加载nav模块
        }
    }
});

2）观察者模式伪代码：

$.ajax({
    ...,
    success: function(data) {
        if(data.status === "200") { // 登录成功
            login.trigger('loginSucc', data); // 发布登录成功的消息
        }
    }
});
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 模块的头像');
        }
    }
})();

var login = {
    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 时带上的参数
        }
    }
}; 

四.总结

在 JavaScript 中，我们用注册回调函数的形式来代替传统的发布—订阅模式，显得更加优雅和简单。虽然在开发中先订阅在发布的模式使用更多，但是先发布再订阅的模式也是可以实现的，我们可以将发布内容缓存起来，在订阅时传给订阅对象。

发布—订阅模式的优点：
1）时间上的解耦。我们就无需过多关注对象在异步运行期间的内部状态，而只需要订阅感兴趣的事件发生点。
2）对象之间的解耦。让两个对象松耦合地联系在一起，虽然不太清楚彼此的细节，但这不影响它们之间相互通信。只要之前约定的事件名没有变化，两个对象内部改变互不影响。
但是过度使用观察者模式，对象和对象之间的必要联系也将被深埋在背后，会导致程序难以跟踪维护和理解。