前言
在前端开发中，我们经常会遇到需要跨页面或跨域通信的情况。其中一种解决方案就是使用 postMessage 进行双向通信。但是在实际开发中，我们需要自己编写一些复杂的逻辑和代码去处理 postMessage。这时候，@jurca/post-message-rpc 这个 npm 包就派上用场了。
@jurca/post-message-rpc 是一个基于 postMessage 的远程过程调用（RPC）框架，可以简化 postMessage 的实现过程，使我们可以更方便地进行跨页面或跨域通信。
安装
@jurca/post-message-rpc 可以直接通过 npm 安装：
npm install @jurca/post-message-rpc
用法
创建服务端
在服务端页面中，我们需要先创建一个 @jurca/post-message-rpc 实例，并且指定该实例为服务端，代码如下：
import { PostMessageServer } from '@jurca/post-message-rpc';
const server = new PostMessageServer({
name: 'server', // 实例名称
window: window, // 使用当前 window 作为目标 window
allowedOrigins: ['*'], // 允许所有域名进行通信
});在上面的代码中，我们通过指定 window 属性来指定目标 window，allowedOrigins 属性指定了允许通信的域名。这里我们指定了所有域名都可以进行通信，但在实际开发中，我们应该根据实际情况进行限制。
接下来，我们需要为服务端实例添加方法：
server.addMethod('add', (a, b) => a + b);在上面的代码中，我们添加了一个名为 'add' 的方法，该方法接受两个参数，并返回它们的和。
现在我们已经成功创建了一个 @jurca/post-message-rpc 的服务端，可以接受客户端发送过来的请求。
创建客户端
在客户端页面中，我们同样需要创建一个 @jurca/post-message-rpc 实例，但是这次需要指定该实例为客户端，代码如下：
import { PostMessageClient } from '@jurca/post-message-rpc';
const client = new PostMessageClient({
name: 'client', // 实例名称
window: window.parent, // 使用 parent window 作为目标 window
allowedOrigins: ['*'], // 允许所有域名进行通信
});在上面的代码中，我们通过指定 window 属性来指定目标 window，同样也指定了允许通信的域名。需要注意的是，客户端需要通过 window.parent 来获取到父级 window，因为在 postMessage 中，子页面并不能直接访问父级页面的 window 对象。
现在我们已经创建了一个 @jurca/post-message-rpc 的客户端实例，可以向服务端发送请求。以调用 'add' 方法为例：
client.invokeMethod('add', [1, 2]).then((result) => {
console.log(result); // 3
});在上面的代码中，我们使用 invokeMethod 方法来调用服务端的 'add' 方法，并传入两个参数。当服务端成功响应请求后，then 方法中将收到该方法的返回值。
完整示例
服务端代码：
-- -------------------- ---- ------- ------ - ----------------- - ---- -------------------------- ----- ------ - --- ------------------- ----- --------- ------- ------- --------------- ------ --- ----------------------- --- -- -- - - ---
客户端代码：
-- -------------------- ---- ------- ------ - ----------------- - ---- -------------------------- ----- ------ - --- ------------------- ----- --------- ------- -------------- --------------- ------ --- -------------------------- --- ----------------- -- - -------------------- -- - ---
总结
@jurca/post-message-rpc 提供了一种简单的方式来实现基于 postMessage 的远程过程调用（RPC），可以方便地进行跨页面或跨域通信。在实际开发中，我们可以利用该框架来简化和优化我们的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/91826