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

简介

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

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

基本使用

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

javascript 复制代码
import PubSub from "pubsub-js";

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

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

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

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

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

一些使用场景

比如:状态。

javascript 复制代码
// 可以外部变更组件内状态
pubsub.publish(STATE_UPDATED_EVENT, newState);
​
// 在其他组件中订阅该事件以获得新状态
pubsub.subscribe(STATE_UPDATED_EVENT, (newState) => {
    this.setState(newState);
});

事务处理。

scss 复制代码
// 当异步操作完成时发布事件
​
function subscribeTransaction() {
  var subscription = PubSub.subscribe("transaction_start", async function(message, data) {
    try {
      // 处理事务...
      await someAsyncOperation();
      await someOtherAsyncOperation();
      resolve(true);
    } catch(e) {
      reject(e);
    }
  });

可以设置主题。

javascript 复制代码
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 来更简洁的使用它。

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

取消特定订阅

ini 复制代码
var mySubscriber = function (msg, data) {
    console.log(msg, data);
};
​
var token = PubSub.subscribe('MY TOPIC', mySubscriber);
​
PubSub.unsubscribe(token);

取消某个函数的所有订阅

ini 复制代码
var mySubscriber = function(msg, data) {
    console.log(msg, data);
};
​
PubSub.unsubscribe(mySubscriber);

取消某个主题的订阅

perl 复制代码
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 `的通知仍然会被发布

清楚所有订阅

scss 复制代码
PubSub.clearAllSubscriptions();
// 所有订阅都被删除

订阅计数

arduino 复制代码
PubSub.countSubscriptions('token');

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

相关推荐
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in4 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课6 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿7 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我7 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法