一个易用的消息订阅发布系统-Pubsub.js

本文作者系360奇舞团前端开发工程师

简介

随着软件架构越来越复杂，如何有效地解决各个模块之间的通信问题变得尤为重要。一种常见的解决方案就是采用消息订阅发布机制。在这种模式下，每个模块只需要关注自己要发送或接收的消息，而不必关心其他模块的内部实现。

今天要介绍的 pubsub.js 就是一个非常实用的消息订阅发布库。它具有使用简单、性能高效、支持多平台等优点，可以很好地满足各种需求。

基本使用

首先，让我们来看看如何使用 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 通过发布/订阅模式实现实现组件间的解耦合，可以减少代码的复杂度和维护成本，使代码设计更人性化。

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。