Web组件库 PubSubJS 消息发布订阅

郭顺发

发布于 2023-07-17 17:53:20

2330

发布于 2023-07-17 17:53:20

文章被收录于专栏：pandacode_cnpandacode_cn

前往 Github

1. PubSubJS 介绍

PubSubJS是一个用JavaScript编写的基于主题的发布/订阅库。

PubSubJS具有同步解耦，因此主题是异步发布的。这有助于保持程序的可预测性，因为在消费者处理主题时，主题的发起者不会被阻止。

对于冒险家来说，PubSubJS还支持同步主题发布。这可能会在某些环境中（浏览器，不是所有环境）加快速度，但也可能导致一些非常难以推理的程序，即一个主题触发同一执行链中另一个主题的发布。

单一流程

PubSubJS旨在用于单个进程，不是多进程应用程序（如Node.js – 具有许多子进程的集群）的好候选程序。如果您的Node.js应用程序是一个单一的进程应用程序，那么您就很好。如果它是（或将要）一个多进程应用程序，您可能最好使用redis Pub/Sub或类似

主要功能

无依赖项
同步解耦
ES3兼容。PubSubJS应该能够在可以执行JavaScript的任何地方运行。浏览器、服务器、电子书阅读器、旧手机、游戏机。
AMD/CommonJS模块支持
不修改订阅者（jQuery自定义事件修改订阅者）
易于理解和使用（感谢同步解耦）
小（略号），小于1kb的缩小和gzipped

2. 安装}}

有几种方法可以获取PubSubJS

通过npm安装（npm install pubsub-js）
- 通过yarn安装（yarn add pubsub-js）
直接从CDN使用
从GitHub下载标记版本

3. 导入

import PubSub from 'pubsub-js'

// or when using CommonJS
const PubSub = require('pubsub-js');

4. API 使用

4.1. 基本示例

//创建一个订阅主题的函数
var mySubscriber = (msg,data)=>{console.log(msg,data)}

// 将该功能添加到特定主题的订阅者列表中
// 我们保留了返回的令牌，以便能够取消订阅
// 从后面的主题开始
var token = PubSub.subscribe('MY TOPIC', mySubscriber);

//异步发布主题
PubSub.publish("MY TOPIC", "你好，世界！");

//同步发布主题，这在某些环境中更快，
// 但当一个主题触发了
// 相同的执行链
// 小心使用，这是龙！！！
PubSub.publishSync("MY TOPIC","你好，世界！");

4.2. 取消特定订阅

//创建一个函数来接收主题
var mySubscriber = (msg,data)=>{console.log(msg,data)}

//将该函数添加到特定主题的订阅者列表中
// 我们保留了返回的令牌，以便能够取消订阅
// 从后面的主题开始
var token = PubSub.subscribe('MY TOPIC', mySubscriber);

//取消订阅此订阅者此主题
PubSub.unsubscribe(token);

4.3. 取消功能的所有订阅

//创建一个函数来接收主题
var mySubscriber = (msg,data)=>{console.log(msg,data)}

//取消订阅mySubscriber的所有主题
PubSub.unsubscribe(mySubscriber);

4.4. 清除主题的所有订阅

PubSub.subscribe('a', myFunc1);
PubSub.subscribe('a.b', myFunc2);
PubSub.subscribe('a.b.c', myFunc3);

PubSub.unsubscribe('a.b');
// 没有关于“a.b”和“a.b.c”主题的进一步通知
//“a”的通知仍将发布

4.5. 清除所有订阅

PubSub.clearAllSubscriptions();
// 所有订阅均已删除

4.6. 获取订阅

PubSub.getSubscriptions('token');
// 按代币从所有主题订阅

4.7. 计数订阅

PubSub.countSubscriptions('token');
// 按所有主题的令牌计数

4.8. 错误处理

// isPublished是一个布尔值，表示是否有订阅者注册了此主题
var isPublished = PubSub.publish('a');

// 如果出现问题，且订阅者未注册，令牌将是假的
var token = PubSub.subscribe('MY TOPIC', mySubscriber);

4.9. 分层寻址

//创建一个订阅者，从主题层次结构中接收所有主题
var myToplevelSubscriber = 函数（msg，数据）{
    console.log（'顶层：'，msg，数据）；
}

//订阅“汽车”层次结构中的所有主题
PubSub.subscribe（“car”，myToplevelSubscriber）；

//创建一个订阅者，仅接收来自层次结构操作主题的叶子主题
var mySpecificSubscriber = function（msg，数据）{
    console.log('specific: ', msg, data);
}

// 仅订阅“car.drive”主题
PubSub.subscribe('car.drive', mySpecificSubscriber);

// 发布一些主题
PubSub.publish('car.purchase', {name: '我的新车'});
PubSub.publish('car.drive', {speed: '14'});
PubSub.publish('car.sell', {newOwner: '其他人'});

// 在这种情况下，将调用myToplevelSubscriber for all
//主题，总共三次
// 但是，mySpecificSubscriber只会被调用一次，因为它只
//订阅“car.drive”主题

5. 提示

对主题使用“常量”，而不是字符串文本。PubSubJS使用字符串作为主题，并将很高兴尝试将您的主题与任何主题一起交付。因此，当您进行错别字时，让JavaScript引擎抱怨，从而避免沮丧的调试。

5.1. 使用“常量”的示例

// 👎 坏的使用
PubSub.subscribe('hello', function (msg, data) {
	console.log(data)
});

PubSub.publish('hello', 'world');

// 👍 就得这么用
var MY_TOPIC = 'hello';
PubSub.subscribe(MY_TOPIC, function (msg, data) {
	console.log(data)
});

PubSub.publish(MY_TOPIC, 'world');

5.2. 使用ES6/7语法的“符号常数”示例

// event-types.js
export const MY_TOPIC = Symbol('MY_TOPIC')

// somefile.js
import { MY_TOPIC } from './event-types.js'
PubSub.subscribe(MY_TOPIC, function (msg, data) {
	console.log(data)
});

PubSub.publish(MY_TOPIC, 'world');