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事件庫來完成對應的業務需求。