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