微前端基类需脱离框架、纯JS实现,通过组合而非继承提供生命周期等能力,子应用显式接入且状态隔离,真正的“继承”体现为主应用对子应用的运行时调度与代理。

微前端基类继承不是直接套用 JavaScript 原生继承机制就能落地的,它本质是“在模块隔离前提下,复用跨子应用的通用能力”,核心诉求是:基类要能被不同技术栈(React/Vue/Angular/纯 JS)子应用安全加载、独立实例化、不污染全局、支持运行时扩展。因此不能只写 class BaseApp extends EventTarget 就完事。
基类需脱离具体框架,用纯 JS 构建可组合骨架
微前端中,基类不是用来 new 出 UI 组件的,而是封装生命周期、通信、资源加载、沙箱适配等底层逻辑。所以它必须:
- 不依赖 React/Vue 的 API,避免子应用因框架版本差异导致基类失效
- 用函数式 + class 混合方式暴露能力,例如
createBaseLifecycle()返回标准钩子对象,而非强制继承某个 class - 把“继承”转为“组合”:子应用通过
useBase({ mount, unmount, props })显式接入,而不是class MyApp extends BaseApp - 所有状态私有化,每个子应用实例拥有独立的
instanceId和事件总线,避免跨应用共享引用类型(如共用一个config对象)
原型链继承仅用于基类内部逻辑复用,不暴露给子应用
你可以在基类实现层用原型链或 ES6 class 继承组织代码,但对外接口必须解耦:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 比如
BaseLoader类继承BaseResource复用 fetch 逻辑,这是内部实现细节 - 子应用调用的是
loadScript(url)这个方法,而不是new BaseLoader().loadScript() - 关键点:子应用拿到的永远是“能力函数”或“配置对象”,不是基类实例本身,更不涉及
instanceof BaseApp判断
真正的“继承”发生在运行时注册与代理层
微前端的继承感,来自主应用对子应用的统一调度能力,例如:
立即学习“Java免费学习笔记(深入)”;
- 主应用注册统一错误处理器,子应用抛错时自动触发,无需每个子应用自己写
try/catch + reportError - 主应用提供
getSharedState(),子应用通过props.shared访问,背后是 Proxy 代理 + 单例状态管理,不是原型链查找 - 子应用导出的
bootstrap/mount/unmount函数,被主应用包装成标准化生命周期,这个“包装”才是实际的继承行为——它把异构子应用纳入同一套执行契约
ES6 class extends 可用于子应用内聚封装,但需规避原型污染风险
如果子应用自身是纯 JS 应用(如 umi micro-app),可以用 class 继承构建业务基类,但要注意:
- 不要让子应用基类继承主应用提供的 class(会引入强耦合和版本锁定)
- 若必须复用主应用工具类,用
import { createLogger } from '@mf-core/utils'方式按需引入,而非继承 - 子应用中定义
class ProductPage extends BasePage是安全的,前提是BasePage是该子应用自己维护、不跨应用共享的本地类 - 所有跨应用共享的逻辑,必须走标准化接口(如 CustomEvent、postMessage、shared config),而非原型链传递

















