设计模式:发布/订阅模式

发布/订阅模式是观察者模式的一个变形。

发布/订阅模式,一个发布者(观察者)Publish;一个或多个订阅者Observer,观察者模式中的观察者是通过notify方法通知所有的观察者调用update,而发布者是通过emit触发事件,调用订阅者Observe函数。

看代码:

//发布者
function Publish() {     
  this.handlers = {};
}
Publish.prototype = {
  on: function (eventType, handler) { // 订阅事件
      if (!(eventType in this.handlers)) {
          this.handlers[eventType] = [];
      }
      this.handlers[eventType].push(handler);
      return this;
  },
  emit: function (eventType) {    // 触发事件(发布事件)
      var handlerArgs = Array.prototype.slice.call(arguments, 1);
      var length = this.handlers[eventType].length
      for (var i = 0; i < length; i++) {
          this.handlers[eventType][i].apply(this, handlerArgs);
      }
      return this;
  },
  off: function (eventType, handler) {    // 删除订阅事件
      var currentEvent = this.handlers[eventType];
      var len = 0;
      if (currentEvent) {
          len = currentEvent.length;
          for (var i = len - 1; i >= 0; i--) {
              if (currentEvent[i] === handler) {
                  currentEvent.splice(i, 1);
              }
          }
      }
      return this ;
  }
};
//订阅者
function ObserverB(data) {
  console.log('b subscribe:' + data)
}
function ObserverC(data) {
  console.log('c subscribe:' + data)
}

let $publish = new Publish();

//订阅事件
$publish.on('bEvent1', ObserverB);
$publish.on('bEvent2', ObserverB);
$publish.on('cEvent1', ObserverC);

//触发事件
$publish.emit('bEvent1', 'ObserverB第1次时间发布');
$publish.emit('bEvent2', 'ObserverB第2次时间发布');
$publish.emit('cEvent1', 'ObserverC第1次时间发布'); 

你可能感兴趣的:(设计模式:发布/订阅模式)