微前端模块总线核心是建立轻量、可预测、生命周期可控的通信契约；通过函数声明封装事件注册/触发/清理逻辑，结合动态表达式控制通信时机与范围，并配合模块联邦提供类型安全接口及沙箱兼容方案。
微前端中实现模块总线（Module Bus），核心不是堆砌事件监听器，而是建立一套轻量、可预测、生命周期可控的通信契约。函数声明 + 动态表达式，恰恰能避开全局污染和硬编码依赖，让通信逻辑更清晰、更易测试。
用函数声明封装通信入口
把事件注册、触发、清理逻辑收束到纯函数中，避免在组件内散落 window.addEventListener。例如：
声明一个可复用的 bus 函数：
const createBus = (prefix = 'myapp') => ({
on: (event, handler) => {
const fullEvent = `${prefix}:${event}`;
const listener = (e) => handler(e.detail);
window.addEventListener(fullEvent, listener);
return () => window.removeEventListener(fullEvent, listener);
},
emit: (event, data) => {
window.dispatchEvent(new CustomEvent(`${prefix}:${event}`, { detail: data }));
}
});
子应用挂载时调用：const bus = createBus('user-center');const unmountLoginListener = bus.on('login', handleLogin);
卸载时只需：unmountLoginListener();
用动态表达式控制通信时机与范围
不所有事件都该广播。通过动态表达式决定是否触发、向谁触发、携带什么数据：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 按路由路径过滤：
if (location.pathname.startsWith('/order')) bus.emit('cart-update', cartData) - 按权限动态拼接事件名：
bus.emit(`role:${user.role}:data-refresh`, payload) - 根据环境变量开关通信：
process.env.NODE_ENV === 'development' && bus.emit('debug:state-snapshot', state)
配合模块联邦暴露类型安全的总线接口
如果使用 Webpack Module Federation，可在远程应用中 expose 一个带 TypeScript 类型的 bus 工厂：
// remote-app/src/bus.ts
export interface EventBus {
on(event: string, handler: (data: any) => void): () => void;
emit(event: string, data: any): void;
}
export const createEventBus = (prefix: string): EventBus => { ... };
主应用通过联邦远程导入后，获得完整类型提示：
import { createEventBus } from 'remote-app/bus';
const bus = createEventBus('marketing');
bus.emit('campaign-start', { id: '2026-summer' }); // IDE 自动补全 + 编译校验
沙箱兼容：绕过 qiankun 的 window 代理陷阱
qiankun 的 JS 沙箱会劫持 window 访问。直接调用 window.addEventListener 可能失效。稳妥做法是通过主应用统一暴露 bus 实例：
- 主应用在
registerMicroApps前挂载：window.__GLOBAL_BUS__ = createBus('main') - 子应用中安全访问：
const bus = window.__GLOBAL_BUS__ || createBus('fallback') - 或由主应用通过 props 注入 bus 实例（推荐，更可控）
