在前端开发中，有时候需要在不同的组件或页面之间传递数据，而这时我们就需要使用到 PubSub（发布-订阅）模式。而在实现 PubSub 的过程中，可以使用 npm 包 @changyan/pubsub ，它是一个轻量、易用、无依赖的 PubSub 实现，本文将为大家详细介绍如何使用这个 npm 包。
安装
使用 npm 安装：
--- ------- ---------------- ------
使用
引入
------ ------ ---- ------------------
或者使用 require 导入：
----- ------ - ---------------------------
订阅
-------------------------- ------ -- - --------------------- ----- --
以上代码表示订阅了名为 topic1 的主题，并且在接收到该主题的消息时，会将数据打印到控制台。
如果要订阅多个主题，可以使用数组的方式：
--------------------------- ---------- ------ -- - --------------------- ----- --
以上代码表示订阅了名为 topic1 和 topic2 的两个主题。
发布
------------------------ ------ -------
以上代码表示发布 topic1 主题，并传递了一个字符串参数 hello world。
如果要发布多个主题，可以使用循环的方式：
---------- ------------------------- -- - --------------------- ------ ------- --
以上代码表示发布了 topic1 和 topic2 两个主题。
取消订阅
当需要取消对某个主题的订阅时，可以使用 unsubscribe 方法：
----- -------- - ------ -- - --------------------- ----- - -------------------------- --------- ---------------------------- ---------
以上代码表示取消订阅了名为 topic1 的主题，并且取消了 callback 回调函数。
一次性订阅
当只需要接收到一次某个主题的消息时，可以使用 once 方法：
--------------------- ------ -- - --------------------- ----- -- ------------------------ ------ ------- ------------------------ ------ -------
以上代码表示订阅了名为 topic1 主题，并且只会在接收到一次消息时输出日志。
示例代码
下面是一个示例代码，它演示了如何使用 @changyan/pubsub 实现组件之间的通信：
-- ----------
------ ------ ---- ------------------
------ ------- -
-------- -
------ -
------------------------- -------------
------------ - --
-
-
-
-- ------------
------ ------ ---- ------------------
------ ------- -
------ -
------ -
-------- --
-
--
--------- -
--------------------------- ------ -- -
------------ - ----
--
-
-以上代码分别定义了一个发送者组件 Sender 和一个接收者组件 Receiver，发送者组件负责发布名为 message 的主题，接收者组件则订阅该主题并接收数据。这样两个组件就可以进行数据通信了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005629f81e8991b448dfcc1