什么是 component-emitter2
component-emitter2 是一个 Node.js 和浏览器端通用的事件监听器实现，可以在任何 JavaScript 环境中使用，支持自定义事件名称和参数传递等功能。
安装 component-emitter2
npm install component-emitter2 --save
使用 component-emitter2
创建 EventEmitter 实例
const EventEmitter = require('component-emitter2');
const emitter = new EventEmitter();注册事件监听器
emitter.on('event', function(arg1, arg2, arg3) {
console.log(arg1, arg2, arg3);
});触发事件
emitter.emit('event', 'Hello', 'World', 123);取消事件监听器
emitter.removeListener('event', listener);取消所有事件监听器
emitter.removeAllListeners('event');component-emitter2 深入分析
component-emitter2 主要是通过一个 event 对象来管理事件监听器。
注册事件监听器
-- -------------------- ---- -------
-------------------- - ---------------------------------- - --------------- --- -
-- ------- -- --- ----------- -
----- --- --------------- ---- -- - -----------
-
--------------- - --------------- -- ---
---------------------- - ---------------------- -- ---
--------------------------------
------ -----
--上面的代码对 on 函数进行了定义，这个函数主要是通过将事件名称、回调函数添加到 event 对象中来实现添加事件监听器的操作。
触发事件
-- -------------------- ---- -------
---------------------- - --------------- -
--------------- - --------------- -- ---
--- ---- - ------------------------ ---
--- --------- - -----------------------
-- ----------- -
--------- - -------------------
--- ---- - - -- --- - ----------------- - - ---- ---- -
------------------------ ------
-
-
------ -----
--上面的代码是 emit 函数定义，这个函数主要是通过 event 对象存储的事件名称和回调函数，找到相应的回调函数并执行。
取消事件监听器
-- -------------------- ---- -------
-------------------------------- - ------------------------------------- - --------------- --- -
--------------- - --------------- -- ---
-- ------------------------- ------ -----
--- ---- - -----------------------
--- - - -----------------
-- -- - -- ------ -----
-------------- ---
-- ------------ --- -- -
------ -----------------------
-
------ -----
--上面的代码是 removeListener 函数定义，这个函数通过查找 event 对象中的事件名称和回调函数，将其删除以实现取消事件监听器的操作。
总结
component-emitter2 是一个轻量级的事件监听器库，能够适应多种 JavaScript 环境和浏览器，非常适合用于开发前端应用。本文通过分析其源码，详细讲解了使用方法和如何新增、触发、取消事件监听器的操作。希望读者通过本文能够更好地掌握 component-emitter2，为自己的应用开发工作提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcaeab5cbfe1ea0612503