设计模式之观察者模式

设计模式一直给前端同学一个高大上的感觉，今天咱们就来揭开它那神秘面纱。先来谈谈观察者模式。

观察者模式：观察者模式就是定义了一个对象一对多的关系，让多个观察者同时监听一个大对象，当一个大对象发生变化时，所有的依赖它的对象都会得到通知。

像我们平时的DOM事件机制，就是采用了观察者模式，这里就简单实现，加深理解。

class Event {
  constructor() {
    this.eventList = []
  }
  on(eventName, handler) {
    if (!this.eventList[eventName]) {
      this.eventList[eventName] = []
    }
    this.eventList[eventName].push(handler)
    return this
  }
  off(eventName, handler) {
    this.eventList[eventName] = this.eventList[eventName].filter(item => item != handler)
    return this
  }
  emit(eventName, data) {
    this.eventList[eventName].forEach(item => item.call(this, data))
    return this
  }
}

var event = new Event()

const handler = function (data) {
  console.log('我被点击啦', data)
}

event.on('click', handler)

event.emit('click', 'haha')

event.off('click', handler)

event.emit('click', '哈哈')