npm 包 pico-signals 使用教程

阅读时长 5 分钟读完

简介

pico-signals 是一个小巧且易于使用的 JavaScript 事件接收/发送库,它能够让你在不同模块之间传递事件。它是工作流程图、状态机和实时协作的完美选择,将事件处理程序注册到不同的事件,然后发送事件。

安装

使用

引入:

发送事件:

接收事件:

进阶使用

一. 事件接收器

Signals 实例还可以作为事件接收器:

-- -------------------- ---- -------
----- ------- - --- ---------

-- ----
--------------------- ---------------

-- ----
------------------------ ---------------

-- ------
---------------

二. 事件命名空间

使用命名空间可以方便你区分事件处理器的不同

三. 优先级

通过优先级可以决定事件处理程序的执行顺序。默认情况下,事件处理程序按它们的添加顺序执行。

四. 条件执行

有时候你需要仅仅在某些条件下才执行事件处理程序。从 4.2 以后,你可以用规则字符串来限制条件:

-- -------------------- ---- -------
---------------------- ------ ----- ----- -- -
  ----------------- ----- -----
-- ----- -- --- ---- - ------
-- -- ---------------- -- -- ---------

---------------------- ------ ------ -- -
  ----------------- ------
-- ----- -- ----- --- -----
-- -- ------------------ ---- ----------

信息:“伞兵”发射信号,可以有发射与接收信号的角色,在代码书写中发射角色一般用 mySignal,receiver接收角色一般用 signals,mySignal 是我们要创建的信号发射器,signals 是我们创建的信号接收器。在一个 JavaScript 应用程序中,您可能会同时使用多个 Signals 实例。

五. 写一个实际的例子

假设你有一个列表,其中某些元素是活动的,每当你单击列表中的任何可单击元素时,你需要做一些处理:

-- -------------------- ---- -------
------ ------- ---- --------------

--- ------ - ----------------------------
--- -------- - -------------------------------------

--- -------- - --- ---------
--- -------------- - --- ---------

-------- ----------------------- -
  -- ---------------------------------------------- -
    --------------------------- -- ------------------
  -
-

-------- ------------- ------ -
  -- ---------- -
    -----------------------------------
  -
  -------------------------
  -------- - ----
  ----------------------------
-

-------------------------------- ----------------- ------

---------------- -- -
  ----------------- -- -------------
--

------------------------ -- -
  -- -----------
--

以上代码解释: 在此示例中,单击切换列表项的活动状态。当单击列表项时,列表将引发单击事件 itemClickHandler 。 如果该元素是可单击的,则发射 mySignalsetActiveItem 将在被单击元素上设置 active class。最后,isActiveSignal 将广播活动状态已更改的消息。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600671a730d0927023822612

纠错
反馈