npm 包 browser-pubsub 使用教程

什么是 browser-pubsub

browser-pubsub 是一个轻量级的 JavaScript 库，它提供了一种简单的机制来让 Web 应用程序中的不同部分间进行通信。

PubSub 是一个基于"发布订阅"模式的库。它是通过一个全局的 PubSub 对象来实现的，发布者通过调用 PubSub.publish(channel, message) 来向一个频道发布消息，订阅者通过调用 PubSub.subscribe(channel, function) 来订阅某个频道的消息。这种设计模式支持松散耦合和去耦合，并且使代码更容易理解和维护。

browser-pubsub 可以在多个浏览器窗口、标签页、甚至不同的浏览器中进行通信。在这些情况下，它使用了 PostMessage API，它可以让浏览器窗口间进行异步通信。

安装

使用 npm 安装：

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

基本用法

首先，在需要使用的文件中引入 PubSub 对象：

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

发布消息

使用以下命令将消息发布到一个频道：

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

"message" 参数可以是任意的 JavaScript 对象，以便在应用程序的其他部分中处理。

订阅消息

要监听一个频道的特定类型的消息，使用以下命令：

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

如果您的消息处理程序需要处理来自多个发布者的消息，则可以使用以下代码：

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

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

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

这将在两个订阅者之间打印出以下内容：

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

取消订阅

如果您需要取消已订阅的频道，请使用以下命令：

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

在这里，"handler" 是用来处理接收到的消息。

高级用法

除了上面介绍的基本用法之外，browser-pubsub 还可以使用 PostMessage 进行跨浏览器通信。

跨浏览器通信

要启用跨浏览器通信，您需要在所有窗口中使用相同的域名。例如，在本地开发期间，您可以在窗口 localhost:3000 中打开应用程序，然后在 localhost:3001 中打开另一个窗口。这些窗口中的所有脚本都需要使用同一 URL。

您还需要为将要连接的所有窗口启用跨源访问：

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

该示例中的按钮通过调用 postMessage() 广播了一条消息。当事件被接收到时，窗口 2 会向发送窗口回发另一条消息。

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

这个函数接受两个参数：

  • message – 需要广播的消息，可以是任意 JSON 格式的对象。
  • target – 目标窗口的 URL，可以是 '*'，它表示可以发送到任意窗口。

代码示例

让我们以一个更实际的示例来说明 browser-pubsub 如何使用“发布订阅”模式进行通信。

在这个示例中，我们将创建一个任务清单应用程序，让用户可以添加、编辑和删除任务。我们将使用 browser-pubsub 库来通知其他部分更改。

首先，我们需要设置一个 PubSub 对象：

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

接下来，我们将创建一个 view-module，它将渲染任务清单和提供一些操作元素，如添加、编辑和删除：

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

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

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

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

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

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

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

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

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

在这个例子中，我们使用了如下的发布者：

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

这里的 "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

阅读全文

