随着前端应用程序变得越来越复杂，需要在应用程序组件之间通信的需求也越来越常见。在许多情况下，我们可以使用 “发布 / 订阅” 模式来解决这个问题。幸运的是，我们可以使用一个名为 pubsubstar 的 npm 包来实现这个模式。
什么是 pubsubstar？
pubsubstar 是一个订阅发布模式的实现，它是一个轻量级的 JavaScript 库，可以使组件之间的沟通更加容易。这个库允许我们向任意数量的订阅者发送（“发布”）任意数量的主题（“事件”）。在 pubsubstar 中，订阅者（或监听器）可以注册自己，并在主题上进行监听以接收事件。
如何使用 pubsubstar？
首先，我们需要从 npm 安装 pubsubstar。
npm install pubsubstar
接下来，我们需要在我们的代码中引入它：
import PubSub from 'pubsubstar';
PubSub 实例的方法包括：
subscribe(topic: string, callback: Function): Function：可以在对象订阅一个给定的主题并在事件发生时执行回调。publish(topic: string, data?: any): void：可以发布一个给定的主题，以及可选的数据。unsubscribe(topic: string, callback: Function): void：可以取消订阅一个给定的主题。
我们可以通过以下方式来订阅和发布主题：
const subscription = PubSub.subscribe('myTopic', data => {
console.log(`Received ${data}`);
});
PubSub.publish('myTopic', 'Hello world!');
subscription.unsubscribe();在这个例子中，我们首先注册一个回调函数，它会在主题 myTopic 中发生任何事件时被调用。之后我们发布一个 myTopic 主题的事件，事件包含字符串 “Hello world!”。最后，我们取消订阅这个主题。
pubsubstar 案例
在以下案例中，我们将展示如何在两个组件之间使用 pubsubstar 进行通信。
首先，我们创建一个组件，将其命名为 Product，其代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -------------
----- ------- ------- --------------- -
--------------- - -- -- -
----------------------------- --------------------
--
-------- -
------ -
-----
----------------------------------
---------------------------------------
------- ---------------------------------- -- -------------
------
--
-
-
------ ------- --------在这里，我们创建了一个按钮，当用户将其点击时，将发布一个 ADD_TO_CART 的主题。触发该事件时，我们会将当前产品的信息作为数据项传递，以便其他组件能够访问这些信息。
接下来，我们创建第二个组件，将其命名为 Cart，其代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -------------
----- ---- ------- --------------- -
----- - -
--------- --
--
------------------- -
----------------- - ------------------------------- ------- -- -
--------------- --------- ------------------------ -------- ---
---
-
---------------------- -
--------------------------------
-
-------- -
------ -
-----
-------------
-------------------------------- -- -
---- -----------------
-----------------------
----------------------------
------
---
------
--
-
-
------ ------- -----在这里，我们创建一个状态，该状态将保存添加到购物车中的产品。在组件加载时，我们订阅 ADD_TO_CART 事件，当该事件发生时更新状态。在组件卸载时，我们取消订阅事件以避免内存泄漏。
现在我们可以在我们的应用程序中使用这两个组件了：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ------------
------ ---- ---- ---------
----- --- - -- -- -
-----
--------
---------- --- -- ----- -------- ------------ ------------ ------ --
--
--------
---------- --- -- ----- -------- ------------ ----- ------ --
--
----- --
------
--
------ ------- ----在上面的代码中，我们创建了两个产品组件和一个购物车组件，并将它们分别渲染到 DOM 中。当用户点击产品组件上的 “添加到购物车” 按钮时，将触发 ADD_TO_CART 事件，并将添加到购物车中的产品保存在 Cart 组件的状态中。最后，购物车组件向客户提供了在购物车中的所有产品列表。
结论
pubsubstar 提供了使用基于“发布 / 订阅” 模式进行通信的简单而强大的方式。通过使用这个库，我们可以更轻松地将组件连接在一起，并允许它们能够更灵活地交互。订阅发布模式是一个非常常见的设计模式，我们可以将其用于许多不同的应用程序场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731581e8991b448e9428