EventEmitter3详解

一、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事件库来完成对应的业务需求。

原创文章，作者：DYFDK，如若转载，请注明出处：https://www.506064.com/n/332759.html