js手写简略发布订阅

发布-订阅

发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。

实现思路

1. 创建一个 EventHub 类
2. 在该类上创建一个事件中心（Map）
3. on 方法用来把函数 fn 都加到事件中心中（订阅者注册事件到调度中心）
4. emit 方法取到 arguments 里第一个当做 event，根据 event 值去执行对应事件中心中的函数（发布者发布事件到调度中心，调度中心处理代码）
5. off 方法可以根据 event 值取消订阅（取消订阅）
6. once 方法只监听一次，调用完毕后删除缓存函数（订阅一次）

代码实现

const eventHub = {
  //需要映射，所以用map
  queueMap: {},
  on: (name, callback) => {
    // 入队
    eventHub.queueMap[name] = eventHub.queueMap[name] || []
    eventHub.queueMap[name].push(callback)
  },
  emit: (name, data) => {
    const q = eventHub.queueMap[name]
    if (!q) return
    q.map(f => f.call(undefined, data))
  },
  off: (name, callback) => {
    const q = eventHub.queueMap[name]
    if (!q) return
    const index = q.indexOf(callback)
    if (index < 0) return
    q.splice(index, 1)
  },
  once: (name, callback) => {
    const one = (...args) => {
      callback(...args)
      this.off(name, one)
    }
    one.initialCallback = callback;
    this.on(name, one)
  }
}

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

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