本文作者系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 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。
