简介
pico-signals
是一个小巧且易于使用的 JavaScript 事件接收/发送库,它能够让你在不同模块之间传递事件。它是工作流程图、状态机和实时协作的完美选择,将事件处理程序注册到不同的事件,然后发送事件。
安装
--- ------- ------------ ------
使用
引入:
----- ------- - ----------------------- -- -- --- ------ ------ ------- ---- --------------
发送事件:
----- -------- - --- --------- ------------------------ ------ --------- ----- ------------- ------------
接收事件:
---------------------- ----------------- - -- -------- --
进阶使用
一. 事件接收器
Signals
实例还可以作为事件接收器:
----- ------- - --- --------- -- ---- --------------------- --------------- -- ---- ------------------------ --------------- -- ------ ---------------
二. 事件命名空间
使用命名空间可以方便你区分事件处理器的不同
---------------------- -------------- ----------------- ---------------------- --------------- ------------------
三. 优先级
通过优先级可以决定事件处理程序的执行顺序。默认情况下,事件处理程序按它们的添加顺序执行。
---------------------- -------------- ---------------------- --------------- ----- ---- ---------------------- -------------- ----- --- -- -- ------- -- ------ -- ----- -------------- -------------- --------------
四. 条件执行
有时候你需要仅仅在某些条件下才执行事件处理程序。从 4.2
以后,你可以用规则字符串来限制条件:
---------------------- ------ ----- ----- -- - ----------------- ----- ----- -- ----- -- --- ---- - ------ -- -- ---------------- -- -- --------- ---------------------- ------ ------ -- - ----------------- ------ -- ----- -- ----- --- ----- -- -- ------------------ ---- ----------
信息:“伞兵”发射信号,可以有发射与接收信号的角色,在代码书写中发射角色一般用 mySignal,receiver接收角色一般用 signals,mySignal 是我们要创建的信号发射器,signals 是我们创建的信号接收器。在一个 JavaScript 应用程序中,您可能会同时使用多个 Signals 实例。
五. 写一个实际的例子
假设你有一个列表,其中某些元素是活动的,每当你单击列表中的任何可单击元素时,你需要做一些处理:
------ ------- ---- -------------- --- ------ - ---------------------------- --- -------- - ------------------------------------- --- -------- - --- --------- --- -------------- - --- --------- -------- ----------------------- - -- ---------------------------------------------- - --------------------------- -- ------------------ - - -------- ------------- ------ - -- ---------- - ----------------------------------- - ------------------------- -------- - ---- ---------------------------- - -------------------------------- ----------------- ------ ---------------- -- - ----------------- -- ------------- -- ------------------------ -- - -- ----------- --
以上代码解释:
在此示例中,单击切换列表项的活动状态。当单击列表项时,列表将引发单击事件 itemClickHandler
。 如果该元素是可单击的,则发射 mySignal
。 setActiveItem
将在被单击元素上设置 active
class。最后,isActiveSignal
将广播活动状态已更改的消息。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600671a730d0927023822612