在前端开发中，我们经常需要进行跨页面或跨应用程序的通信。为了解决这个问题，一些开发人员使用了 PostMessage，但是使用起来并不是十分直观和容易，特别是在处理多个消息时。为了使这一过程更加高效和直观，我们介绍一个开源的 js 库 — @p4d/hermes。
@p4d/hermes 简介
@p4d/hermes 是一个基于发布订阅模式的 js 库，用于在 Web 应用程序中发送和接收消息。它既可以用于同一页面内的通信，也可以用于跨页面或跨域应用程序之间的通信。
以下是 @p4d/hermes 的一些特点：
- 简单易用：可以通过一些简单的 API 轻松安装、配置和使用
- 可定制：可以使用自己的插件来进行扩展并自定义其行为
- 独立：没有任何依赖关系，可以与各种框架和库一起使用
- 多途径支持：支持 WebSocket，PostMessage 和 LocalStorage 等多种通信方式
安装和启动 @p4d/hermes
通过 npm 安装 @p4d/hermes：
npm install @p4d/hermes --save
然后可以将其导入你的代码中：
import Hermes from "@p4d/hermes";
或者使用 require：
const Hermes = require("@p4d/hermes");订阅和发布消息
使用 @p4d/hermes 只需几个简单的步骤。第一步是创建一个 Hermes 实例：
const hermes = new Hermes();
创建 Hermes 实例后，你可以使用 hermes.subscribe(eventName, callback) 订阅你感兴趣的事件：
hermes.subscribe("login", () => {
console.log("User logged in");
});当其他地方的代码发布一个名为 "login" 的事件时，该函数将被调用。为了发布消息，你可以使用 hermes.publish(eventName, payload)：
hermes.publish("login", { username: "foo", password: "bar" });此时，订阅 "login" 事件的回调将被调用，并在控制台上打印"User logged in"。payload 参数是一个可选参数，可以将任何数据传递到订阅者回调函数中。
取消订阅消息
有时你可能需要取消指定事件的订阅。为此，你可以使用 hermes.unsubscribe(eventName, callback)：
const callback = () => {
console.log("User logged in");
};
hermes.subscribe("login", callback);
hermes.unsubscribe("login", callback);以上代码将订阅或取消订阅了 "login" 事件。
其他功能
多个 Handler
可以让多个处理程序处理同一个事件。这些处理程序将按照它们被添加到队列中的顺序依次执行。
-- -------------------- ---- ------- ------------------------- --------- -- - ------------------ --------- --------- --- ------------------------- --------- -- - ------------------- --------- --------- --- ----------------------- - --------- ------ --------- ----- ---
输出结果将是：
First handler { username: "foo", password: "bar" }
Second handler { username: "foo", password: "bar" }跨框架通信
@p4d/hermes 可以用于在跨框架（跨域）应用程序之间传递消息。对于这种情况，你需要设置 target 参数：
const hermes = new Hermes({ target: "http://example.org" });自定义监听器
你可以轻松地自定义监听器并使用自己的选择器。你只需要实现 HermesBaseListener 接口中的方法并传递选项：
-- -------------------- ---- -------
-------------------------------- --------- -- -
------ -
-----------
--------- ------- ------ -- -
----- ---- - -----------------------
------ ------------
--
--
---接下来，你就可以使用新选择器：
hermes.subscribe({ topic: "hermes-example", selector: "custom-selector" }, (data) => {
console.log(data);
});
hermes.publish({ topic: "hermes-example" }, { "hermes-example": "Hello World" });以上代码将使用自定义选择器进行跨框架通信。
示例代码
完整示例代码：
-- -------------------- ---- ------- -- -- --- ------ -- ------ ------ ---- -------------- ----- ------ - --- --------- ------------------------- --------- -- - ----------------- ------ ---- --------- --- ----------------------- - --------- ---------- --------- -------- --- -- -- -------- ------- -- ----- ------ - ----------------------- ----- ------ - --- --------- ------------------------- --------- -- - ----------------- ------ ---- --------- --- ----------------------- - --------- ---------- --------- -------- ---
总结
通过使用 @p4d/hermes，你可以轻松地添加跨页面、跨应用程序或跨域通信功能，而无需使用庞大的方案或语法冗长的 PostMessage API。由于 @p4d/hermes 是一个轻量级库并且没有任何依赖项，因此你可以在任何项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005593781e8991b448d6a65