事件总线需严格配对订阅与销毁以防止内存泄漏：React用useEffect清理，Vue3用onBeforeUnmount，禁用匿名函数，推荐WeakMap管理监听器并引入令牌机制批量注销。
事件总线（Event Bus）是前端常用解耦通信方式，但若不加管控，极易因订阅未清理导致内存泄漏——尤其在 SPA 页面切换、组件反复挂载/卸载时，残留监听器会持续持有回调函数、上下文对象甚至整个组件实例，使 GC 无法回收。
明确订阅与销毁的生命周期绑定
事件总线本身不感知业务生命周期，必须由使用者主动配对管理。不能只调用 on 或 subscribe，而要在退出场景（如组件卸载、模块销毁）中同步调用 off 或 unsubscribe。
- React 中，在
useEffect清理函数里取消订阅：useEffect(() => { bus.on('data:update', handler); return () => bus.off('data:update', handler); }, []); - Vue 3 中，在
onBeforeUnmount钩子内清理：onBeforeUnmount(() => bus.off('user:login', handler)); - 纯 JS 模块中，将
off调用封装进显式销毁方法，避免依赖“页面刷新”或“手动调试”来释放
避免匿名函数或箭头函数注册监听器
匿名函数每次执行都会生成新引用，bus.off(eventName, () => {...}) 无法匹配此前注册的监听器，等于白删。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- ✅ 正确：使用具名函数或稳定引用
const handleUserChange = (user) => console.log(user);<br>bus.on('user:change', handleUserChange);<br>bus.off('user:change', handleUserChange); - ❌ 错误：
bus.on('user:change', (user) => console.log(user));<br>bus.off('user:change', (user) => console.log(user)); // 不生效
用 WeakMap 管理订阅关系，防止强引用滞留
某些事件总线实现会把所有监听器存进一个全局 Map 或数组。若键是组件实例、DOM 元素等对象，又没做弱引用处理，就会阻止这些对象被回收。
立即学习“Java免费学习笔记（深入）”；
- 推荐改用
WeakMap关联监听器与宿主（如组件实例），宿主销毁后，监听器自动失效 - 自研总线可参考结构：
const listeners = new WeakMap(); // key: 组件实例, value: { events: Map } - 第三方库（如 mitt、tiny-emitter）本身无生命周期感知，需上层封装一层带自动清理能力的 wrapper
引入令牌（Token）机制实现批量注销
当一个模块或组件注册多个事件时，逐个 off 易遗漏。可让 on 返回唯一 token，支持一键清除该上下文下的全部监听。
- 示例：
const token = bus.subscribeGroup(['order:paid', 'order:failed'], handler);<br>// 后续只需<br>bus.unsubscribeGroup(token);
- token 可以是 Symbol、随机字符串或 WeakRef 对象，确保不产生额外强引用
- 适合路由级、弹窗级、表单级等有明确作用域边界的场景
