实战手册（Recipes）
按真实场景组织的 ng-mfe 落地配方：每篇聚焦一个问题，给出可直接套用的 API 用法、工作机制与注意事项。
场景索引
通信与状态
| 配方 | 一句话场景 | 难度 |
|---|---|---|
| 跨应用事件发布订阅 | 子应用之间用 dispatch/on 广播与监听事件，onAny 全局审计 | 入门 |
| RPC 双向调用 | 一个应用向另一个应用发起带超时的请求/响应调用 | 入门 |
| 登录用户全局共享 | Portal 登录后把 currentUser 写入共享状态，各框架子应用订阅 | 入门 |
| 受保护键与持久化 | 用 protectedKeys 防止子应用篡改关键状态，用 persistKeys 落盘 | 进阶 |
网络与缓存
| 配方 | 一句话场景 | 难度 |
|---|---|---|
| Token 自动刷新 | 注册 onRefresh 处理器，定时提前刷新、并发单飞、失败登出 | 进阶 |
| 并发 GET 请求去重 | 多个子应用同时打同一个接口时只发一次真实请求 | 进阶 |
| getOrSet 单飞缓存 | 缓存未命中时并发调用共享一次工厂计算，防缓存击穿 | 入门 |
| HTTP 重试策略 | 用 RetryPolicy 定制指数退避重试与幂等方法约束 | 进阶 |
| 子应用 Mock 接口 | registerAppMockRules 声明规则，Portal 自动合并拦截 | 入门 |
性能与界面
| 配方 | 一句话场景 | 难度 |
|---|---|---|
| 预加载与保活 | preload 空闲预载资产，coexist 卸载时停放而非销毁 | 进阶 |
| 地图图层动态加载 | 图层声明式注册、按需懒加载、瓦片缓冲分档 | 进阶 |
| 地图图层权限过滤 | requiredPermission + setPermissionFilter 按 ACL 收敛图层可见性 | 进阶 |
| 跨应用组件复用 | registerMfeComponent 注册、MfeComponentLoader 消费 | 入门 |
| 功能开关灰度 | FeatureFlagService 按布尔/条件控制子应用特性开关 | 入门 |
主题与体验
| 配方 | 一句话场景 | 难度 |
|---|---|---|
| 明暗主题切换 | setLayout({theme}) → 共享状态 → data-theme 属性 → CSS 变量 | 入门 |
| 多语言与菜单翻译 | register/use/fanyi 插值复数与语言回退链 | 入门 |
| WebSocket 长连接 | 自动重连、状态订阅、消息自动 JSON 解析 | 进阶 |
| 通知中心与确认框 | 四级通知 API、宿主注入确认 UI、未读数驱动界面 | 入门 |
使用约定
- 代码假定你已经从
MfeBootstrapContext（即bootstrap(ctx)的ctx）取到服务实例：ctx.eventBus、ctx.sharedState、ctx.acl、ctx.auth、ctx.cache、ctx.settings、ctx.menu、ctx.i18n、ctx.httpPipeline。Portal 侧则是自己new出这些单例并传入MfeEngine的第二个参数。
ts
// 子应用侧：ctx 是 bootstrap 注入的上下文
defineMfeApp('my-app', {
async bootstrap(ctx) {
const unsub = ctx.eventBus.on('some:event', () => { /* ... */ });
cleanupFns.push(unsub); // 退订函数统一收集，destroy 时调用
},
async destroy() {
cleanupFns.forEach(fn => fn());
},
});- 代码块均标注语言（
ts/html/css/mermaid），API 名称与默认值均以源码为准，未在本页出现的参数请查阅 API 参考。 - 每个订阅型 API（
on/subscribe/onChange等）都返回退订函数，请在应用的destroy()中统一调用，避免泄漏。
如何选择配方
- 想「发个消息给别人听」→ 跨应用事件发布订阅；想「问一句等回答」→ RPC 双向调用。
- 状态需要在多个应用间保持一致 → 共享状态三件套：登录用户全局共享、受保护键与持久化、功能开关灰度。
- 网络不稳、请求重复、接口未就绪 → HTTP 重试策略、并发 GET 请求去重、getOrSet 单飞缓存、子应用 Mock 接口。
- 追求打开速度 → 预加载与保活 与 跨应用组件复用。
- 地图业务 → 先读地图图层动态加载，再按需叠加地图图层权限过滤。
- 全局体验一致 → 明暗主题切换、多语言与菜单翻译、WebSocket 长连接、通知中心与确认框。