如何从外部文件引用 JavaScript 类？答案

【问题标题】：How can I reference JavaScript classes from an external file?如何从外部文件引用 JavaScript 类？
【发布时间】：2021-10-20 18:13:50
【问题描述】：

由于某种原因，我的 html 页面找不到我放在另一个 js 文件中的类。

在标题中我引用了文件

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

在 HTML 页面的脚本标签中，我尝试实例化类

let class1 = new class1();

class1 是基类的子类，它们看起来像

class baseClass {
    constructor() {      
    }
}

class class1 extends baseClass {
    constructor() {
        super(); 
    }
}

【问题讨论】：

【解决方案1】：

您已将文件作为模块加载。这意味着顶级声明不是全局的。相反，您可以导出模块应该导出的任何内容，并将其导入您需要的地方。您的代码示例没有显示您这样做（尽管您可能会在未显示的地方进行导出）。

这是一个如何导出这些的示例（注意 export 关键字）：

export class baseClass {
    constructor() {      
    }
}

export class class1 extends baseClass {
    constructor() {
        super(); 
    }
}

然后在需要使用它的代码中：

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

// ...use it here...

请注意，如果您有一个主入口点模块，则不需要为它导入的内容包含 script 元素。只需导入即可。

例如，如果上面的类在class1.js 中，而使用它的代码在main.js 中，那么你只需要这个 HTML 来加载它们：

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

加载main.js的动作会加载它所依赖的模块。

旁注：您可以在代码中使用任何您想要的命名约定，但在与他人共享代码时，最好坚持构造函数（如class1）以大写开头的绝大多数常见命名约定字符 (Class1)。

【讨论】：