JS如何实现发布订阅？

发布订阅模式主要涉及三个对象：发布者、订阅者、主题对象。

发布-订阅模式

发布-订阅模式又称观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。

在 Javascript 开发中，我们一般用事件模型来替代传统的发布订阅模式。

基本流程及原理

1. event.on方法，是注册事件，将执行函数添加进eventObj 中,可注册多个事件
2. event.off方法，是移除事件，将执行函数从eventObj 中移除
3. 如果没有参数，移除所有事件
4. 如果只带事件名参数，就移除这个事件名下的所有事件
5. 如果带有两个参数，那么就表示移除某个事件的具体函数
6. event.emit 方法，是执行事件，执行某个事件中的所有执行函数

代码实现：

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', 'frank')
},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', 'frank')
},3000)