插件注册必须用唯一ID,禁止仅依赖函数名;生命周期精简为load、enable、disable三阶段;通信须依赖注入而非全局变量;热替换需WeakMap+动态import实现。

插件注册必须用唯一 ID,不能只靠函数名
JavaScript 插件系统最常崩在重复加载或覆盖上,根源是没强制要求插件带 id。比如两个插件都导出 init(),但没标识谁是谁,pluginManager.unregister('analytics') 就会失效。
实操建议:
- 所有插件对象必须含
id字段,类型为字符串,且全局唯一(推荐命名空间前缀,如'@company/ui-loader') - 注册时检查重复:
if (this.plugins.has(plugin.id)) throw new Error(`Plugin ${plugin.id} already registered`) - 避免用
plugin.constructor.name当 ID——类名可被压缩、可重名、不可控
插件生命周期钩子要精简,别学 Webpack 写 12 个
太多钩子(如 beforeInit、afterInit、onInitError)会让使用者困惑,也增加调度复杂度。实际只需三个核心阶段:加载(load)、启用(enable)、禁用(disable)。
为什么这样设计:
立即学习“Java免费学习笔记(深入)”;
-
load:只做静态准备(如解析配置、绑定 this),不操作 DOM 或发请求 -
enable:真正挂载逻辑(监听事件、插入节点、启动轮询) -
disable:必须可逆,清理所有副作用(移除事件监听器、取消定时器、销毁实例) - 不提供
destroy钩子——它和disable语义重叠,且容易漏实现
插件间通信不能靠全局变量或 eventBus,要用显式依赖注入
常见错误是让插件 A 直接调 window.pluginB.doSomething(),或发 new CustomEvent('plugin-b-ready')。这会导致隐式耦合、测试困难、加载顺序敏感。
正确做法是把依赖声明化:
- 插件定义里加
requires: ['@company/logger', '@company/storage']字段 - 插件管理器在
enable前校验依赖是否已加载并启用,缺失则报错(含具体 ID) - 将依赖实例作为参数传入
enable(context),其中context.services是只读映射表 - 禁止插件自行 import 其他插件模块——打破沙盒,破坏热替换能力
热替换支持靠 WeakMap + 动态 import,别碰 eval
开发中想改完插件代码立刻生效,但直接 delete require.cache 在 ESM 下无效,eval 又绕过调试和 sourcemap。
可行路径:
- 用
WeakMap存储插件实例,键为插件模块 URL(import.meta.url) - 热更时用
import(moduleUrl + '?t=' + Date.now())动态加载新版本 - 调用旧实例的
disable(),再用新模块的default创建新实例并enable() - 关键限制:插件模块必须默认导出一个类或工厂函数,不能是裸对象字面量(否则无法 new)
这个机制对打包工具很敏感——Vite 支持良好,Webpack 需配 resolve.fullySpecified: false,而某些微前端沙箱会拦截动态 import,得提前测通。