猜你喜欢

  • npm 包 browser-resolve-cli 使用教程

    什么是 browser-resolve-cli browser-resolve-cli 是一个基于 browser-resolve 的命令行工具。browser-resolve 是 Node.js 中...

    4 年前
  • npm 包 browser-resolve-noio 使用教程

    随着前端技术的不断发展，我们使用的代码越来越复杂。在我们的前端项目中，有很多时候我们需要引入一些第三方的库来帮助我们完成我们的工作。npm 是一个很好的包管理工具，它可以让我们方便地引入和安装第三方的...

    4 年前
  • npm 包 browser-resolve-sync 使用教程

    前言 在前端开发中，我们需要使用很多第三方库来完成我们的工作，而前端的包管理工具 npm 就给我们提供了很方便的方式来管理这些第三方库。但通常我们在编写代码时都需要使用这些第三方库的一些模块或函数，这...

    4 年前
  • npm 包 browser-resource 使用教程

    在前端开发中，我们常常需要加载各种资源文件，比如图片、脚本、样式等。为了提高资源的加载速度和效率，我们可以使用优化工具，最常用的就是 webpack 和 gulp。

    4 年前
  • npm 包 browsery-cache-fly 使用教程

    前言 在前端开发中，优化页面性能是一个很重要的方向。其中一个重要的组成部分就是页面的缓存技术。在浏览器端，我们可以使用浏览器缓存来存储静态资源，从而提高页面加载速度。

    4 年前
  • npm 包 browster 使用教程

    在前端开发中，需要经常运用到不同的第三方工具和库，这些工具和库帮助我们提高开发效率和代码可读性。其中， browster 是一款十分实用的 npm 包，可以帮助开发者轻松实现浏览器UA检测。

    4 年前
  • npm 包 browsyquire 使用教程

    前端开发中，经常需要模拟 DOM 环境来测试代码，这时候就需要使用 Node.js 的 jsdom 库。但是，有时候我们只想测试单个脚本文件，不想运行整个测试框架。

    4 年前
  • npm 包 broxjs 使用教程

    什么是 broxjs？ broxjs 是一个轻量级的前端库，用于管理 JavaScript 中的状态。它通过将状态捆绑到视图层中的节点，使得状态管理变得简单而直观。

    4 年前
  • npm 包 brp 使用教程

    前言 在前端开发中，我们经常需要对文本进行处理，例如去除空格、转换大小写等。而在 Node.js 中，我们可以使用正则表达式对文本进行处理。但是正则表达式语法比较复杂，难以理解和使用。

    4 年前
  • npm 包 brp-template 使用教程

    brp-template 是一个基于 Node.js 平台的 npm 包，它提供了一种简单易用的方式来快速创建网站的基础模板。它适用于任何站点类型和规模，从简单的个人博客到复杂的企业网站。

    4 年前
  • NPM 包 brjade 使用教程

    1. 什么是 brjade？ brjade 是一款基于 Jade 模板语言和 Bootstrap 框架的 HTML 静态网站快速生成器。它能够轻松地将基于 Jade 模板语言编写的静态网页转换为 HT...

    4 年前
  • npm包brkontru使用教程

    随着前端应用的飞速发展，npm成为承载JavaScript应用的一个重要平台。npm包使得开发人员能够在项目中快速地实现一些功能，避免重复造轮子。本教程将为你介绍一款npm包——brkontru，并详...

    4 年前
  • npm 包 brkstn-grid-cssnext 使用教程

    前言 现代化的前端开发已经离不开 npm 包的使用。而且，有了 npm 包的搭档 webpack 和 babel，我们可以愉快地进行最新技术的尝试，构建出更加现代化、简明化的代码。

    4 年前
  • npm 包 brm 使用教程

    在前端开发中，我们经常需要在页面中使用富文本编辑器，以便用户可以方便地编辑和排版内容。而 brm 就是一款常用的富文本编辑器，它可以帮助我们快速构建出漂亮的富文本编辑器。

    4 年前
  • npm 包 brms-pirate 使用教程

    简介 brms-pirate 是一个开源的 npm 包，可以用于在前端项目中实现多语言支持。它提供了一种简单易用的方式，可以让你的项目快速实现国际化。 安装 使用 npm 进行安装。

    4 年前
  • npm 包 bro 使用教程

    前言 在前端开发领域，我们经常需要对浏览器进行兼容性处理。但是不同浏览器对 JavaScript 的行为表现可能会存在一定差异，这就导致了前端开发人员需要对代码进行不同浏览器下的测试。

    4 年前
  • npm 包 brp-depend 使用教程

    前言 在前端开发中，我们常常需要在项目中引入各种外部资源库，如 jQuery、React、Vue 等等。而这些外部资源的管理则需要借助 npm 包管理工具进行完成。

    4 年前
  • npm 包 brp-hjson 使用教程

    简介 brp-hjson 是一个用于 JavaScript 和 Node.js 的轻量级 HJSON 解析器。它支持 HJSON 格式的所有特性，并且可以将 HJSON JSON 化。

    4 年前
  • npm 包 browser-selected-text 使用教程

    在前端开发中，经常会遇到需要获取用户在网页中所选文本的需求。npm 包 browser-selected-text 可以帮助我们快速地实现这个功能，并且还提供了一些其他的选中文本操作。

    4 年前
  • npm 包 simple-number-suffix 使用教程

    在日常前端开发中，我们经常需要将数字转换为包含数字后缀的字符串，例如我们需要将数字 1000 转换为 1K，将数字 1000000 转换为 1M。为了方便开发，npm 社区中出现了许多实现这类功能的库...

    4 年前

相关推荐

    暂无文章