什么是 browser-pubsub
browser-pubsub 是一个轻量级的 JavaScript 库，它提供了一种简单的机制来让 Web 应用程序中的不同部分间进行通信。
PubSub 是一个基于"发布订阅"模式的库。它是通过一个全局的 PubSub 对象来实现的，发布者通过调用 PubSub.publish(channel, message) 来向一个频道发布消息，订阅者通过调用 PubSub.subscribe(channel, function) 来订阅某个频道的消息。这种设计模式支持松散耦合和去耦合，并且使代码更容易理解和维护。
browser-pubsub 可以在多个浏览器窗口、标签页、甚至不同的浏览器中进行通信。在这些情况下，它使用了 PostMessage API，它可以让浏览器窗口间进行异步通信。
安装
使用 npm 安装：
$ npm install --save browser-pubsub
基本用法
首先，在需要使用的文件中引入 PubSub 对象：
const PubSub = require('browser-pubsub');发布消息
使用以下命令将消息发布到一个频道：
PubSub.publish('channel', 'message');"message" 参数可以是任意的 JavaScript 对象，以便在应用程序的其他部分中处理。
订阅消息
要监听一个频道的特定类型的消息，使用以下命令：
PubSub.subscribe('channel', function(message) {
console.log(message);
});如果您的消息处理程序需要处理来自多个发布者的消息，则可以使用以下代码：
-- -------------------- ---- -------
--------------------------- ----------------- ----- -
--------------------- -------- -------------
---
--------------------------- ----------------- ----- -
--------------------- -------- -------------
---
------------------------- -------- ----- -------这将在两个订阅者之间打印出以下内容：
"Sub-1: John Doe" "Sub-2: John Doe"
取消订阅
如果您需要取消已订阅的频道，请使用以下命令：
PubSub.unsubscribe('channel', handler);在这里，"handler" 是用来处理接收到的消息。
高级用法
除了上面介绍的基本用法之外，browser-pubsub 还可以使用 PostMessage 进行跨浏览器通信。
跨浏览器通信
要启用跨浏览器通信，您需要在所有窗口中使用相同的域名。例如，在本地开发期间，您可以在窗口 localhost:3000 中打开应用程序，然后在 localhost:3001 中打开另一个窗口。这些窗口中的所有脚本都需要使用同一 URL。
您还需要为将要连接的所有窗口启用跨源访问：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ---------
--------
---------------------------------- --------------- -
-------------------- ---- ------ ---- ------------
---
---------
-------
------
------- ---------------------- ------- -- ------ ----------
--------
--- ----------- - --------------
--- ------ - ----------------------------------------
-------------------------------- ---------- -
-------------------- ------- -- ------ ----
------------------------------ ---- ------ ---- -----
---
---------
-------
--------- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ---------
--------
---------------------------------- --------------- -
-------------------- ---- ------ ---- ------------
------------------------------- ---- ------ ---- --------------
---
---------
-------
------
------- ---------------------- ------- -- ------ ----------
--------
--- ----------- - --------------
--- ------ - ----------------------------------------
-------------------------------- ---------- -
-------------------- ------- -- ------ ----
------------------------------ ---- ------ ---- -----
---
---------
-------
-------该示例中的按钮通过调用 postMessage() 广播了一条消息。当事件被接收到时，窗口 2 会向发送窗口回发另一条消息。
window.postMessage(message, target);
这个函数接受两个参数：
- message – 需要广播的消息，可以是任意 JSON 格式的对象。
- target – 目标窗口的 URL，可以是 '*'，它表示可以发送到任意窗口。
代码示例
让我们以一个更实际的示例来说明 browser-pubsub 如何使用“发布订阅”模式进行通信。
在这个示例中，我们将创建一个任务清单应用程序，让用户可以添加、编辑和删除任务。我们将使用 browser-pubsub 库来通知其他部分更改。
首先，我们需要设置一个 PubSub 对象：
const PubSub = require('browser-pubsub');接下来，我们将创建一个 view-module，它将渲染任务清单和提供一些操作元素，如添加、编辑和删除：
-- -------------------- ---- -------
-- --------------
----- ------ - --------------------------
----- ---------- -
--------------- -
------- - ---
-
-------------- -
--- ---- - ---
--- ---- ---- -- ------ -
---- -- -
----
------ --------------- --------------- ----------- - --------- - ----
------ ---------------- ------------------ - ------ - --------------------------
------- ------------- ------------------ ----------------------------------
------- ------------- -------------------- ------------------------------------
-----
--
-
----------------- - -----
--------------------------------- - -- -
--- ------ - ---------
----- --------------- --- --------- -
------ - ------------------
-
----- ------ - -----------------------------------
----- -- - -------------------------------
-- -------- -- ---- -
-------
-
-------------------------- -------- -----
---
-
-
-------------- - -----------在这个例子中，我们使用了如下的发布者：
PubSub.publish('TaskList', {action, id});这里的 "TaskList" 是我们的通道名称 (channel)，它指定了我们将要发布到的消息队列，"action" 和 "id" 是我们的消息信息。
接下来，我们将创建一个数据存储模块来处理数据持久化和任务管理：
-- -------------------- ---- -------
-- --------------
----- ------ - --------------------------
----- ---------- -
------------- -
---------- - ----------------------------------------- -- ---
-------- - ---------------------------- ---- -- -
----- -------- --- - -----
-- ------- --- ------ -
---------------
- ---- -- ------- --- --------- -
------------------
- ---- -- ------- --- ------- -
----------------
-
----------------------------- ----------------------------
---
-
--------- -
----- ----- - ----------- - -------
-- -------- -
-------
-
----- -- - ----------------------
----------------------- --- ----- --------
-----------------------------------
-
-------------- -
---------- - ---------------------- -- ------- --- ----
-----------------------------------
-
------------ -
----- -------- - ------------ --- -------
-- ----------- -
-------
-
----- ----- - ------------------------- -- ------- --- ----
-- ------ - -- -
-------
-
----------------------- - ---------
-----------------------------------
-
---------- -
------ -----------
-
------------- -
-----------------------------
-
-
-------------- - -----------在这个例子中，我们使用以下代码订阅来自 view-module 的消息：
-- -------------------- ---- -------
-------- - ---------------------------- ---- -- -
----- -------- --- - -----
-- ------- --- ------ -
---------------
- ---- -- ------- --- --------- -
------------------
- ---- -- ------- --- ------- -
----------------
-
----------------------------- ----------------------------
---在订阅器函数中，我们将根据不同的操作类型执行不同的任务。例如，在 "add" 操作中，我们将提示用户添加一个新任务，然后创建一个新任务对象并将其添加到任务列表中。
通过 PubSub.publish('TaskList:display') 函数，我们告诉 view-module 显示最新的任务列表。
最后，我们将在应用程序的入口点中使用这些模块：
-- -------------------- ---- ------- -- ------ ----- ---------- - ------------------------- ----- ---------- - ------------------------- ----- -- - ------------------------------------- ----- ---- - --- ------------- ----- ---- - --- --------------- -------- ------------ - ----- ----- - ---------------- -------------------- - ------------------------------------ ------------ -------------
在这个例子中，我们创建了 data-module 和 view-module，并从数据模块中获取任务，然后在 view-module 中呈现它们。通过 PubSub.subscribe('TaskList:display', updateList) 函数，我们将订阅来自 data-module 中发布的 "TaskList:display" 消息，并在更新列表时调用 updateList()。
在这个示例中，我们演示了如何使用 browser-pubsub 来进行简单的数据通信，从而使 Web 应用程序更具动态性和用户友好性。
总结
在本文中，我们学习了如何使用 browser-pubsub 库来实现基于发布订阅模式的简单数据通信，从而实现了一个基本的任务清单应用程序。使用这个库，您可以将应用程序分成清晰的模块并缩小模块间的耦合度。我们已经掌握了如何发布、订阅和取消订阅消息，以及如何在跨浏览器应用程序中使用它们。我希望这篇文章可以为您在 Web 开发中使用 browser-pubsub 库提供一个良好的指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde519c