封装一下 EventBus

166 阅读1分钟

EventBus 用来实现任意组件的通信,其实实现起来并不算太难,封装一个 class 类即可实现

export default class EventBus {
  constructor() {
    this.events = {}
  }
  //  this.events = { a: [ callback1, callback2 ], b: callback }
  $on(eventName, callback) {
    // 不存在这个属性就创建新数组 a: []
    this.events[eventName] = this.events[eventName] || []
    this.events[eventName].push(callback)
  }
  $emit(eventName, ...args) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(callback => {
        callback(...args)
      })
    }
  }
}


// 反推
// 需要实现
const myEventBus = new EventBus()
// 订阅(可以对同一个事件名有多个订阅)
myEventBus.$on("a", () => {
  console.log("a1")
})
myEventBus.$on("a", () => {
  console.log("a2")
})

// 发布
myEventBus.$emit("b") //第二个可以传参数,被$on的回调所接受