设计模式之观察者（发布/订阅）模式

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

DOM 事件

观察者模式应该是最经常使用的模式之一。在不少语言里都获得大量应用。包括咱们平时接触的dom事件，也是js和dom之间实现的一种观察者模式。

document.body.addEventListener('click',function () {
        alert(111);
    },false);
    document.body.addEventListener('click',function () {
        alert(222);
    },false);
    document.body.addEventListener('click',function () {
        alert(333);
    },false);
    document.body.click();//模拟点击事件

这里咱们订阅了document.body 的 click 事件，当 body 被点击的时候，他就向订阅者发布这个消息，顺序弹出111 222 333。咱们也能够随意的增长和删除订阅者。总之，当消息一发布，全部的订阅者都会收到消息。

这里，手动触发事件直接用了document.body.click()；可是更好的作法是IE下用 fireEvent，标准浏览器下用 dispatchEvent。

全局的发布/订阅对象

发布/订阅模式能够用一个全局的 Event 对象来实现,订阅者不须要了解消息来自哪一个发布者，发布者也不知道消息会推送给哪些订阅者，Event 做为一个相似“中介者” 的角色，把订阅者和发布者联系起来。

let Event = (function () {
    let clientList = {};
    let listen;
    let trigger;
    let remove;

    listen = function (name, cb) {
        if( !clientList[name] ) {
            clientList[name] = [];
        }
        clientList[name].push(cb);
    };

    trigger = function () {
        let name = [].shift.call(arguments);
        let fns = clientList[name];
        if( !fns || fns.length == 0 ) return false;
        fns.map((item, index) => {
            item(...arguments); // 不要直接将arguments传入
        })
    };

    remove = function (name, cb) {
        let fns = clientList[name];
        if( !fns ) return false; // name对应的消息么有被人订阅
        if( !cb ) { // 没有传入cb(具体的回调函数), 表示取消 name 对应的全部订阅 
            fns && (fns.length = 0); //  不加括号会报错：ReferenceError: Invalid left-hand side in assignment
        } else {
            clientList[name] = fns.filter((item, index) => {
                return item !== cb; // filter不改变原数组 return不忘记
            })
            /*
            // 反向遍历
            for(let i = fns.length - 1; i >= 0; i--) {
                let _cb = fns[i];
                if(_cb === cb) {
                    fns.splice(i, 1);
                }
            }
            */
        }
    };

    return {
        listen: listen,
        trigger: trigger,
        remove: remove
    }

})();

let foo1 = function( num ){
    console.log('foo triggered');
}
let foo2 = function( num ){
    console.log(num);
}
Event.listen('foo', foo1);
Event.listen('foo', foo2);

Event.trigger('foo', 2);
// foo triggered
// 2

看下下面这段代码的输出，能够看到是没法取消对应的订阅信息的。就像{} === {}结果是 false同样(引用类型的特色：按地址存放)。

Event.remove('foo', function(num){console.log(num)});
Event.trigger('foo', 2); 
// let obj1 = {};
// let obj2 = {};
//obj1 === obj2 // false
//but
//obj1 === obj1 // true

正确写法：

Event.remove('foo', foo2);
Event.trigger('foo', 2);

必须先订阅再发布吗

咱们所了解的发布/订阅模式，都是订阅者必须先订阅一个消息，随后才能接收到发布者发布的消息。若是把顺序反过来，发布者先发布一个消息，而在此以前并无对象来订阅它，那么这条消息就消失在宇宙中了。

创建一个存放离线事件的堆栈，当事件发布的时候，若是此时尚未订阅者来订阅这个事件，咱们暂时把发布事件的动做包裹在一个函数里，这些包装函数将被存入堆栈中，等到终于有对象来订阅此事件的时候，咱们将遍历堆栈而且依次执行这些包装函数，也就是从新发布里面的事件。固然离线事件的生命周期只有一次，就像QQ的未读消息只会被重 新阅读一次，因此刚才的操做咱们只能进行一次。

优缺点

1. 优势：

发布—订阅模式的优势很是明显：

• 时间上的解耦；
• 对象之间的解耦。

它的应用很是普遍,既能够用在异步编程中，也能够帮助咱们完成更松耦合的代码编写。发布/订阅模式还能够用来帮助实现一些别的设计模式，好比中介者模式。

从架构上来看，不管是 MVC 仍是 MVVM,，都少不了发布/订阅模式的参与，并且 JavaScript 自己也是一门基于事件驱动的语言。

1. 缺点：

固然，发布/订阅模式也不是彻底没有缺点。建立订阅者自己要消耗必定的时间和内存，并且当你订阅一个消息后，也许此消息最后都未发生，但这个订阅者会始终存在于内存中。

另外，发布/订阅模式虽然能够弱化对象之间的联系，但若是过分使用的话，对象和对象之间的必要联系也将被深埋在背后，会致使程序难以跟踪维护和理解。特别是有多个发布者和订阅者嵌套到一块儿的时候，要跟踪一个 bug 不是件轻松的事情。