可用轻量事件总线实现接口数据订阅发布中心，核心是用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）
以下代码可直接在浏览器控制台测试或作为模块引入：
javascript-typescript-typescript-scaffold
下载
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
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：
- 请求侧：
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 状态，支持取消未完成的订阅（适用于异步加载中刷新等场景）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
