掌握JavaScript模块化导入：在HTML中正确引入JS类

聖光之護 2025-11-23 00:00:00 次阅读

本文旨在解决在HTML文件中导入JavaScript类时遇到的常见问题，特别是关于ES模块的正确使用。我们将详细讲解如何通过type="module"属性以及在import语句中指定完整的文件扩展名来成功导入和使用JavaScript类，并提供清晰的代码示例和注意事项，确保开发者能够顺利实现模块化开发。

理解JavaScript ES模块及其导入机制

现代JavaScript开发普遍采用模块化方式来组织代码，其中ES模块（ECMAScript Modules）是官方标准。它允许我们将代码分割成独立的、可复用的文件，每个文件可以导出（export）特定的功能（如类、函数、变量），并在其他文件中导入（import）使用。这种机制有助于提高代码的可维护性、可读性和复用性。

然而，在HTML文件中引入这些模块时，开发者常会遇到一些问题，例如模块加载失败或引用错误。主要症结在于对type="module"属性的理解不足以及导入路径的规范性。

常见导入问题及解决方案

当尝试将一个JavaScript类从单独的文件导入到HTML中时，如果操作不当，可能会遇到以下两种典型问题：

“ReferenceError: pers is not defined”：这通常发生在没有使用type="module"属性的标签视为传统脚本，不具备模块导入能力。
代码不运行或“Loading module was blocked because of a disallowed MIME type”错误：即使设置了type="module"，如果导入路径不正确，特别是缺少文件扩展名，浏览器也可能无法正确解析模块，导致加载失败。

解决方案的核心在于两点：

在HTML的 这告诉浏览器该脚本是一个ES模块，需要按照模块规范进行解析和执行。
在import语句中提供完整的模块文件路径，包括.js扩展名。 浏览器在解析模块导入时，通常需要明确的文件扩展名来识别资源类型。

示例：正确导入JavaScript类

让我们通过一个具体的例子来演示如何正确地在HTML中导入和使用一个JavaScript类。

1. 定义JavaScript类模块 (person.js)

首先，我们创建一个名为person.js的文件，其中包含一个Person类，并将其导出为默认模块。

// person.js
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    getName() {
        return this.name;
    }

    getAge() {
        return this.age;
    }
}

// 使用 export default 导出类，使其成为该模块的默认导出
export default Person;

2. 在HTML文件中导入并使用类 (index.html)

接下来，在HTML文件中，我们将使用type="module"属性的

JavaScript模块导入示例