Npm 包 murmle 是一个轻量级的 JavaScript 库，可以在前端实现高效的消息传递。murmle 提供了一个简便的方式来将数据推送到其他页面，而无需设置服务器端的 WebSocket 或长轮询。本文将介绍如何使用 murmle 库，并提供示例代码以供参考。
安装
先进入到你的项目文件夹，在命令行中运行以下命令：
npm install murmle
初始化
在需要使用 murmle 的地方，引入 murmle 库并初始化一个新的 murmle 实例：
import murmle from 'murmle'; const myMurmle = murmle();
发送数据
要向其他页面发送消息，可以使用 send() 方法，该方法需要接收两个参数：
eventName- 要发送的事件名称data- 要发送的数据
以下是一个示例：
myMurmle.send('myEvent', {message: 'Hello, world!'});接收数据
要接收来自其他页面的消息，可以使用 on() 方法，该方法需要接收两个参数：
eventName- 要监听的事件名称callback- 当接收到事件时要运行的回调函数
以下是一个示例：
myMurmle.on('myEvent', (data) => {
console.log(data.message);
});在上面的代码中，当来自其他页面的 myEvent 事件被触发时，回调函数将在控制台中记录 Hello, world! 消息。
消息传递
murmle 还提供了在页面之间传递消息的便捷方法。要向其他页面发送消息，可以使用 postMessage() 方法。此外，还可以使用 onMessage() 方法来接收并处理消息。
以下是两个示例：
// 向其他页面发送消息
myMurmle.postMessage({message: 'Hello, other page!'});
// 监听其他页面发来的消息
myMurmle.onMessage((data) => {
console.log(data.message);
});总结
在本文中，我们学习了如何使用 murmle 包来实现前端页面之间的高效消息传递。首先，我们初始化了一个 murmle 版本，然后介绍了如何使用 send() 和 on() 两个方法发送和接收消息。最后，我们还看到了如何使用 postMessage() 和 onMessage() 方法在页面之间进行消息传递。通过使用 murmle，我们可以轻松构建高效的前端应用程序。
示例代码：https://codesandbox.io/s/murmle-demo-ktowz?file=/src/App.js
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e481e8991b448e0752