闭包实现的事件总线本质是用函数作用域封装事件注册表与操作逻辑，不依赖Vue实例或框架生命周期，通过IIFE创建私有events对象，提供on/emit/off方法实现轻量、可控、跨框架兼容的发布-订阅机制。
闭包实现的事件总线，本质是用函数作用域封装事件注册表与操作逻辑，不依赖 Vue 实例或框架生命周期，天然兼容 Vue2/Vue3/React/原生 JS 环境。它轻量、可控、无副作用，特别适合构建稳定、可预测的消息链路。
核心结构：一个自包含的发布-订阅对象
闭包总线通过立即执行函数（IIFE）创建私有状态，避免全局污染和意外覆盖：
- 内部维护 events 对象，键为事件名，值为回调函数数组
- on 方法负责订阅：将回调推入对应事件队列
- emit 方法负责发布：遍历并执行该事件的所有回调
- off 方法支持精准卸载：可清除指定回调，或清空整个事件
示例代码（纯 JS，零依赖）：
const EventBus = (function () {const events = {};
return {
on(eventName, callback) {
if (!events[eventName]) events[eventName] = [];
events[eventName].push(callback);
},
emit(eventName, data) {
if (events[eventName]) {
events[eventName].forEach(cb => cb(data));
}
},
off(eventName, callback) {
if (!callback) {
delete events[eventName];
} else if (events[eventName]) {
events[eventName] = events[eventName].filter(cb => cb !== callback);
}
}
};
})();
在组件中建立可靠链路的关键动作
可靠 ≠ 一次成功，而在于“可注册、可触发、可清理、可追溯”。需配合组件生命周期严格执行：
- 订阅必须在 mounted / useEffect 中完成，确保 DOM 和响应式系统就绪；避免在 setup 或 constructor 中提前监听
-
发送方调用 emit 前建议校验事件是否存在（如
if (typeof EventBus.events['user-login'] !== 'undefined')），防止静默失败 - 必须在 unmounted / useEffect cleanup 中调用 off，否则回调持续驻留内存，引发重复执行或数据错乱
- 推荐为每个事件绑定唯一标识符（如组件 ID + 事件名），便于调试时定位来源
应对常见失效场景的加固策略
真实项目中，消息链路断裂常源于异步时序、重复注册或作用域丢失。闭包总线可通过以下方式加固：
- 防重复订阅：on 方法内增加去重逻辑，比对 callback 引用是否已存在
- 支持一次性事件：扩展 once 方法，在 emit 后自动 off，适用于登录成功跳转等单次动作
- 添加事件日志开关：开发环境开启 console.log 输出事件名、参数、触发时间，快速排查漏发/漏收
- 支持错误捕获：emit 内部用 try/catch 包裹每个回调，避免单个报错阻断后续监听者
为什么比 Vue 原生 Bus 更可靠？
Vue2 的 new Vue() 总线虽简单，但存在隐患：实例未被销毁时，$on 绑定的回调会随组件卸载而残留；Vue3 移除 $on/$off 后更需手动管理。闭包总线则：
- 无 Vue 实例依赖，不受框架版本升级影响
- 私有 events 对象不可外部篡改，状态隔离性强
- off 显式可控，卸载时机完全由开发者掌握
- 可轻松集成 Promise 封装（如 emitAsync 返回所有回调的 Promise.all 结果），支撑异步协同
