发布订阅模式

生活中的发布订阅

淘宝卖家属于发布者。顾客小红等一群吃瓜群众是订阅者。群众订阅淘宝卖家的店铺，卖家有新消息就会通知所有人。

发布订阅模式的优点

1. 支持简单的广播通信，当对象状态发生改变时，会自动通知已经订阅过的对象。
   比如上面的列子，小明，小红不需要天天逛淘宝网看鞋子到了没有，在合适的时间点，发布者(卖家)来货了的时候，会通知该订阅者(小红，小明等人)。

2. 发布者与订阅者耦合性降低，发布者只管发布一条消息出去，它不关心这条消息如何被订阅者使用，同时，订阅者只监听发布者的事件名，只要发布者的事件名不变，它不管发布者如何改变；同理卖家（发布者）它只需要将鞋子来货的这件事告诉订阅者(买家)，他不管买家到底买还是不买，还是买其他卖家的。只要鞋子到货了就通知订阅者即可。

简易版发布订阅代码

const shoeObj = {};// 定义发布者
shoeObj.list = {};// 缓存列表 存放订阅者回调函数
// 增加订阅者
shoeObj.listen = function listen(key, fn) {
  if (Array.isArray(shoeObj.list[key])) {
    shoeObj.list[key].push(fn);
  } else {
    shoeObj.list[key] = [fn];
  }
};
// 发布消息
shoeObj.trigger = function trigger() {
  const key = Array.prototype.shift.call(arguments); // 取出消息类型名称
  const fns = this.list[key];  // 取出该消息对应的回调函数的集合
// 如果没有订阅过该消息的话，则返回
    if(!fns || fns.length === 0) {
        return;
    }
    for(var i = 0,fn; fn = fns[i++]; ) {
        fn.apply(this,arguments); // arguments 是发布消息时附送的参数
    }
};
// 小红订阅如下消息
shoeObj.listen('red',function(size){
    console.log("尺码是："+size);  
});

// 小花订阅如下消息
shoeObj.listen('block',function(size){
    console.log("再次打印尺码是："+size); 
});
shoeObj.trigger("red",40);
shoeObj.trigger("block",42);

代码封装

我们知道，对于上面的代码，小红去买鞋这么一个对象shoeObj 进行订阅，但是如果以后我们需要对买房子或者其他的对象进行订阅呢，我们需要复制上面的代码，再重新改下里面的对象代码；为此我们需要进行代码封装；

const event = {
  list: {},
  listen:  function listen(key, fn) {
    if (Array.isArray(this.list[key])) {
      this.list[key].push(fn);
    } else {
      this.list[key] = [fn];
    }
  };
  trigger: function trigger() {
    const key = Array.prototype.shift.call(arguments); // 取出消息类型名称
    const fns = this.list[key];  // 取出该消息对应的回调函数的集合
  // 如果没有订阅过该消息的话，则返回
    if(!fns || fns.length === 0) {
        return;
    }
    for(var i = 0,fn; fn = fns[i++]; ) {
        fn.apply(this,arguments); // arguments 是发布消息时附送的参数
    }
  };
  
};

我们在定义一个initEvent函数，这个函数使所有的普通对象都具有发布订阅功能，如下代码：

var initEvent = function(obj) {
    for(var i in event) {
        obj[i] = event[i];
    }
};

取消订阅

event.cancel = function(key, fn){
 //     如果存在该类型的消息
      if(event.list[key] instanceof Array){
          var i = event.list[type].length -1;
  // 遍历通知方法
          for(; i >= 0 ; i--){
  //     如果有通知该订阅者的方法，则移除
  //     &&的短路机制
 //     splice的三种功能(删除、替换、插入)之一
           event.list[type][i] === fn && event.list[type].splice(i,1);
           }
     }
}

Javascript中理解发布--订阅模式

观察者模式跟发布订阅模式1
观察者模式跟发布订阅模式2
这篇文章我说的 其实是观察者模式。
在观察者模式中，观察者需要直接订阅目标事件；在目标发出内容改变的事件后，直接接收事件并作出响应
在发布订阅模式中，发布者和订阅者之间多了一个发布通道；一方面从发布者接收事件，另一方面向订阅者发布事件；订阅者需要从事件通道订阅事件