Penpal 是一个允许你在不同页面、不同域名之间建立可靠通信的小型框架。在前端开发中，有时候我们会需要进行多页面通信，但是由于浏览器的同源策略，导致直接进行通信会变得非常困难。这时候 Penpal 就可以派上用场了。
在此篇文章中，我们将学习如何使用 Penpal 进行多页面间的通信，并通过包含示例代码展示 Penpal 的应用。
安装
Penpal 可以直接通过 NPM 安装：
npm install penpal
基本用法
Penpal 提供了两个组件：Promise 和 iframe。其中 Promise 组件可以创建一个 Promise，并将其传递给其他的 iframe 中进行调用；iframe 组件则可以将 Promise 进行响应。
按照如下步骤即可完成使用 Penpal 进行通信的基本架构。
在第一个页面中创建 Promise 组件
import Penpal from 'penpal';
const connection = Penpal.connectToChild({
url: 'http://frametwo.com/child.html',
methods: {
greet: name => `Hello, ${name}!`,
},
});这里，我们创建了一个连接到某子页面的 Penpal 实例，并定义了我们需要在子页面中进行调用的 greet 方法。其中，url 参数应当指向所需通信的子页面。
需要注意的是，Penpal 的方法只能以异步方式进行访问，并返回一个 Promise。
在第二个页面中接收并响应 Promise 组件
在子页面中，我们可以编写以下代码：
-- -------------------- ---- -------
------ ------ ---- ---------
------------------------
-------- -
------ ---- -- ------------------- -----------
--
------------------ -- -
-- ----------------
---这里，我们使用了 connectToParent 方法，让子页面连接到其父页面。同时，我们通过 methods 参数指定了父页面所需调用的 greet 方法，并在其中通过 console.log 输出了结果。
值得注意的是，我们还使用了 then 方法，以便等待连接成功后执行相关操作。
到这里，我们就成功地在两个页面之间建立了可靠通信的基础结构。
高级用法
尽管上述用法已经足够实现多页面间的通信，但是 Penpal 仍然支持更加高级的用法。
使用自定义事件
在 Penpal 中，除了使用 connectToChild 和 connectToParent 方法来与另一个页面进行通信外，还可以使用 createConnection 方法来手动创建一个连接对象。这个连接对象可以自定义触发名称，以实现更加灵活的通信方式。
-- -------------------- ---- -------
------ ------ ---- ---------
----- ---------- - -------------------------
-------- -
--------- -- -- --------
--
------- -
------- -------- -- -
------- - ---------
--
--
---
-------------------------- -- -
-- ------ ---------- ------
---在连接创建完成后，我们可以通过 connection 对象进行自定义事件的触发和响应。例如，在父页面中，我们可以编写如下代码：
-- -------------------- ---- -------
------ ------ ---- ---------
----- ---------- - -----------------------
---- ---------------------------------
-------- -
------------ ----- -- --------------------------------- -------
--
------- -
------------- -------- -- ------------------ ------- -- ---------------
--
---
-------------------------- -- -
-- ------ ---------- ------
---这里，我们定义了 updateValue 方法，用来触发子页面中的 updatedValue 事件。同时，在父页面中，我们还定义了 updatedValue 事件的处理函数。
通过使用自定义事件，我们可以实现更加细粒度、更加灵活的多页面通信模式。
反向通信
在前面的例子中，我们都是使用父页面向子页面传递数据和调用方法。不过，在 Penpal 中，还支持在子页面中向父页面进行调用和传递数据。
-- -------------------- ---- -------
------ ------ ---- ---------
----- ---------- - ------------------------
-------- -
--------- ---------- -- -----------------
--
---
-------------------------- -- -
-------------------------------------- -- -
-- --- ----- ------------
---
---在这个例子中，我们通过 send 方法向父页面发起一个请求，并等待它返回结果。通过这种方式，我们可以实现更加灵活的多页面通信。
示例代码
下面这个例子，展示了如何在两个并列页面之间使用 Penpal 进行双向通信。
父页面
-- -------------------- ---- -------
------ ------ ---- ---------
----- ---------- - -----------------------
---- -----------------------------------
-------- -
------------------- ----- -- ---
--
------- -
-------------------- -------- -- ---------------- ------- ------ --------------
--
---
-------------------------- -- -
----------------------- --------------
----- ------ - --------------------------------------------
--- ------- - --
-------------------------------- -- -- -
----------
----------------------------- -- -
------------------------------------ -- -
------------------- --------- -----------
---
---
---
-------------------
-------- ------- -- ------------------- ------- -------- ------------
---
------------------------------------ -------- -- -
------------------- -------- --- ------- ------ --------------
---
---子页面
-- -------------------- ---- -------
------
------
------- --------------
------ ------ ---- ---------
----- ---------- - ------------------------
-------- -
----------------- ----- -- -
------- -- ------
----------------------------------------- ---------
------ --------
--
--
------- -
-------- ---- -- ------------------ ------- -------- ----------
--
---
-------------------------- -- -
----------------------- --------------
----- ------ - -------------------------------------------
--- ------- - --
-------------------------------- -- -- -
----------
------------------------------------- -------------------- -- -
------------------- ---- ------- ------------
---
---
-------------------
------------------- ----- ------- -- -
------------------ -------- -------- ---- ---------
------- - ------
------ --------
-
---
-------------- -- -
----------------------------- ---------
-- ------
---
---------
-------
------
------- ---------------------------------------
------- ---------------------------------
-------
-------深入学习 Penpal，你可以获得更加强大的通信能力，帮助你在复杂的前端项目中实现适合的架构和组件设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f4f360e8250f93ef8900300