JS手动实现发订阅布模式MyEventBus

1. 创建发布订阅类

class MyEventBus {
  constructor () {
    this.event = { }
  }

  /**
   * 订阅
   * @param eventName 订阅的事件名称
   * @param fun 订阅的回调函数
   */
  on (eventName, fun) {
    if (this.event[eventName]) {
      this.event[eventName].push(fun)
    } else {
      this.event[eventName] = [fun]
    }
  }

  /**
   * 发布
   * @param eventName 发布的事件名称
   * @param parameter 发布的参数
   */
  emit (eventName, parameter) {
    if (this.event[eventName]) {
      this.event[eventName].map(item => {
        item(parameter)
      })
    }
  }

  /**
   * 取消订阅
   * @param eventName 取消订阅的事件名称
   * @param fun 取消订阅的回调函数
   */
  remove (eventName, fun) {
    let fnList = this.event[eventName]
    if (!fnList) return
    if (!fun) {
      fnList.length = 0
    } else {
      for (let i = 0; i < fnList.length; i++) {
        if (fnList[i] === fun) {
          fnList.splice(i, 1)
        }
      }
    }
  }
}
export default MyEventBus

2. 使用的地方引入此类

import MyEventBus from './myEventBus'
// 声明全局实例或者局部实例，注意发布和订阅要在一个实例里面
let myEventBus = new MyEventBus()
// 订阅
myEventBus.on('test', (params) => {
    console.log('订阅1', params)
})
// 发布
myEventBus.emit('test', '测试参数')