发布订阅模式简单实现

实现思路

// 实现思路
// 1. 创建一个对象
// 2. 在该对象上创建一个缓存列表（调度中心Event Channel）
// 3. on方法用来把函数添加到缓存列表中（订阅者注册事件到调度中心）
// 4. emit方法取到argument里第一个当作event，根据event值去执行对应缓存列表中的函数（发布者发布事件到调度中心，调度中心处理代码）
// 5. off方法可以根据event值取消订阅（取消订阅）
// 6. once方法只监听一次，调用完毕后删除缓存函数（订阅一次）
class EventEmitter {
  constructor() {
    this.listener = Object.create(null)
  }
  on(type, cb) {
    if (!this.listener[type]) {
      this.listener[type] = [cb]
    } else {
      this.listener[type].push(cb)
    }
  }
  emit(type, ...args) {
    if (this.listener[type] && this.listener[type].length) {
      this.listener[type].forEach((cb) => {
        cb.call(this, ...args)
      })
    }
  }
  off(type, cb) {
    if (!cb) {
      this.listener[type].length = 0
    }

    if (this.listener[type] && this.listener[type].length) {
      this.listener[type] = this.listener[type].filter((item) => {
        return item !== cb && item.fn !== cb
      })
    }
  }
  once(type, cb) {
    let foo = (...args) => {
      cb.call(this, ...args)
      this.off(type, foo)
    }

    foo.fn = cb
    this.on(type, foo)
  }
}
const ev = new EventEmitter()
const fn = (data) => {
  console.log(111, data)
}
// ev.on('event1', fn)
// ev.emit('event1', '前')

// ev.on('event1', fn)
// ev.emit('event1', '前')
// ev.emit('event1', '后')

// ev.on('event1', fn)
// ev.emit('event1', '前')
// ev.off('event1', fn)
// ev.emit('event1', '后')

// ev.once('event1', fn)
// ev.emit('event1', '前')
// ev.emit('event1', '后')

// ev.once('event1', fn)
// ev.off('event1', fn)
// ev.emit('event1', '前')
// ev.emit('event1', '后')

// ev.once('event1', fn)
// ev.off('event1')
// ev.emit('event1', '前')
// ev.emit('event1', '后')