浏览器原生环境下如何动态加载模块类并对其进行继承扩展

问题原因与解决方案 #

你当前代码存在3个必改问题：

• 变量名不匹配：你定义了const catURL = window.catURL，但import()传入的是未定义的url变量，会直接抛出引用错误。
• 动态导入返回值处理错误：import()返回的是模块命名空间对象，要获取export default导出的Cat类，需要取返回对象的.default属性。
• window未定义报错：如果确定运行在浏览器主线程，该报错通常是因为你的模块执行时机早于window.catURL的赋值时机，或是代码运行在Web Worker、Service Worker等无window的上下文。

方案1：提前注入全局变量（兼容你原来的写法）

首先在HTML入口文件中，确保全局变量赋值早于模块加载：

<!-- 先执行全局变量赋值 -->
<script>
  // 这里可以根据业务逻辑动态生成catURL，比如从接口拉取、从URL参数拼接均可
  window.catURL = 'https://my-domain/cat.js';
</script>
<!-- 再引入你的SuperCat模块，注意必须加type="module" -->
<script type="module" src="你的SuperCat模块文件路径.js"></script>

修改SuperCat模块代码：

const catURL = window.catURL;
// 修正变量名、补充.default取默认导出
const Cat = (await import(catURL)).default;

class SuperCat extends Cat {
  // 你的业务逻辑
}
export default SuperCat;

该方案依赖浏览器顶级await支持，目前所有主流现代浏览器均已支持。

方案2：封装异步工厂方法（更灵活，无执行顺序依赖）

如果你不想依赖全局变量和执行顺序，可以把SuperCat的生成封装为异步函数导出，使用时动态传入URL即可：

// SuperCat模块代码
export async function createSuperCat(catURL) {
  const Cat = (await import(catURL)).default;
  return class SuperCat extends Cat {
    // 你的业务逻辑
  };
}

在需要使用的地方调用即可：

import { createSuperCat } from './SuperCat.js';
// 动态传入任意合法的Cat类文件URL
const SuperCat = await createSuperCat('https://another-domain/something/cat.js');
const myCat = new SuperCat();

内容的提问来源于stack exchange，提问作者Marvin3