eventbus 了解吗？on 和 emit 功能？如何设计 on？手写一下

eventbus是一个实现组件间通信的工具,主要包含on和emit两个方法:

• on方法用于监听事件
• emit方法用于触发事件

on方法需要能够订阅指定事件,并根据事件触发时传入的数据执行回调函数。

一种简单的设计思路:

class EventBus {
  constructor() {
    this.events = {}; 
  }

  on(eventName, callback) {
    if(!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  }

  emit(eventName, ...args) {
    if(this.events[eventName]) {
      this.events[eventName].forEach(cb => cb(...args));
    }
  }
}

const bus = new EventBus();

// 使用示例:
bus.on('message', (msg) => {
  console.log('received message: ' + msg); 
})

bus.emit('message', 'Hello World');

这样通过on方法可以订阅事件,通过emit方法触发事件,从而实现组件间的消息通信与解耦。

我们也可以进一步优化,比如增加once方法只监听一次,off方法取消监听等等。但事件中心的核心思路就是提供发布与订阅的功能。