手写发布订阅

js对象版本

const eventHub = {
  map: {
    // click: [f1 , f2]
  },
  on: (name, fn)=>{
    // 入队
    // if(eventHub.map[name] === undefined){
    //   eventHub.map[name] = []
    // }
    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))
  },
  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('clcik', f1)
// eventHub.off('click', f1)

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

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

ES6 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(){
    const fnList = this.map[name] || []
    const index = fnList.indexOf(fn)
    if(index < 0) return
    fnList.splice(index, 1)
  }
}
const e = new EventHub()
e.on('clcik', (name)=>{
  console.log('hi' + name);
})
e.on('clcik', (name)=>{
  console.log('hello' + name);
})
setTimeout(() => {
  e.emit('click', 'zhaoge')
}, 3000);