观察者模式

当一个对象的状态发生改变，所有依赖于它的对象都将得到通知，也叫做发布-订阅模式

基本的代码框架

function PubSub() {
  this.handlers = {}
}
PubSub.prototype = {
  // 订阅事件
  on: function (eventType, handler) {},
  // 触发事件(发布事件)
  emit: function (eventType) {},
  // 删除订阅事件
  off: function (eventType, handler) {},
}

this.handlers保存了所有的事件名称和对应的操作

• 事件的绑定

//订阅事件
var self = this
if (!(eventType in self.handlers)) {
  self.handlers[eventType] = []
}
self.handlers[eventType].push(handler)
return this

在绑定事件的时候先判断，当前事件名称是否已存在，如果不存在则创建事件名称的数组，再将事件加入

• 触发事件(发布事件)

// 触发事件(发布事件)
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)
}
return self

触发事件时，通过通过事件名称获取绑定在这个事件名上的所有事件，循环调用事件

• 事件删除

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

上面的代码中最后都有一个return this;是为了实现方法的链式操作

实例

var pubsub = new PubSub()
var callback = function (data) {
  console.log(data)
}
//订阅事件A
pubsub
  .on('A', function (data) {
    console.log(1 + data)
  })
  .on('A', function (data) {
    console.log(2 + data)
  })
  .on('A', callback)
  .emit('A', '我是参数')
//控制台将输出
//1我是参数
//2我是参数
//我是参数

完整的代码

function PubSub() {
  this.handlers = {}
}
PubSub.prototype = {
  // 订阅事件
  on: function (eventType, handler) {
    var self = this
    if (!(eventType in self.handlers)) {
      self.handlers[eventType] = []
    }
    self.handlers[eventType].push(handler)
    return this
  },
  // 触发事件(发布事件)
  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)
    }
    return self
  },
  // 删除订阅事件
  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
  },
}

var pubsub = new PubSub()
var callback = function (data) {
  console.log(data)
}
//订阅事件A
pubsub
  .on('A', function (data) {
    console.log(1 + data)
  })
  .on('A', function (data) {
    console.log(2 + data)
  })
  .on('A', callback)
  .emit('A', '我是参数')