随着前端项目越来越大、越来越复杂，管理事件、事件流变得越来越重要。而 npm 包 @use-pattern/event 提供了一种简单且可扩展的事件系统。
安装
npm install @use-pattern/event
引入
import { Event } from '@use-pattern/event';基本使用
@use-pattern/event 包含以下基本 API：
on(eventName, callback, context)- 添加事件监听器once(eventName, callback, context)- 添加一次性事件监听器off(eventName, callback, context)- 移除事件监听器trigger(eventName, ...args)- 触发事件listenTo(target, eventName, callback, context)- 添加另一个对象的事件监听器listenToOnce(target, eventName, callback, context)- 添加另一个对象的一次性事件监听器stopListening(target, eventName, callback, context)- 移除另一个对象的事件监听器
下面演示一个简单的例子：
-- -------------------- ---- ------- ----- ----- - --- -------- -- --------- ----------------- ---------- - ------------------------ --- -- ---- ----------------------- -- -----------
事件对象
@use-pattern/event 支持事件对象传递，可以在 trigger 方法中传入自定义的事件对象，然后在监听器中使用。
-- -------------------- ---- ------- ----- ----- - --- -------- -- --------- ----------------------- --------------- ----- ----- - ------------------ ---------- --------------- -------------------- ----- ------ --- -- ---- ---------------------------- - -------- ------- -- ------- -------- -- --- -- ----- -------- ----- -- ----- ---- ----
回调函数上下文
使用 context 参数，可以将回调函数的 this 指向指定的上下文对象。
-- -------------------- ---- -------
----- ---------- - -
-------- ----- -- ---------
------------ -
--------------------------
-
--
----- ----- - --- --------
-- ---------
--------------- ---------- -
------------------
-- ------------
-- ----
---------------------
-- ------- -- -------移除监听器
使用 off 方法可以移除一个事件监听器。
-- -------------------- ---- ------- ----- ----- - --- -------- ----- -------- - ---------- - --------------------- ------------ -- -- ------- --------------- ---------- -- ------- ---------------- ---------- -- ---- --------------------- -- ---------------
监听另一个对象的事件
使用 listenTo 方法可以将一个对象的事件监听器添加到当前对象上。
-- -------------------- ---- ------- ----- ------ - --- -------- ----- ------ - --- -------- -- -- ------ - --- -- ----------------------- ------ ---------- - ------------------- - --- -------- --- -- -- ------ - --- -- ---------------------- -- --------- - --- -----
进阶使用
@use-pattern/event 的事件系统是可扩展的。可以通过继承 Event 类来创建自定义的事件系统，从而实现更多的功能。
-- -------------------- ---- -------
------ - ----- - ---- ---------------------
-- -- ----- ----------
----- ----------- ------- ----- -
------------- -
--------
------------- - ---
-
--------------- -
------------------------
---------------------------- -----
-
-
-- ---------
----- ----------- - --- --------------
-- -- ------------ --
------------------------------ ------------- -
---------------- ------- -------- -----
---
-- ----
-----------------------------------
-----------------------------------
-- ---
-- --- ------- ------ --------
-- --- ------- ------ --------总结
使用 @use-pattern/event 包提供的事件系统可以方便地管理事件以及事件流。同时，可以通过扩展 Event 类实现更多的功能，根据项目需要进行定制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f7e238a385564ab6aa5