中介者模式通过统一通信中枢解耦微前端主子应用，承担统一入口管理、命名空间隔离、生命周期绑定和类型校验四项职责，支持跨框架、安全边界及请求-响应语义，并需具备可测试性、可监控性。

中介者模式是解耦通信双方的典型手段，在微前端中，它把主应用与子应用之间原本可能存在的直接调用、硬编码依赖或全局事件散落等问题，收束到一个统一、可控的“通信中枢”里。这个中枢不关心谁发、谁收，只负责消息的路由、过滤、转换和生命周期适配，从而显著降低模块间耦合度。

明确中介者的核心职责

一个真正起作用的中介者，不是简单的 event bus 封装，而是承担四项关键职责：

• 统一入口管理：所有通信必须经由中介者实例发起（如 Mediator.emit('user:login', data)），禁止子应用之间直连或操作对方暴露的 API
• 命名空间隔离：自动为不同子应用的消息添加前缀（如 app-user/login、app-order/submit），避免事件名冲突
• 生命周期绑定：监听子应用 mount/unmount 事件，自动清理其注册的监听器，防止内存泄漏
• 类型与校验前置：支持定义消息 Schema（如基于 JSON Schema），在 emit 阶段做轻量校验，拦截非法数据

用类封装替代全局事件总线

传统 EventBus 往往是裸对象或单例，容易被任意模块修改或误用。中介者应设计为可实例化、可配置的类：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 主应用创建唯一中介者实例，并通过 props 或 context 注入各子应用容器
• 子应用通过 useMediator() Hook 或 createMediatorClient() 工厂函数获取受限客户端（仅含 emit 和 on，无 off 或 clear）
• 中介者内部使用 Map 管理订阅关系，key 为带命名空间的事件名，value 为 WeakMap 存储监听器与子应用实例的绑定

支持跨框架与安全边界

微前端常混合 Vue、React、纯 JS 子应用，中介者需保持框架无关性：

• 通信协议采用纯 JS 对象（非框架特定响应式数据），字段约定为 { type, payload, from, to?, timestamp }
• 对 iframe 场景，中介者自动降级为 postMessage + 消息代理层，主应用作为中转桥接；同域下则走内存事件分发
• 默认开启 origin 校验与白名单机制，拒绝来自未注册子应用源的消息，防止恶意注入

引入请求-响应语义增强协作能力

单纯广播事件难以支撑业务闭环（如主应用问“当前用户是否有支付权限”，需等子应用返回结果）。中介者可扩展同步语义：

• 提供 request(type, payload) 方法，返回 Promise，内部自动生成唯一 request ID 并等待对应 response 类型消息
• 子应用收到 request 后，须调用 respond(requestId, result) 回传，中介者自动 resolve/reject 对应 Promise
• 超时控制、重试策略、错误分类（NETWORK_ERROR / HANDLER_NOT_FOUND）均由中介者统一处理

不复杂但容易忽略：中介者本身要可测试、可替换、可监控。上线后应能采集消息吞吐量、平均延迟、失败率等指标，并支持运行时动态启用/禁用某类消息通道。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！