前言
在前端开发中，我们常常需要进行逻辑事件的处理，尤其是在复杂的项目中，事件的分发和监听显得尤为重要。而在 JavaScript 语言中，我们可以使用事件监听和发布订阅模式进行事件处理。本文将介绍一款非常实用的 npm 包 emitterlite，它可以帮助我们快速、简便地进行事件的管理。
简介
emitterlite 是一个轻量级的 JavaScript 事件管理库，在 npm 包中以 emitterlite 的名称发布，它基于观察者模式，用于管理和触发事件。使用它能够简单而优雅地进行事件的绑定和解除。而且，它支持多个监听器监听同一个事件，也支持同一个监听器监听多个事件。
安装
你可以在 npm 命令下安装该 package，也可以通过 CDN 引入。
使用 npm 安装：
$ npm install emitterlite --save
使用 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/emitterlite@1.0.0/dist/emitterlite.min.js"></script>
使用
emitterlite 的 API 非常简单，它只包含三个主要方法：on、off 和 emit。
on 方法
on 方法用于监听事件，当事件被触发时执行回调函数。
const emitter = new Emitter(); emitter.on(eventName, callback);
实际应用时，可以传递一个对象，该对象的键为事件名，值为回调函数，这样可以监听多个事件：
emitter.on({
eventName1: callback1,
eventName2: callback2,
...
})off 方法
off 方法用于解除监听器，它有两种方式。
解除事件上所有的监听器。
emitter.off(eventName);
解除特定事件上的特定监听器。
emitter.off(eventName, callback);
emit 方法
emitter 实例的 emit 方法用于执行事件，调用此方法会依次执行所有监听该事件的回调函数。
emitter.emit(eventName, ...args);
在 emit 方法中，除了事件名之外，你还可以传递多个参数，这些参数将被作为回调函数的参数，例如：
emitter.emit(eventName, arg1, arg2, ...);
示例
以下是一个简单的示例，将 emitterlite 应用于表单校验。假设我们有一个表单，包括姓名、手机号、邮箱、密码等多个输入框，我们可以使用 emitterlite，让每个输入框独立判断是否合法，同时提供一个提交按钮，将表单数据提交至服务器。
-- -------------------- ---- -------
---- ---- -- ---
------
-------
--------- ----------- ----------- --
--------
-------
---------- ----------- ------------ --
--------
-------
--------- ----------- ------------ --
--------
-------
--------- --------------- --------------- --
--------
------- ------------- --------------------
--------- -------------------- ---- -------
-- -- --
----- -------- - ---
----- --------- - ----------------------------------------------
----- ------- - --- ----------
-- ----
-
- ----- ------- ------ ----------------------- ---- ----- --- ------ --
- ----- -------- ------ ---------------- ---- -------- --
- ----- -------- ------ ------------------------------------------------ ---- ------- --
- ----- ----------- ------ ---------- ---- --------- - -- --
------------ ----- ------ --- -- -- -
----- ----- - -----------------------------------------
------------------------------ -- -- -
----- ----- - -------------------
-------------- - ------
-- ------------------- -
------------------ ------
--------------------------------
------------------------------------ - ---
- ---- -
------------------ ------ -----
-----------------------------
------------------------------------ - ----
-
---
---
------------
----- ---------------
------ ---------------
------ ---------------
--------- ---------------
---
-- ----------------
-------- ---------------- -
-- -
---------------------------- --- - --
------------------------------------- -- ------
- -
------------------ - ------
- ---- -
------------------ - -----
-
-在上面的代码中，我们通过 on 方法为每个输入框绑定了一个校验事件，这个校验事件会在输入框失去焦点时被触发。当输入内容不合法时，我们调用了 emit 方法，传递了一个布尔值来表示校验是否通过，传递了一个字符串型的错误信息，用于展示在错误信息展示器上。
最后，我们通过为每个输入框的校验事件绑定了一个 checkSubmitBtn 函数，用于判断是否启用提交按钮。
这个示例演示了如何利用 emitterlite 帮助我们进行表单输入校验和提交操作。当然，实际开发中它还有很多其他的高级应用，让我们可以更好地协调复杂的事件处理。
总结
emitterlite 是一个小巧但是功能十分强大的 JavaScript 事件管理库。通读本文，你应该已经掌握了如何使用它进行事件绑定、解除、执行，并通过示例了解了如何将其应用于实际项目中，支持我们更加优雅地处理多事件复杂场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005569781e8991b448d3643