pubSub-js观察者模式订阅触发实现原理

先上实现代码:

function PubSub() {
    this.handlers = {};
}
PubSub.prototype = {
  // 订阅事件(定义的key值,绑定的函数)
  on: function(eventType, handler){
    var self = this;
    if(!(eventType in self.handlers)) {
      self.handlers[eventType] = [];
    }
    self.handlers[eventType].push(handler);
    return this;
  },
   // 触发事件(定义的key值) 后一个参数建议传递对象
  emit: function(eventType){
    var self = this;
    var handlerArgs = Array.prototype.slice.call(arguments,1);//触发传递的数据
    for(var i = 0; i < self.handlers[eventType].length; i++) {
     self.handlers[eventType][i].apply(self,handlerArgs);//将传过来的对象绑定于函数中 apply立即执行
    }
    return self;
  },
  // 删除订阅事件(定义的key值,绑定的函数(一般传个函数变量))
  off: function(eventType, handler){
    var currentEvent = this.handlers[eventType];//返回PubSub被绑定的函数
    var len = 0;
    if (currentEvent) {
      len = currentEvent.length;
      for (var i = len - 1; i >= 0; i--){
        if (currentEvent[i] === handler){
          currentEvent.splice(i, 1);//PubSub对象中的函数被删除 splice用于删除项目
        }
      }
    }
    return this;
  }
}
on订阅事件,可将事件传入到PubSub对象的handlers对象中。
emit触发事件,将传入的对象绑定到订阅的函数中,apply改变传入的参数的指向为指定函数,并立即执行。
off删除订阅,将PubSub对象的指定key的事件删除。

使用方法:

var pubsub = new PubSub();
//订阅事件A
// pubsub.on('A', function(data){
//   console.log(1, data);
// });
pubsub.on('A', a2=function(data){
  console.log(2 , data);
});
//触发事件A
pubsub.emit('A', {a:2});
//删除事件A的订阅源a2
pubsub.off('A', a2);

欢迎一起交流!
【http://wuhairui.cnblogs.com/】

原文地址:https://www.cnblogs.com/wuhairui/p/13679944.html