🚀pubsub-js

📅 2023/5/15

pubsub-js 试一个基于js的订阅发布库，PubSubJS 被设计为在单个进程中使用，不适合多进程应用程序。可以在vue、react等单页面应用中进行组件的通信。

npm install pubsub-js

//引入pubsub-js
import PubSub from 'pubsub-js'
//发布消息 （这里可以重复发布，如果该事件为第一次发布则返回true,非第一次返回false）
const first = PubSub.publish('message', 'hello htt!')
//订阅消息（这里重复订阅不会覆盖，则是会一起触发）
const token = PubSub.subscribe('message', function (msgName, data) {
    console.log( msgName, data ) //输出 message  hello htt
})
//根据token取消订阅
PubSub.unsubscribe(token)

//取消一个函数的所有订阅

//订阅接收到的处理函数
const mySubscriber = function(msg, data) {
    console.log(msg, data);
};
//订阅
const token = PubSub.subscribe('message', mySubscriber)
//根据token取消单个订阅
PubSub.unsubscribe(token);
//根据处理方法取消多个订阅
PubSub.unsubscribe(mySubscriber)

//取消一个事件名的所有订阅
PubSub.subscribe('a', myFunc1);
PubSub.subscribe('a.b', myFunc2);
PubSub.subscribe('a.b.c', myFunc3);

/*
  如果发布a事件，则会触发第一个订阅；
  如果发布a.b事件，则会触发第二个和第一个事件，触发顺序为先触发a.b,再触发a;
  如果发布a.b.c事件，则会触发第三个、第二个和第一个事件，触发顺序为先触发a.b.c,再触发a.b,最后触发a;
 */

//取消订阅
PubSub.unsubscribe('a') //取消a、a.b、a.b.c三个订阅
PubSub.unsubscribe('a.b') //取消a.b、a.b.c订阅
PubSub.unsubscribe('a.b.c') //取消a.b.c订阅

//这里按事件名称取消订阅只要事件名称包含取消事件中的字段则会取消，例如订阅事件名为message,取消事件名为messa 的订阅，会连同message 一起取消。我并不清楚这是否为该作者有意为之。

//取消所有订阅
PubSub.clearAllSubscriptions()
//获取所有订阅过的包含message字段的事件名称
PubSub.getSubscriptions('message')
//获取message事件订阅的次数，这里为严格匹配，mess事件不包括其中
PubSub.countSubscriptions('message')

建议使用常量来定义发布/订阅的消息事件名称。可以使用Symbol

// 定义常量 event-types.js
export const MY_TOPIC = 'MY_TOPIC' //常规定义
export const MY_TOPIC = Symbol('MY_TOPIC') //使用Symbol定义

// 引入常量使用 index.js
import { MY_TOPIC } from './event-types.js'
PubSub.subscribe(MY_TOPIC, function (msg, data) {
	console.log(data)
});

PubSub.publish(MY_TOPIC, 'world');