Event Bus简单实现

Event Bus简单实现

class EventBus {
  constructor() {
    this.list = new Map();
  }

  /**
   * 注册事件和处理函数
   * 一个事件可存在多个处理函数
   * event:string
   * fn:function
   */
  on(event, fn) {
    if (this.list.has(event)) {
      this.list.set(event, [...this.list.get(event), fn]);
    } else {
      this.list.set(event, [fn]);
    }
  }

  /**
   * 销毁事件和处理函数
   * 不存在参数，清空所有，若只存在一个参数，则删除此事件下的所有处理函数，若存在两个参数则仅删除事件下的此处理方法
   * event:string
   * fn?:function
   */
  off(event, fn) {
    if (!arguments.length) {
      this.list.clear();
    }
    if (arguments.length === 1) {
      this.list.delete(event);
    }
    if (this.list.has(event) && fn) {
      let fns = this.list.get(event);
      for (let i = 0; i < fns.length; i++) {
        if (fns[i] === fn || fns[i].fn === fn) {
          // fns[i].fn用来移除once注册的事件
          fns.splice(i, 1);
        }
      }
      this.list.set(event, [...fns]);
    }
  }

  /**
   * 注册事件和处理函数，触发一次后销毁
   * event:string
   * fn:function
   */
  once(event, fn) {
    let self = this;

    function handler() {
      self.off(event, handler);
      fn.apply(null, arguments); // emit里面调用时会给on方法传参
    }
    handler.fn = fn; // off里面根据这个判断销毁事件
    this.on(event, handler);
  }

  /**
   * 触发某事件所有回调并带参数
   */
  emit(event, ...args) {
    if (this.list.has(event)) {
      for (let fn of this.list.get(event)) {
        fn.apply(null, args);
      }
    }
  }
}

let obj = new EventBus();