在前端开发过程中，经常会涉及到消息传递和通信问题。这时候，使用 messenger-lib 这个 npm 包就可以轻松解决了。本篇文章将介绍该包的使用教程，包括安装、引入、基本使用和高级用法等。
安装
在命令行中输入以下指令来安装 messenger-lib：
npm install messenger-lib
或者也可以通过 yarn 来安装：
yarn add messenger-lib
引入
安装完成后，在需要使用的文件中，可以通过以下方式引入：
import Messenger from 'messenger-lib';
基本使用
messenger-lib 的基本使用非常简单，只需要创建一个 Messenger 实例并调用其方法即可。
下面是一个简单的示例，通过 Messenger 实例向另一个页面发送消息：
-- -------------------- ---- ------- -- ------- ----- --------- - --- ------------ ----------------------------------- --------------------- ---- --------- -- ------- ----- --------- - --- ------------ ---------------------- -- - ----------------- -- ------ ---- ------- --- --------------------------------------------------------------------
在发送消息的页面中，首先创建了一个 Messenger 实例，然后通过 addTarget 方法设置消息接收者，最后通过 send 方法发送消息。
在接收消息的页面中，也创建了一个 Messenger 实例，在 listen 方法中监听消息，并通过 addTarget 方法设置消息发送者。
这里使用的是 window.parent 和 document.querySelector('iframe').contentWindow，即上下文窗口和 iframe 窗口。实际开发中，可以根据具体需求设置消息的发送者和接收者。
高级用法
除了基本用法外，messenger-lib 还提供了一些高级用法，如消息路由、 promise 化等。
消息路由
如果需要在多个页面之间传递消息，可以使用 messenger-lib 的路由功能。在消息发送的时候，可以指定传递的路线，即路由，而消息接收方在接收到消息后，也可以根据消息中的路由信息，将消息转发给下一个接收方。
以下是一个简单的路由示例：
-- -------------------- ---- -------
-- -------
----- --------- - --- ------------
-----------------------------------
-------------------------------
--------------------- ---- ---------
-- ---
----- --------- - --- ------------
---------------------- ------ -- -
-- ------------- --- - -- -------- --- --------- -
------------------------------------
--------------------
-
---
---------------------------------- - -------- ---- ---
-- -------
----- --------- - --- ------------
---------------------- -- -
----------------- -- ------ ---- -------
---
--------------------------- - -------- ---- ---
------------------------------------- - -------- ---- ---
------------------------------------在这个示例中，通过 setRoute 方法设置了消息的路由，即从 child 传递到 parent，然后从 parent 传递到 grandparent。实际开发中，可以根据需求设置不同的路由。
promise 化
如果需要在消息发送方接收到消息接收方的响应后再继续执行后面的代码，可以使用 promise 化的方式。
以下是一个使用 promise 化的示例：
-- -------------------- ---- -------
-- -------
----- --------- - --- ------------
-----------------------------------
-----------------------------
----------- -- -
----------------- -- ------
---
-- -------
----- --------- - --- ------------
---------------------- -- -
-- ---- --- ------- -
------------------------
-
---
--------------------------------------------------------------------在这个示例中，通过 sendPromise 方法发送消息，并通过 then 方法等待接收到消息接收方的响应。在接收到消息后，接收方通过 reply 方法发送响应消息。
总结
通过上面的介绍，我们可以发现，messenger-lib 是一个非常方便的 npm 包，能够轻松解决前端开发中的消息传递和通信问题。在使用时，我们可以根据具体需求灵活设置消息的发送者和接收者，以及路由信息、 promise 化等高级用法，使得消息传递更加高效和可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005598581e8991b448d7195