6.设计模式（发布-订阅模式）

1.发布-订阅：又叫观察者模式，它定义对象间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖于她的对象都将得到通知。js中一般用事件模型来替代传统的发布-订阅模式。
1）发布订阅模式可以广泛应用于异步编程中，这是一种替代传递回调函数的方案，比如我们可以订阅ajax请求的error，succ事件
2）发布订阅模式可以取代对象之间硬编码的通知机制，一个对象不用再显示的调用另外一个对象的某个接口。发布订阅模式让两个对象松耦合的联系在一起，虽然不太清楚彼此的细节，但这不影响她们之间相互通信有新的订阅者出现时，发布者的代码不需要任何修改；同样发布者需要改变时，也不会影响到之前的订阅者

代码实现（1.dom事件函数）
document.body.addEventListener( 'click', function(){ 
 alert(2); 
}, false ); 
document.body.click();
我们没办法知道用户将在什么时候点击，所以我们订阅document.body上的click事件，当body被点击的时候，body便会向订阅者发布这个消息
代码实现（2.自定义事件）
//1.指定好谁充当发布者 2.然后给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者 3.最后发布消息的时候，发布者便利这个缓存列表，一次触发里面存放的订阅者回调函数
var sub = {}
sub.listener = [];
sub.listenerFun = function(fn){
  this.listener.push(fn)
}
sub.trigger = function(){
  this.listener.forEach(fn=>{
    fn()
  })
}
sub.listenerFun(()=>{
  console.log("我是小红")
})
sub.listenerFun(()=>{
  console.log("我是小花")
})
//发布消息
sub.trigger()
代码实现（3.引入key，让订阅者只订阅自己感兴趣的信息）
//各模块监听登录成功的信息
var sub = {};
sub.listener = {};
sub.listenerFn = function(key,fn){
  this.listener[key] = []
  this.listener[key].push(fn)
}
sub.trigger = function(key,data){
   this.listener[key].forEach(fn => {
     fn(data)
   });
}
var fn = (function(){
  setTimeout(()=>{
    sub.trigger("login",{name:"hahaha",age:"18"})
  })
})()
var header = (function(){
  sub.listenerFn("login",(data)=>{
    console.log(data)
  })
})()

在js中，我们不需要关心使用推模型还是拉模型，推模型是指在事件发生时，发布这一次性把所有更改的状态和数据都推送给订阅者。拉模型不同的地方是，发布者仅仅通知订阅者事件已经发生了，磁瓦发布者要提供一些公开的接口共订阅者主动拉取数据，拉模型的好处是可以让订阅者"按需获取"，但同时有可能让发布者变成一个“门户大开”的对象，同时增加了代码难度