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

PubSubJS 有同步解耦，所以主题是异步发布的。这有助于使您的程序保持可预测性，因为在消费者处理主题时，主题的发起者不会被阻止。 对于喜欢冒险的人，PubSubJS 还支持同步主题发布。这可以在某些环境（浏览器，不是全部）中提供加速，但也可能导致一些非常难以推理的程序，其中一个主题触发同一执行链中另一个主题的发布。

主要特点

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

基本使用

首先，让我们来看看如何使用 pubsub.js 进行消息的发送与接收。首先，我们需要引入库：

import PubSub from "pubsub-js";

然后，在需要发送消息的地方，我们可以使用 publish 方法：

// 发布一个名为 'testEvent' 的事件，并带上数据
let data = { name: 'John Doe' };
PubSub.publish('testEvent', data);

而在需要接收消息的地方，我们需要先使用 subscribe 方法进行订阅：

// 订阅名为 'testEvent' 的事件
let subscription = PubSub.subscribe('testEvent', function(message, data) {
    console.log("Received data:", data.name);
});
// 当不再需要接收消息时，记得取消订阅
PubSub.unsubscribe(subscription);

以上就是一个简单的消息订阅发布流程。

一些使用场景

比如：状态。

// 可以外部变更组件内状态
pubsub.publish(STATE_UPDATED_EVENT, newState);

// 在其他组件中订阅该事件以获得新状态
pubsub.subscribe(STATE_UPDATED_EVENT, (newState) => {
    this.setState(newState);
});

事务处理。

// 当异步操作完成时发布事件

function subscribeTransaction() {
  var subscription = PubSub.subscribe("transaction_start", async function(message, data) {
    try {
      // 处理事务...
      await someAsyncOperation();
      await someOtherAsyncOperation();
      resolve(true);
    } catch(e) {
      reject(e);
    }
  });

可以设置主题。

import react, { useState, useEffect } from 'react';
import PubSub from 'pubsub-js';

function App() {
  const [theme, setTheme] = useState('default');

  const handleThemeChange = (nextTheme) => {
    setTheme(nextTheme);
  };

  useEffect(() => {
    const subscription = PubSub.subscribe('theme-change', handleThemeChange);
    return () => {
      PubSub.unsubscribe(subscription);
    };
  }, []);

  return (
    <div>
      <h1>Current theme: {theme}</h1>

      {/* 主题切换按钮 */}
      <button onClick={() => PubSub.publish('theme-change', 'dark')}>
        Switch to dark mode
      </button>

      {/* 这个组件会随着主题改变而变 */}
      <ThemedFunctionComponent theme={theme} />
    </div>
  );
}

function ThemedFunctionComponent({ theme }) {
  useEffect(() => {
    console.log('Theme changed to:', theme);
  }, [theme]);

  return (
    <div style={{ color: theme === 'dark' ? '#fff' : '#000' }}>
      This is the themed component.
    </div>
  );
}

export default App;

React 的小伙伴还可以封装一个自定义 Hooks 来更简洁的使用它。

订阅完之后，别忘了取消订阅。

取消特定订阅

var mySubscriber = function (msg, data) {
    console.log(msg, data);
};

var token = PubSub.subscribe('MY TOPIC', mySubscriber);

PubSub.unsubscribe(token);

取消某个函数的所有订阅

var mySubscriber = function(msg, data) {
    console.log(msg, data);
};

PubSub.unsubscribe(mySubscriber);

取消某个主题的订阅

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 `的通知仍然会被发布

清楚所有订阅

PubSub.clearAllSubscriptions();
// 所有订阅都被删除

订阅计数

PubSub.countSubscriptions('token');

PubSub.js 通过发布/订阅模式实现实现组件间的解耦合，可以减少代码的复杂度和维护成本，使代码设计更人性化。

链接: https://www.fly63.com/nav/3961