一个易用的消息订阅发布系统-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 通过发布/订阅模式实现实现组件间的解耦合,可以减少代码的复杂度和维护成本,使代码设计更人性化。

相关推荐
一斤代码4 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年5 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子5 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina5 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路6 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说6 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409196 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding6 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜6 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui