JS手写事件总线

API

1. eventBus: 包含所有功能的事件总线对象
2. eventBus.on(eventName, listener): 绑定事件监听
3. eventBus.emit(eventName, data): 分发事件
4. eventBus.off(eventName): 解绑指定事件名的事件监听, 如果没有指定解绑所有

原理

使用 on 方法来绑定发生某种事件后应该执行的回调函数。

使用 emit 触发这个事件，并给这个事件的回调函数传入数据。

代码

class EventBus {
  constructor() {
    this.callbackList = {};
  }
  // 绑定事件
  on(type, callback) {
    // 如果已经存在该事件
    if (this.callbackList[type]) {
      this.callbackList[type].push(callback);
    } else {
      this.callbackList[type] = [callback];
    }
  }
  // 触发事件
  emit(type,data) {
    if (this.callbackList[type] && this.callbackList[type].length > 0) {
      // 遍历执行数组
      this.callbackList[type].forEach(callback => {
        callback(data);
      })
    }
  }
  // 解绑事件
  off(eventName) {
    // 如果传入了eventName，则删除对应的回调
    if (eventName) {
     return  delete this.callbackList[eventName];
    }
    // 如果名字传入事件名字，则清空对象
    this.callbackList = {};

  }
}

测试

const bus = new EventBus();

bus.on('login', data => {
  console.log(data+'用户已经登录');
})

bus.on('login', data => {
  console.log(data+'登录数据已经写入');
})

setTimeout(() => {
  bus.emit('login','张三')
}, 200);