发布订阅模式（publish-subscribe patterns），又称为观察者模式。

浏览器的事件池机制，也是通过这个模式来完成的。

  • 订阅就是添加事件处理程序

  • 发布就是事件触发，有个观察者来监听事件是否触发，以及触发后如何执行事件处理程序

  • 取消订阅就是移除事件处理程序

思想：

  • 准备一个容器，把到达某个条件要处理的事情，事先一一添加到容器中

  • 当到达指定时间点，通知容器中的方法依次执行即可

1. 简单的发布订阅

分为订阅、发布、取消订阅三个步骤

  1. let ary = []; //=> 订阅名单
  3. //=> 订阅
  4. function subscribe(f) {
  5.   let n = ary.indexOf(f);
  6.   n == -1 ? ary.push(f) : null; //=> 就是把人加入名单中
  7. }
  9. //=> 发布
  10. function publish() {
  11.   //=> 遍历所有订阅人，执行对应函数
  12.   ary.forEach((item) => {
  13.     item && item();
  14.   })
  15. }
  17. //=> 取消订阅
  18. function off(f) {
  19.   //=> 移除该订阅人
  20.   let n = ary.indexOf(f);
  21.   if (n > -1) {
  22.     ary.splice(n, 1);
  23.   }
  24. }

2. 具体的发布订阅

指定特定的报社（元素），以及一个具体的类型（也就是特定杂志），以这两个属性来分开管理分别订阅发布

  1. function subscribe(ele, type, f) {
  2.   //=> 把之前定义到外面的名单放到元素的特定属性上，
  3.   ele[type].ary = ele[type].ary || [];
  4.   let n = ele[type].ary.indexOf(f);
  5.   n == -1 ? ele[type].ary.push(f) : null; //=> 就是把人加入名单中
  6. }
  8. //=> 发布
  9. function publish(ele, type) {
  10.   //=> 遍历所有订阅人，执行对应函数
  11.   ele[type].ary = ele[type].ary || [];
  12.   ele[type].ary.forEach((item) => {
  13.     item && item();
  14.   })
  15. }
  17. //=> 取消订阅
  18. function off(ele, type, f) {
  19.   ele[type].ary = ele[type].ary || [];
  20.   //=> 移除该订阅人
  21.   let n = ele[type].ary.indexOf(f);
  22.   if (n != -1) {
  23.     ele[type].ary.splice(n, 1);
  24.   }
  25. }

3. 面向对象的发布订阅

  1. class Subscribe {
  2.   constructor() {
  3.     //=> 创建一个容器，管理需要执行的方法
  4.     this.pond = [];
  5.   }
  7.   //=> 向容器添加方法 fn，需要去重
  8.   add(fn) {
  9.     let n = this.pond.indexOf(fn);
  10.     if (n > -1) {
  11.       this.pond.push(fn);
  12.     }
  13.   }
  15.   //=> 执行容器中所有的方法
  16.   fire(...arg) {
  17.     this.pond.forEach((item) => {
  18.       item && item(...arg);
  19.     })
  20.   }
  22.   //=> 从容器中移除
  23.   remove(fn) {
  24.     let n = this.pond.indexOf(fn);
  25.     if (n > -1) {
  26.       this.pond.splice(n, 1);
  27.     }
  28.   }
  29. }

4. 加强面向对象的发布订阅

上面的例子只能创建一个订阅名单，如果需要多个，那么就需要多次执行构造函数。

改进 ponds 为一个对象，可以容纳多个具名池子，通过 type 属性获取 三个行为都需要增加一个 type 参数，来操作具体的池子。

