中介者模式通过统一通信中枢解耦微前端主子应用，承担统一入口管理、命名空间隔离、生命周期绑定和类型校验四项职责，支持跨框架、安全边界及请求-响应语义，并需具备可测试性、可监控性。
中介者模式是解耦通信双方的典型手段，在微前端中，它把主应用与子应用之间原本可能存在的直接调用、硬编码依赖或全局事件散落等问题，收束到一个统一、可控的“通信中枢”里。这个中枢不关心谁发、谁收，只负责消息的路由、过滤、转换和生命周期适配，从而显著降低模块间耦合度。
明确中介者的核心职责
一个真正起作用的中介者，不是简单的 event bus 封装，而是承担四项关键职责：
-
统一入口管理：所有通信必须经由中介者实例发起（如
Mediator.emit('user:login', data)），禁止子应用之间直连或操作对方暴露的 API -
命名空间隔离：自动为不同子应用的消息添加前缀（如
app-user/login、app-order/submit），避免事件名冲突 - 生命周期绑定：监听子应用 mount/unmount 事件，自动清理其注册的监听器，防止内存泄漏
- 类型与校验前置：支持定义消息 Schema（如基于 JSON Schema），在 emit 阶段做轻量校验，拦截非法数据
用类封装替代全局事件总线
传统 EventBus 往往是裸对象或单例，容易被任意模块修改或误用。中介者应设计为可实例化、可配置的类：
- 主应用创建唯一中介者实例，并通过 props 或 context 注入各子应用容器
- 子应用通过
useMediator()Hook 或createMediatorClient()工厂函数获取受限客户端（仅含emit和on，无off或clear） - 中介者内部使用 Map 管理订阅关系，key 为带命名空间的事件名，value 为 WeakMap 存储监听器与子应用实例的绑定
支持跨框架与安全边界
微前端常混合 Vue、React、纯 JS 子应用，中介者需保持框架无关性：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 通信协议采用纯 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）均由中介者统一处理
不复杂但容易忽略：中介者本身要可测试、可替换、可监控。上线后应能采集消息吞吐量、平均延迟、失败率等指标，并支持运行时动态启用/禁用某类消息通道。
