在前端开发中，事件机制是十分常见的一种技术，而其中用的最多的便是EventEmitter。z-eventemitter是一个轻量级的事件监听库，本文将为大家介绍如何使用它。
安装
使用npm进行安装：
npm i z-eventemitter
或者使用yarn：
yarn add z-eventemitter
基本用法
引入z-eventemitter
import EventEmitter from 'z-eventemitter';
创建实例
const emitter = new EventEmitter();
监听事件
emitter.on('eventType', (data) => {
console.log('事件触发', data);
});触发事件
// 只触发一次
emitter.once('eventType', (data) => {
console.log('事件触发', data);
});
emitter.emit('eventType', '触发事件'); // '事件触发 触发事件'
emitter.emit('eventType', '再一次触发事件'); // 不会触发取消监听事件
-- -------------------- ---- ------- ----- -- - ------ -- - ------------------- ------ -- ----------------------- ---- ------------------------- -------- -- ----- ----- ------------------------ ---- ------------------------- ----------- -- ----
高级用法
内存泄漏问题
在创建事件监听器之后，没有将其解绑会导致内存泄漏问题，造成程序运行后期出现较严重的性能问题。因此，最好在组件卸载时进行事件监听器的解绑操作。
-- -------------------- ---- -------
------ ------------ ---- -----------------
----- --- ------- --------------- -
------------------ -
-------------
------------ - --- ---------------
-
------------------- -
---------------------------- ------------------
-
---------------------- -
----------------------------- ------------------
-
----------- - ------ -- -
------------------- ------
-
-------- -
-- ---
-
-自定义EventEmitter实例
为确保程序运行的正确性，在同一个EventEmitter实例中，不同的事件应该使用不同的命名空间。
const emitter1 = new EventEmitter('namespace1.');
const emitter2 = new EventEmitter('namespace2.');
emitter1.on('eventType', (data) => {
console.log('事件触发', data);
});
emitter2.emit('eventType', '触发事件'); // 不会产生任何输出总结
通过本文的介绍，我们可以看到z-eventemitter不仅使用简单方便，而且还有很多高级用法可以用于对事件监听的处理，它还可以防止内存泄漏，长期来看能提高程序的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664f81e8991b448e2718