npm 包 @geut/chan 使用教程

在前端开发过程中，经常会用到 npm 包来管理项目依赖。@geut/chan 是一个 JavaScript 库，它提供了一种简单易用的消息传递方式，类似于浏览器中的 window.postMessage。本文将介绍如何使用 @geut/chan 来完成消息传递。

安装

使用 npm 安装 @geut/chan：

npm install @geut/chan

基本用法

使用 @geut/chan 可以创建两种角色：发布者和订阅者。发布者通过 createPublisher 方法创建一个实例，订阅者通过 createSubscriber 方法创建一个实例。

发布者

import Chan from '@geut/chan';

const chan = Chan.createPublisher('my-channel');

chan.publish('hello');

以上代码通过 createPublisher 方法创建了一个名为 my-channel 的发布者实例，然后向订阅者发送了一条消息 hello。

订阅者

import Chan from '@geut/chan';

const chan = Chan.createSubscriber('my-channel');

chan.subscribe((data) => {
  console.log(`Received data: ${data}`);
});

以上代码通过 createSubscriber 方法创建了一个名为 my-channel 的订阅者实例，然后通过 subscribe 方法来监听消息。当发布者发送消息时，订阅者的回调函数将被调用，打印出 Received data: hello。

高级用法

消息过滤器

@geut/chan 支持使用消息过滤器来过滤消息和订阅条件。当发布者发送消息时，它可以选择只将特定的消息发送给符合特定条件的订阅者。订阅者也可以选择只接收特定类型的消息。

import Chan from '@geut/chan';

const chan = Chan.createPublisher('my-channel');

chan.publish({ type: 'test', data: 'hello' });
chan.publish({ type: 'other', data: 'world' });

以上代码发送了两条消息，{ type: 'test', data: 'hello' } 和 { type: 'other', data: 'world' }。

import Chan from '@geut/chan';

const chan = Chan.createSubscriber('my-channel');

chan.subscribe(({ type, data }) => {
  console.log(`Received ${type} data: ${data}`);
}, { type: 'test' });

以上代码创建了一个只接收 type 为 test 的消息的订阅者。当发布者发送 { type: 'test', data: 'hello' } 消息时，订阅者的回调函数将被调用，打印出 Received test data: hello。

错误处理

如果消息发布或订阅由于任何原因失败，@geut/chan 可以通过 onError 回调函数来报告错误。

-- -------------------- ---- -------
------ ---- ---- -------------

----- ---- - -----------------------------------

------------------ -- -
  --------------------- ---------
---

----------------------

以上代码创建了一个发布者，并在消息发布失败时打印出错误信息。

总结

@geut/chan 提供了一种简单易用的方式来进行不同实例之间的消息传递。通过高级用法中的消息过滤器和错误处理，可以更精细地控制消息的传递和处理。希望本文能够对您了解 @geut/chan 的使用方法有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb465b5cbfe1ea0611271