Javascript：用未定义的类扩展类

Question

请考虑以下两个文件：

/* file A.js */
class A extends B {

}

/* file B.js */
class B {

}

如果我意外地将这两个文件以相反的顺序加载到浏览器中（先是A.js，然后是B.js），则javascript会引发错误，我正在尝试访问未定义的B。

我的问题是，我必须处理Javascript中定义的大约30-40个类，现在，为了使所有这些类正常工作，我必须牢记要在页面中包含它们的顺序。 ，否则，javascript将引发错误，因为我使用的是未定义的内容。

我该如何解决此问题，所以我不必始终牢记将这些类加载到网页中的顺序？

Answer 1

我将使用模块来解决。模块显式声明其依赖关系，您只需要引用页面中的顶级模块即可；其余的将根据依赖关系树加载。因此，例如，B.js为：

export class B {
    // ...
}

然后A.js为：

import { B } from "./B.js";
export class A extends B {
    // ...
}

也许您的主切入点（main.js或其他）将具有：

import { A } from "./A.js";
// ...

然后您的页面有

<script type="module" src="./main.js"></script>

...和其他依赖项将根据需要加载。

这与浏览器中的本机模块支持一起使用，并且/或者如果您使用Rollup.js，Webpack等捆绑程序，则...