EventEmitter3详解

发布时间：2023-05-21

一、EventEmitter3基本介绍

EventEmitter3是一个事件发射器，它主要用于处理事件，并且在JavaScript中使用较为广泛，例如在Node.js中使用较多。EventEmitter3的核心是一个事件队列，开发者可以通过API来进行事件的发布和订阅，以此来达到对应的业务逻辑。 EventEmitter3是基于Node.js的EventEmitter的改进版本，它的API更加简洁，性能更加优越，同时在ES6 Promise化和自定义Promise库的支持上表现出了非常好的兼容性和易用性。

// 使用EventEmitter3来处理事件
const EventEmitter = require('eventemitter3');
const emitter = new EventEmitter();
emitter.on('event', (name, age) => {
  console.log(`${name} is ${age} years old`);
});
emitter.emit('event', 'Tom', 18);

二、EventEmitter3的API介绍

1. on(event, listener)

该方法是用于订阅事件的，当该事件被触发时，所有绑定的listener都会被调用。

emitter.on('event', (name, age) => {
  console.log(`${name} is ${age} years old`);
});

2. once(event, listener)

该方法与on方法类似，不同的是，once方法是一次性的，当该事件被触发后，listener会自动解绑。

emitter.once('event', () => {
  console.log('event only trigger once');
});

3. emit(event, [...args])

该方法是用于触发事件，它会从所有已注册的listener中调用与该事件匹配的listener方法。

emitter.emit('event', 'Tom', 18);

4. off(event, listener)

该方法是用于解除事件绑定，当listener为null时解除所有绑定的事件。

// 解除指定事件的listener绑定
const listener = () => console.log('off');
emitter.on('event', listener);
emitter.off('event', listener);
// 解除所有事件的listener绑定
emitter.off(null);

5. listeners(event)

该方法返回一个事件的listener数组。

const listeners = emitter.listeners('event');
console.log(listeners);

6. listenerCount(event)

该方法返回一个事件的listener数量。

const count = emitter.listenerCount('event');
console.log(count);

三、常用场景举例

1. 监听文件读取完成的事件

在文件读取的过程中，我们需要监听文件是否读取完成，这时可以使用EventEmitter3来处理事件。

const fs = require('fs');
const EventEmitter = require('eventemitter3');
const emitter = new EventEmitter();
const readStream = fs.createReadStream('file.txt');
readStream.on('data', (chunk) => {
  console.log(`data: ${chunk}`);
});
readStream.on('end', () => {
  console.log('read file end');
  emitter.emit('finish');
});
emitter.on('finish', () => {
  console.log('file read finished');
});

2. 页面之间的通信

在开发Web应用的过程中，页面之间需要进行通信，例如在SPA（Single Page Application）场景下，有时需要进行组件之间的通信，这时可以使用EventEmitter3来实现。

// componentA.js
import EventEmitter from 'eventemitter3';
const emitter = new EventEmitter();
emitter.on('change', (data) => {
  console.log(`componentA Data: ${data}`);
});
// componentB.js
import EventEmitter from 'eventemitter3';
const emitter = new EventEmitter();
emitter.on('change', (data) => {
  console.log(`componentB Data: ${data}`);
});
// index.js
import './componentA.js';
import './componentB.js';
const emitter = new EventEmitter();
emitter.emit('change', 'hello world');

3. 处理事件排序

在一些场景下，需要对事件进行排序处理，例如在队列中处理事件，此时需要按照队列中事件的先后顺序来进行处理，这时可以使用EventEmitter3来实现。

const EventEmitter = require('eventemitter3');
const emitter = new EventEmitter();
emitter.on('event', (name, age) => {
  console.log(`Listener 1: ${name} is ${age} years old`);
});
emitter.on('event', (name, age) => {
  console.log(`Listener 2: ${name} is ${age} years old`);
});
emitter.emit('event', 'Tom', 18);

四、总结

EventEmitter3是一个重要的事件处理工具，在很多场景下都可以使用，例如处理异步任务的完成状态、进行组件之间的通信等等。同时，如果需要优化性能或者在自定义Promise库等场景下需要扩展时，也可以自定义一个Promise事件库来完成对应的业务需求。

推荐文章