同时，增加一个只订阅一次的方法 once、获取某个池子中所有订阅者的方法 listeners、增加类型判断等容错机制。

  1. /**
  2.  * Subscribe: 订阅发布模式类
  3.  *
  4.  * @constructor
  5.  *    ponds: 事件池 {type: [...]}
  6.  * @function
  7.  *    on(type, listener)
  8.  *    once(type, listener)
  9.  *    off(type, listener)
  10.  *    emit(type, ...args)
  11.  *    listeners(type)
  12.  * 
  13.  */
  14. class Subscribe {
  16.   constructor() {
  17.     //=> []创建一个容器，管理需要执行的方法
  18.     //=> {} 实现多个不同类型容器
  19.     this.ponds = {};
  20.   }
  22.   //=> 订阅
  23.   on(type, listener) {
  24.     // listener 必须是函数
  25.     if (typeof listener !== "function") throw new error("second param must be a function");
  26.     this.ponds[type] = this.ponds[type] || [];
  28.     // 判断事件池中是否已存在相同的 listener，存在则不添加
  29.     let n = this.ponds[type].indexOf(listener);
  30.     if (n === -1) {
  31.       this.ponds[type].push(listener);
  32.     }
  34.     return this;
  35.   }
  37.   //=> 订阅一次
  38.   once(type, listener) {
  39.     if (typeof listener !== "function") throw new error("second param must be a function");
  40.         let that = this;
  41.     var fn = function () {
  42.       listener.apply(that, arguments);
  43.       that.off(type, fn);
  44.     }
  46.     return this.on(type, fn);
  47.   }
  49.   //=> 执行容器中所有的方法
  50.   // 参数为 type, ...args
  51.   emit() {
  52.     var listeners = this.ponds[type];
  53.     if (!listeners) return;
  54.     var args = [];
  55.     Array.prototype.forEach.call(arguments, function (item) {
  56.       args.push(item);
  57.     })
  58.     var type = args.shift();
  60.     // 锁死队列，防止事件池中的函数不断向事件池添加订阅，出现死循环
  61.     listeners = listeners.slice();
  63.     // 进行逐个发布
  64.     listeners.forEach(function(item) {
  65.       item.apply(this, args);
  66.     })
  68.     return this;
  69.   }
  71.   //=> 取消订阅
  72.   off(type, listener) {
  73.     var listeners = this.ponds[type]
  74.     if (!listeners) return this;
  75.     for (let i = 0; i < listeners.length; i++) {
  76.       if (listeners[i] === listener) {
  77.         listeners.splice(i, 1);
  78.         break;
  79.       }
  80.     }
  81.     if (listeners.length === 0) {
  82.       delete this.ponds[type]; // 防止空的时候还进行遍历判断
  83.     }
  84.     return this;
  85.   }
  87.   //=> 获取所有的订阅者
  88.   listeners(type) {
  89.     // 返回克隆数组
  90.     return (this.ponds[type] || []).slice();
  91.   }
  92. }

5. 包含事件的订阅发布

判断是自己的方法还是事件，自己的订阅名单，就创建自己的容器，并将方法放入容器中，如果是事件，就只需要添加到事件池即可，

  1. function on(ele, type, f) {
  2.   if (/^my/.test(type)) { //若是自己的事件，就走自己的发布订阅
  3.     ele[type] = ele[type] || [];
  4.     var n = ele[type].indexOf(f);
  5.     if (n == -1) {
  6.       ele[type].push(f)
  7.     }
  8.   } else {
  9.     type = type.replace(/^on/g, '');
  10.     ele.addEventListener(type, f, false);
  11.   }
  12. }
  14. function fire(ele, type) {
  15.   ele[type] = ele[type] || [];
  16.   ele[type].forEach((item) => {
  17.     item && item.call(ele);
  18.   })
  19. }
  21. function off(ele, type, f) {
  22.   if (/^my/.test(type)) {
  23.     ele[type] = ele[type] || [];
  24.     var n = ele[type].indexOf(f);
  25.     if (n != -1) {
  26.       ele[type].splice(n, 1);
  27.     }
  28.   } else {
  29.     type = type.replace(/^on/, '');
  30.     ele.removeEventListener(type, f, false);
  31.   }
  32. }