前端组件必须与平台逻辑解耦，通过接口定义契约、工厂函数创建实例，并在组件初始化前手动注入；禁止直接 new 具体实现类，否则导致跨端替换困难、无法 mock 测试、构造参数强绑定。
直接结论：前端组件与“不同端逻辑”（如 Web / 小程序 / Electron / React Native）解耦，不能靠框架自动注入，必须手动将平台能力抽象为接口 + 工厂函数注入，且注入时机必须在组件初始化前完成。
为什么 new PlatformService() 是解耦失败的起点
常见写法是在组件内部直接实例化平台适配层：
class OrderCard {
constructor() {
this.platform = new WechatMiniProgramService(); // ❌ 硬编码小程序
}
}这会导致三个实际卡点：
- 想跑在 Electron 里？得全局搜
WechatMiniProgramService替换为ElectronPlatformService - 单元测试时无法 mock 平台 API（比如
wx.showModal或dialog.showMessageBox），只能真实触发弹窗 - 组件和平台服务的构造参数强绑定 —— 比如小程序 service 需要
env字段，Electron 版却要传windowId，所有使用者都得改
用接口 + 工厂函数实现跨端可替换
核心不是“用什么容器”，而是“谁决定用哪个实现”。先定义契约：
立即学习“前端免费学习笔记（深入）”；
interface PlatformService {
openUrl(url: string): Promise<void>;
showToast(msg: string): void;
getStorage(key: string): Promise<string | null>;
}再为每个端写具体实现（不暴露类名，只导出工厂）：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
// web/platform.ts
export const createPlatformService = (): PlatformService => ({
openUrl: (url) => window.open(url),
showToast: (msg) => alert(msg),
getStorage: (key) => Promise.resolve(localStorage.getItem(key)),
});
<p>// miniprogram/platform.ts
export const createPlatformService = (): PlatformService => ({
openUrl: (url) => wx.navigateTo({ url }),
showToast: (msg) => wx.showToast({ title: msg }),
getStorage: (key) => new Promise(r => wx.getStorage({ key, success: e => r(e.data) })),
});最后在应用入口统一装配：
import { createPlatformService } from './platform';
const platform = createPlatformService();
<p>// 注入到根组件（非 props，非 context，是显式传参）
const app = new OrderApp({ platform });组件内如何安全使用平台能力
组件不再持有平台实例，而是接收一个符合 PlatformService 接口的对象，并在需要时调用：
class OrderCard {
constructor(private platform: PlatformService) {}
<p>async handlePay() {
try {
await this.platform.openUrl('/pay');
} catch (e) {
this.platform.showToast('支付失败，请重试');
}
}
}关键细节：
- 类型标注必须是接口
PlatformService，不是具体实现类名 —— 否则 TypeScript 会把类型收窄，失去可替换性 - 工厂函数不能返回
any或unknown，必须显式返回接口类型，否则注入后调用时无类型提示 - 如果平台能力需异步初始化（如读取 token、注册事件监听），工厂函数应返回
Promise<PlatformService>，上层需await后再注入
容易被忽略的边界点：多实例 & 生命周期错位
跨端场景下，一个页面可能同时存在多个组件实例，但平台服务通常应是单例（比如 storage 实例共享内存，event bus 需全局监听）。这时工厂函数必须保证返回同一实例：
let instance: PlatformService | null = null;
export const createPlatformService = (): PlatformService => {
if (!instance) {
instance = /* ... */
}
return instance;
};更隐蔽的问题是生命周期：若组件在平台 service 初始化完成前就尝试调用 openUrl，而 factory 返回的是 Promise，那组件就得处理 pending 状态。务实做法是——所有平台能力初始化必须同步完成，或在组件 mount 前由上层兜底 await 完毕。异步初始化放到 service 内部做（比如首次调用时 lazy init），不要暴露给组件层。
