EventBus

[tiantingrui]

1. eventEmitter3 这种模式下，事件的触发和回调之间是异步的还是同步的

   
   const event = new Event()

event.on('test', () => console.log(1)) console.log(2) event.emit('test') console.log(3) // 2 1 3 // event bus 是同步的

2. 实现一个event-bus
3. 设置最大监听数

[tiantingrui]

手动实现EventEmitter

class EventEmitter {
  constructor(maxListeners) {
    // 设置最大监听数
    this.maxListeners = maxListeners || Infinity;
    this.events = {};
    // {
    //   'add': [cb1, cb2]
    // }
  }

  emit(event, ...args) {
    const cbs = this.events[event];

    if (!cbs) {
      console.warn(`${event} event is not register`);
      return this;
    }

    cbs.forEach((cb) => cb.apply(this, args));
    return this;
  }

  on(event, cb) {
    if (!this.events[event]) {
      this.events[event] = [];
    }

    if (
      this.maxListeners !== Infinity &&
      this.events[event].length >= this.maxListeners
    ) {
      console.warn(`${event} has reached max listeners`);
      return;
    }

    this.events[event].push(cb);
    // 链式调用需要返回 this
    return this;
  }

  once(event, cb) {
    const func = (...args) => {
      this.off(event, func);
      cb.apply(this, args);
    };

    this.on(event, func);
    return this;
  }

  off(event, cb) {
    if (!cb) {
      this.events[event] = null;
    } else {
      this.events[event] = this.events[eevent].filter((item) => item !== cb);
    }
    return this;
  }
}

const add = (a, b) => console.log(a + b);
const log = (...args) => console.log(...args);
const events = new EventEmitter();

events.on("add", add);
events.on("log", log);
events.emit("add", 1, 2); // 3
events.emit("log", "hi~"); // hi~
events.off("add");
events.emit("add", 1, 2); // Error: add event is not registered
events.once("once", add);
events.once("once", 1, 2); // 3
// events.once("once", 1, 2);
// events.once("once", 1, 2);