EventEmitter

是什么

发布订阅者模式。 一种设计模式（编程套路）

当 api 提供了:

• addEventListener / on        监听
• removeEventListener / off     移除
• dispatchEvent / emit        派发 / 触发

满足上述3个条件的对象，称为发布订阅者模式。 名字可以根据个人习惯命名，这里叫EventEmitter

封装一个EventEmitter

class EventEmitter {
 constructor() {
   this.queue = {
   }
 }

 addEventListener(name, fn) {
   this.queue[name] = this.queue[name] || []
   this.queue[name].push(fn)
 }

 removeEventListener(name, fn) {
   if (this.queue[name] === undefined) { return }
   const index = this.queue[name].indexOf(fn)
   if (index < 0) return  // 如果fn找不到那就不用删除
   this.queue[name].splice(index, 1)
 }

 dispatchEvent(name, ...args) {
   this.queue[name]?.forEach(fn => fn(...args))
   }

}

const obj = new EventEmitter()

const fn = (...reasons) => console.log(reasons)

obj.addEventListener('死亡', fn) 
obj.removeEventListener(fn)

setTimeout(() => {
 obj.dispatchEvent('死亡', '原因1', '原因2' )
 
}, 5000)

解决问题

发布订阅主要是为了对异步任务进行管理

const api = new EventEmitter()
api.addEventListener('user:success', (data) => console.log(data))

api.addEventListener('user:fail', (error) => console.error(error))

ajax({ method: 'get', url: '/user' })
// 会在未来调用
// api.dispatchEvent('user:success', data)
// 或
// api.dispatchEvent('user:fail', error)

缺点

事件少还行，但当事件过多时，很难管理

目前在实际工作中也很少用到