EventEmiter

castle468

于 2023-03-05 14:11:33 发布

阅读量113

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_62585945/article/details/129345518

版权

文章介绍了EventEmitter的概念，通过监听/订阅、触发事件和取消监听的步骤阐述了发布订阅模式的工作原理。它提供addEventListener、dispatchEvent和removeEventListener方法来管理和执行回调函数。EventEmitter适用于异步任务管理，但在事件过多时可能造成管理困难。

摘要由CSDN通过智能技术生成

EventEmiter

发布订阅模式（本质上是一种设计模式）

步骤

1.通过 button.addEventListener(‘click’, fn) 监听/订阅事件

2.用户点击触发 button.dispatchEvent(…‘click’) 执行，即触发事件

3.fn 被调用

1. 如何取消监听/订阅？- button.removeEventListener
1. 如果多次监听会怎样？- 按监听顺序依次执行 fn1、fn2
1. 如果将第 1、2 步颠倒过来会怎样？- 会使得 fn 不被执行
1. button 是怎么得到 addEventListener 方法的？- 通过原型链得到的

实例（考虑上事件名用class写）

class EventEmitter {
  constructor() {
    this.queue = { /* xxx: [] 无法初始化 */ }
  }
  addEventListener(name, fn) {
    this.queue[name] = this.queue[name] || [] // 初始化
    this.queue[name].push(fn)
  }
  dispatchEvent(name) {
    this.queue[name]?.forEach(fn => fn())
  }
  removeEventListener(name, fn) {
    if (this.queue[name] === undefined) { return }
    const index = this.queue[name].indexOf(fn)
    if (index >= 0) { this.queue[name].splice(index, 1) }
  }
}

调用

const api = new EventEmitter()
api.addEventListener('user:success', f1)
api.addEventListener('user:fail', f2)

也可以直接用ajax函数对象来

ajax.addEventListener('user:success', (data) => console.log(data))
ajax.addEventListener('user:fail', (error) => console.error(error))
// 会在未来调用
// ajax.dispatchEvent('user:success', data)
// 或
// ajax.dispatchEvent('user:fail', error)

summary

发布订阅模式的特点

api 提供了 addEventListener / on / subscribe

api 提供了 dispatchEvent / emit / trigger

api 提供了 removeEventListener / off / unsubscribe

满足上述条件的对象被称为 EventEmitter，实现了发布订阅模式

把回调（函数）放在队列（数组）里，等待被逐个调用