可用轻量事件总线实现接口数据订阅发布中心,核心是用Map维护“数据标识”到回调数组的映射,支持subscribe/publish/unsubscribe/clear操作,纯JS实现、无第三方依赖。

可以用一个轻量的事件总线(Event Bus)模式来实现简易的接口数据订阅发布中心,核心是维护一个事件映射表,支持按“数据标识”(如 API 路径或业务 key)订阅、触发和清除监听。
1. 定义一个全局可复用的订阅发布中心类
不依赖第三方库,用纯 JS 实现,支持多 key 订阅、一次触发通知所有监听者、携带响应数据:
- 内部用 Map 存储各 key 对应的回调函数数组,避免重复监听可加去重逻辑(如用 Set 或检查函数引用)
-
subscribe(key, callback):注册监听,key 可以是
/api/user/info或user:profile - publish(key, data):触发该 key 下所有回调,并传入 data(比如 fetch 成功后的 response.json() 结果)
- unsubscribe(key, callback):移除指定回调;也可提供 clear(key) 清空该 key 所有监听
2. 基础实现示例(ES6 Class)
以下代码可直接在浏览器控制台测试或作为模块引入:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
class DataBus {
constructor() {
this.events = new Map();
}
subscribe(key, callback) {
if (!this.events.has(key)) {
this.events.set(key, []);
}
const listeners = this.events.get(key);
if (!listeners.includes(callback)) {
listeners.push(callback);
}
}
publish(key, data) {
const listeners = this.events.get(key);
if (listeners && listeners.length > 0) {
listeners.forEach(cb => cb(data));
}
}
unsubscribe(key, callback) {
const listeners = this.events.get(key);
if (listeners) {
const index = listeners.indexOf(callback);
if (index > -1) {
listeners.splice(index, 1);
}
}
}
clear(key) {
this.events.delete(key);
}
}
// 全局单例(也可导出供模块使用)
const dataBus = new DataBus();
export default dataBus;
3. 在实际请求中结合使用
例如封装一个 fetch 请求函数,在成功后自动 publish 数据;组件内提前 subscribe 相关 key:
立即学习“Java免费学习笔记(深入)”;
- 请求侧:
fetch('/api/order/list').then(r => r.json()).then(data => dataBus.publish('order:list', data)) - 组件 A(订单页):
dataBus.subscribe('order:list', renderOrderList) - 组件 B(统计卡片):
dataBus.subscribe('order:list', updateTotalCount) - 组件卸载时调用
dataBus.unsubscribe('order:list', handler)避免内存泄漏
4. 进阶小优化(可选)
提升实用性与健壮性:
- 支持通配符或正则匹配 key(如
user:*),适合广播类场景 - 增加 once(key, callback) 方法,只执行一次后自动取消订阅
- 为 publish 添加错误捕获,避免单个回调报错阻断其余执行:
try { cb(data) } catch(e) { console.warn('Listener error:', e) } - 配合 AbortController 或 Promise 状态,支持取消未完成的订阅(适用于异步加载中刷新等场景)

















