JavaScript-设计模式-发布订阅

设计模式-发布订阅式

class EventBus {
  constructor () {
    this.subscribe = {}
  }

  /**
   * 订阅事件 - 添加处理函数到事件中
   * @params event - 事件名称
   * @params fn - 处理函数
   */
  $on(event, fn) {
    !this.subscribe[event] && (this.subscribe[event] = [])
    this.subscribe[event].push(fn)
  }

  /**
   * 取消订阅 - 移除处理函数
   * @params event - 事件名称
   */
  $off(event) {
    this.subscribe[event] && delete this.subscribe[event]
  }

  /**
   * 发布事件 - 执行处理函数
   * @params event - 事件名称
   */
  $emit(event) {
    this.subscribe[event] && this.subscribe[event].forEach(fn => fn())
  }
}

// 事件中心
const vm = new EventBus()

// 订阅事件
vm.$on('change', () => { console.log('change1...') })
vm.$on('change', () => { console.log('change2...') })
vm.$on('click', () => { console.log('click...') })

// 发布事件
vm.$emit('change') // change1... change2...
vm.$emit('click') // click...

// 取消订阅
vm.$off('change')
vm.$off('click')

// 发布事件
vm.$emit('change') //
vm.$emit('click') //

javascript — 2021年7月4日