手写发布订阅

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(fn => fn.call(undefined,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', 'baizhe')
}, 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', 'baizhe')
}, 3000)