模块化本身不直接解决跨组件通信，但配合发布订阅模式可收束硬编码调用为可维护的事件契约；应将事件总线封装为独立模块，强制作用域前缀命名，由模块边界约束通信流向，并通过组合函数或hook自动管理生命周期与清理，辅以类型校验和错误隔离。

模块化本身不直接解决跨组件通信，但配合发布订阅模式，能把原本散落在各处的硬编码调用（比如 this.$parent.$emit 或层层透传的回调）收束到可维护、可复用的事件契约中。关键不是“用发布订阅替代模块化”，而是用模块化封装发布订阅逻辑，让通信变成声明式、受控的契约行为。

把事件总线做成独立模块

避免在组件里直接 new EventBus() 或使用全局 bus。应将事件总线导出为一个具名模块，统一管理实例与命名规范：

• 创建 src/bus/index.js，导出单例：
  

  import { createEventBus } from './EventBus';<br>export const appBus = createEventBus();

• 事件名强制带作用域前缀，如 'auth:login'、'cart:item-added'，杜绝 'click' 或 'update' 这类泛义名
• 所有业务模块只 import 这个 bus，不 new、不共享引用，也不暴露内部 events 对象

用模块边界约束通信流向

模块化天然划分职责，可借机定义“谁可以发、谁可以听”：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

• 认证模块（auth/）只负责 emit 'auth:login' 和 'auth:logout'，不监听其他域事件
• 通知模块（ui/notify/）只监听 '*' 或特定前缀（如 'error:'），不参与业务逻辑
• 路由模块（router/）可在 beforeEach 中 emit 'route:changing'，供权限或埋点模块响应

生命周期与清理由模块自身接管

硬编码通信常因组件卸载后监听器未清除导致内存泄漏或报错。模块化后，清理逻辑可随模块共存亡：

• Vue 组件中不再手写 onBeforeUnmount(() => bus.off(...))，而是封装一个 useBusSubscription 组合函数，自动绑定与解绑
• React 中用 useEffect + 自定义 Hook（如 useEvent('cart:updated', handler)），返回的 cleanup 函数内调用 off
• 纯 JS 模块（如工具类）在 destroy() 方法中统一调用 bus.offAll()，而非依赖组件钩子

类型安全与错误隔离靠模块接口保障

模块化提供接口层，可嵌入校验与兜底：

• bus 模块导出的 emit 方法内部做事件名白名单检查，开发环境对非法事件名 console.warn
• on 方法包裹 try/catch，单个回调报错不影响其余监听器执行
• 搭配 TypeScript，为每个事件定义 type AuthEvents = { 'auth:login': User }，让 bus.on('auth:login', (user: User) => {...}) 具备参数推导

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南