Event-emitter (理解篇)

本文深入探讨EventEmitter的工作原理,包括监听事件、事件触发流程及apply、call和bind的区别。通过实例展示如何使用EventEmitter实现发布订阅模式,适用于前端开发者。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近使用event-emitter比较多,特地去查看了相关源码和加上自己的理解,写下点笔记,

各位大佬觉得写得有错的指教一下,谢谢。

参考资料:

Event emitter的监听事件:https://www.php.cn/xiaochengxu-391850.html

JS的EventEmitter使用步奏详解:https://www.php.cn/xiaochengxu-391849.html

javascript中apply、call和bind的区别https://www.cnblogs.com/cosiray/p/4512969.html

发布订阅模式

DOM 的事件机制就是发布订阅模式最常见的实现,这大概是前端最常用的编程模型了,
监听某事件,当该事件发生时,监听该事件的监听函数被调用。


使用案例:

let emitter = new EventEmitter();

// 发布
emitter.emit("event:name-changed", { name: input.value });


// subscribe 订阅  相当于emitter.on
emitter.on("event:name-changed", data => {

  let str = `Your name is: ${data.name}`;
  console.log(str)

});


运行顺序是:

emit(发布) - > apply或call (内部执行) -> on(订阅)

tip:

emit // 触发事件,并把参数传给事件的处理函数
on   // 监听event事件,获得emit传递的参数,触发时调用callback函数

javascript中apply、call和bind的区别

在JS中,这三者都是用来改变函数的this对象的指向的

var xh = {
  name : "小红",
  gender : "女",
  age : 18
}

对于call可以这样:
xw.say.call(xh);

对于apply可以这样:
xw.say.apply(xh);

而对于bind来说需要这样:
xw.say.bind(xh)();

call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,
因此后面还需要()来进行调用才可以。

意思是只要执行了call和apply,那么肯定会执行它们改变this指向的函数

总结:
所以event emitter并非是一直有个类似setinterval的东西提醒,
而是每一次emit就会触发apply或者call的执行,然后再触发on。

PS:多个组件同时监听一个事件,若同时触发事件,则可能某些组件不会执行该事件的回调。

### event-emitter 库使用指南 #### 安装依赖 为了开始使用 `event-emitter`,首先需要安装相应的库。可以通过 npm 或 yarn 来完成这一步骤。 ```bash npm install ev ``` 或者 ```bash yarn add ev ``` #### 基本概念 `event-emitter` 提供了一个轻量级的事件管理机制,允许开发者定义、触发以及监听自定义事件[^1]。这种模式非常适合解耦不同模块之间的交互逻辑,使得代码更加清晰易维护。 #### 创建 EventEmitter 实例 创建一个新的 EventEmitter 对象非常简单: ```javascript const Event = require('ev'); let emitter = new Event(); ``` #### 注册事件处理器 可以为特定类型的事件注册多个回调函数,在这些事件发生时执行相应操作。 ```javascript emitter.on('greet', (name) => { console.log(`Hello, ${name}!`); }); ``` 这里定义了一个名为 `'greet'` 的事件,并指定了当该事件被触发时要调用的匿名函数作为参数传递给 `.on()` 方法[^2]。 #### 发射事件 一旦设置了监听器之后就可以通过 emit() 函数来触发它们关联的动作了: ```javascript emitter.emit('greet', 'Alice'); // 输出: Hello, Alice! ``` 此命令会查找所有已绑定到指定名称 (`'greet'`) 上面的处理程序并依次调用每一个;同时还将额外提供的参数传入对应的回调中去[^3]。 #### 移除事件监听器 如果不再需要某个具体的监听者,则可通过 off() 方法将其移除掉: ```javascript function greet(name){ console.log(`Goodbye, ${name}`); } emitter.on('farewell', greet); emitter.off('farewell', greet); // 取消订阅 farewell 事件下的 greet 处理方法 ``` 对于一次性使用的场景来说也可以考虑 once(), 这样就能够在第一次接收到对应消息后自动解除绑定了[^4]。 #### 清理全部监听器 有时候可能想要清理所有的监听器,这时可以用 removeAllListeners(): ```javascript emitter.removeAllListeners(); // 删除所有类型的所有监听器 ``` 或是只针对某一类别的清除: ```javascript emitter.removeAllListeners('specific-event'); // 单独删除 specific-event 类型下所有的监听器 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值