手写发布订阅

const eventHub = {
  map: {
    // click: [f1 , f2]
  },
  on: (name, fn) => {
    eventHub.map[name] = eventHub.map[name] || []
    eventHub.map[name].push(fn)
  },
  emit: (name, data) => {
    const q = eventHub.map[name]
    if (!q) return
    q.map(f => f.call(null, data))
    return undefined
  },
  off: (name, fn) => {
    const q = eventHub.map[name]
    if (!q) { return }
    const index = q.indexOf(fn)
    if (index < 0) { return }
    q.splice(index, 1)
  }
}

eventHub.on('click', console.log)
eventHub.on('click', console.error)

setTimeout(() => {
  eventHub.emit('click', 'steven')
}, 3000)

用 class 实现

class EventHub {
  map = {}
  on(name, fn) {
    this.map[name] = this.map[name] || []
    this.map[name].push(fn)
  }
  emit(name, data) {
    const fnList = this.map[name] || []
    fnList.forEach(fn => fn.call(undefined, data))
  }
  off(name, fn) {
    const fnList = this.map[name] || []
    const index = fnList.indexOf(fn)
    if (index < 0) return
    fnList.splice(index, 1)
  }
}
// 使用
const e = new EventHub()
e.on('click', (name) => {
  console.log('hi ' + name)
})
e.on('click', (name) => {
  console.log('hello ' + name)
})
setTimeout(() => {
  e.emit('click', 'steven')
}, 3000)