JavaScript订阅模式

核心步骤

1. 构造函数中创建”events“对象变量用于存放所有的事件。
2. 添加“on”函数，用于订阅事件。当总事件中不存在此事件时创建新的事件数组，当存在时将“fn”函数添加在该事件对应数组中。
3. 添加“emit”函数，用于发布事件，遍历该事件下的函数数组并全部执行。
4. 添加“off”函数，用于取消订阅事件。若fn不传, 直接取消该事件所有订阅信息。

class EventEmitter {
  constructor() {
    this.events = {} // 事件中心
  }
  // 订阅
  on(name, fn) {
    ;(this.events[name] || (this.events[name] = [])).push(fn)
  }
  // 发布 => 将订阅的事件进行统一执行
  emit(name, ...args) {
    if (!this.events[name]) return
    if (!Array.isArray(this.events[name])) return
    this.events[name].forEach(fn => {
      fn(...args)
    })
  }
  // 取消订阅 => 若fn不传, 直接取消该事件所有订阅信息
  off (name, fn) {
    if (this.events[name]) {
      const newEvents = fn ? this.events[name].filter(e => e !== fn) : [];
      this.events[name] = newEvents;
    }
  }
}