EventEmitter 事件触发器-Arvin Xiang

EventEmitter 即事件触发器，一般用于跨文件/组件传递事件和通讯。

安装

npm install --save eventemitter3

初始化

import EventEmitter from 'eventemitter3';

export const EE = new EventEmitter();

这里建议新建一个emitter.js文件，并使用 Object.freeze 来阻止改动。

// emitter.js
import EventEmitter from 'eventemitter3';

export const EE = new EventEmitter();

const Emitter = {
  on: (event, fn) => EE.on(event, fn),
  once: (event, fn) => EE.once(event, fn),
  off: (event, fn) => EE.off(event, fn),
  emit: (event, payload) => EE.emit(event, payload),
};
Object.freeze(Emitter);
export default Emitter;

发送（emit）

// file1.js
import Emitter from './emitter';

Emitter.emit(EVENT_NAME, data);

接收（js）

可以在当前文件，也可以在其他文件，导入 Emitter 即可使用。

// file2.js
import Emitter from './emitter';

Emitter.on(EVENT_NAME, (data) => {
  console.log('on', data);
});

// 只会触发一次
Emitter.once(EVENT_NAME, (data) => {
  console.log('on', data);
});

接收（jsx）

如果是在 react 里面使用，搭配 useEffect 使用即可。

// file3.jsx
useEffect(() => {
  Emitter.on(EVENT_NAME, someFunction);
  return () => {
    Emitter.off(EVENT_NAME, someFunction);
  };
});
const someFunction = (data) => {
  // do something with data
};

参考

https://kss-kavinda.medium.com/how-to-use-react-event-emitter-3-d8474665dcc