观察者模式-网站登录

    观察者模式也叫发布-订阅者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。最熟悉的使用观察者模式的地方莫过于是在DOM节点上绑定事件函数。

添加事件并不会影响到发布者代码的编写
document.body.addEventListener('click', function() {
  alert(1);
}, false);

document.body.addEventListener('click', function() {
  alert(2);
}, false);

document.body.addEventListener('click', function() {
  alert(3);
}, false);

document.body.click(); //1, 2, 3

定义一个发布-订阅功能的对象：

let event = {
    clientList: {},
    listen: function(key, fn) {
      if(!this.clientList[key]){
        this.clientList[key] = [];
      }
      this.clientList[key].push(fn);//订阅的消息添加进缓存列表
    },
    trigger: function() {
        let key = Array.prototype.shift.call(arguments), fns =this.clientList[key];
        if(!fns || fns.length == 0) {//如果没有绑定对应的消息
            return false;
        }
        for(let i = 0, fn; fn = fns[i++]; ) {
            fn.apply(this, arguments);
        }
    },
    remove: function(key, fn) {
        let fns = this.clientList[key];
        if(!fns) {//如果key对应的消息没有被人订阅，则直接返回
            return false;
        }
        if(!fns) {//如果没有传入具体的回调函数，表示需要取消key对应消息的所有订阅
            fns && (fns.length = 0);
        } else {
            for(let l =  fns.length - 1; l >= 0; l--) {//反向便利订阅的回调函数列表
                let _fn = fns[l];
                if(_fn === fn) {
                    fns.splice(l, 1);//删除订阅者的回调函数
                }
            }
        }
    }
}

    模拟场景1：订阅某一户型的房子的价格信息

let salesOffices = {};
let installEvent = function(obj) {
    for (let i in event) {
        obj[i] = event[i];
    }
}
installEvent(salesOffices);

//小明说我想要88平米的房子，有房源后通知我
salesOffices.listen('squareMeter88', fn1 = function(price){
    console.log('价格（小明）=' + price);
})

//小红说我也想要88平米的房子，有房源后通知我
salesOffices.listen('squareMeter88', fn2 = function(price) {
    console.log('价格（小红）=' + price);
})

//有88平米的房源了，售价两百万，通知各个订阅的用户
salesOffices.trigger('squareMeter88', 2000000);
//价格（小明）=2000000
//价格（小红）=2000000

//小明说他不需要订阅88平米的房源了
salesOffices.remove('squareMeter88', fn1);

salesOffices.trigger('squareMeter88', 1000000);
//价格（小红）=2000000

    模拟场景2：页面上需要显示用户信息，但是我们不知道除了页面header头部、nav导航、消息列表、购物车之外，将来还有哪些模块需要使用这些用户信息。如果它们和用户信息模块产生了强耦合，比如下面这样的形式：

login.succ为登录成功回调
login.succ(function(data) {
    header.setAtar(data.avtar);//设置header模块的头像
    nav.setAtar(data.avatar);//设置导航模块的头像
    messge.refrest();//刷新消息列表
    cart.refresh();//刷新购物车列表
    ...
})

    后来需要登录成功后刷新地址列表，就需要在这里添加代码。我们会越来越疲于应付这些突如其来的业务要求。用发布=订阅者模式重写之后，对用户信息感兴趣的业务模块将自行订阅登录成功后的消息事件。当登录成功时，登录模块只需要发布登录成功的消息，而业务模块接收到消息后，就会开始进行各自的业务处理，登录模块并不关心业务方究竟要做什么，也不想去了解他们的内部细节。

$ajax('http//xxx.com?login', function(data) {
  login.trigger('loginSucc', data);
});

    各模块监听登录成功的消息：

let header = (function() {
    login.listen('loginSucc', function(data) {
        header.setAvatar(data.avtar);
    });
    return {
        setAvatar: function(data) {
            console.log('设置header模块的头像');
        }
    }
})();

    全局模式：上面简略实现了一下观察者模式,除此之外还可以创建一个全局对象，降低订阅者对发布者的耦合性，即订阅者不需要知道消息来自哪个发布者，发布者也不知道消息会推送给哪个发布者。即对发布-订阅者模式的封装。
    缓存消息：除了可以对发布-订阅者再次封装，还可以设置为不用先订阅再发布，即将发布的内容缓存起来，后面的订阅者也可以接收到此前的消息。此时需要建立一个存放离线事件的堆栈，当事件发布的时候，如果此时还没有订阅者来订阅这个事件，我们暂时把发布事件的动作包裹在一个函数里，这些包装函数将被存入堆栈中，等到终于有对象来订阅此事件的的时候，我们将遍历堆栈并且依次执行这些包装函数，也就是重新发布里面的事件。当然离线事件的生命周期只有一次，就像QQ的未读消息只会被重新阅读一次，所以刚才的操作我们只能进行一次。