浏览器中导入JavaScript类：ES模块的正确实践-js教程-PHP中文网

浏览器中导入JavaScript类：ES模块的正确实践

心靈之曲

发布： 2025-11-23 15:22:02

原创

777人浏览过

浏览器中导入JavaScript类：ES模块的正确实践

本教程详细介绍了如何在html文件中正确导入和使用javascript es模块中的类。通过实例代码，文章阐述了使用`type="module"`属性的重要性、导入路径中文件扩展名的规范，并指出了常见的错误及其解决方案，帮助开发者高效地在浏览器环境中使用模块化javascript。

1. 理解JavaScript ES模块

ES Modules (ECMAScript Modules) 是JavaScript官方的模块化标准，允许开发者将代码拆分成独立的、可复用的文件，从而提高代码的可维护性和可读性。在浏览器环境中，ES模块提供了一种原生的方式来组织和加载JavaScript代码，避免了全局变量污染，并支持依赖管理。

2. 导出JavaScript类

要在一个JavaScript文件中定义一个类并使其可以被其他文件导入，需要使用export关键字。最常见的模式是使用export default来导出一个模块的默认内容，这使得导入时可以使用任意名称来引用它。

以下是一个定义Person类的示例：

person.js

立即学习“Java免费学习笔记（深入）”；

// person.js
/**
 * 定义一个Person类，包含姓名和年龄属性。
 */
class Person {
    /**
     * 构造函数，初始化Person实例。
     * @param {string} name - 姓名。
     * @param {number} age - 年龄。
     */
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    /**
     * 获取姓名。
     * @returns {string} 姓名。
     */
    getName() {
        return this.name;
    }

    /**
     * 获取年龄。
     * @returns {number} 年龄。
     */
    getAge() {
        return this.age;
    }
}

// 导出Person类作为默认导出
export default Person;

登录后复制

3. 在HTML中导入JavaScript类

在HTML文件中导入ES模块中的类，核心在于使用<script type="module">标签。这个属性告诉浏览器，该脚本是一个ES模块，因此它能够识别import和export语句。

有两种主要的方式来导入：

3.1 内联脚本导入

可以直接在HTML文件内部的<script type="module">标签中使用import语句。

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES模块内联导入示例</title>
</head>
<body>
    <h1>JavaScript ES模块内联导入教程</h1>

    <script type="module">
        // 确保person.js文件与index.html在同一目录下
        // 导入时必须包含文件扩展名 .js
        import Person from "./person.js"; 

        // 实例化导入的类
        const p = new Person("张三", 30);
        console.log("姓名:", p.getName());
        console.log("年龄:", p.getAge());
        alert(`欢迎，${p.getName()}，您今年${p.getAge()}岁。`);
    </script>
</body>
</html>

登录后复制

3.2 外部脚本导入

更推荐的做法是将模块逻辑放在一个独立的JavaScript文件中，并通过<script type="module" src="...">属性引入。

app.js

// app.js
// 确保person.js文件与app.js在同一目录下
import Person from "./person.js"; 

// 实例化导入的类
const p = new Person("李四", 25);
console.log("姓名:", p.getName());
console.log("年龄:", p.getAge());
alert(`外部脚本导入：${p.getName()}，${p.getAge()}岁。`);

登录后复制

external-import.html

课游记AI

AI原生学习产品

查看详情

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES模块外部导入示例</title>
</head>
<body>
    <h1>JavaScript ES模块外部导入教程</h1>

    <!-- 确保app.js文件与external-import.html在同一目录下 -->
    <!-- 通过src属性引入外部模块脚本 -->
    <script type="module" src="./app.js"></script>
</body>
</html>

登录后复制

4. 常见问题与注意事项

在使用ES模块时，开发者常会遇到一些问题。理解这些问题及其解决方案对于顺利进行模块化开发至关重要。

4.1 缺少type="module"属性

如果<script>标签没有type="module"属性，浏览器会将其视为传统脚本。传统脚本不识别import和export语法，从而导致以下错误：

Uncaught SyntaxError: Cannot use import statement outside a module

登录后复制

解决方案： 始终为包含import或export语句的脚本标签添加type="module"。

4.2 导入路径缺少文件扩展名

在导入ES模块时，导入路径必须包含完整的文件扩展名（通常是.js）。例如，import Person from "./person";是错误的。

// 错误示例：缺少.js扩展名
import Person from "./person";

登录后复制

这会导致浏览器无法正确解析模块，可能会出现类似“Loading module was blocked because of a disallowed MIME type”或找不到模块的错误。 解决方案： 确保导入路径完整，例如import Person from "./person.js";。

4.3 <script type="module" src="...">与内联import混用

当一个<script type="module">标签同时设置了src属性和内联代码时，浏览器会优先加载并执行src指定的外部脚本，而忽略标签内部的任何内联代码。

<!-- 错误示例：同时使用src和内联import -->
<script type="module" src="Assets/testfunction.js">
    import pers from "./testfunction.js"; // 这行代码会被忽略
    let p  = new pers("1", 1);
    console.log(p.getAge());
</script>

登录后复制

解决方案：

如果需要从外部文件导入并执行逻辑，请将所有逻辑放在外部文件中，并通过src属性引入。
如果需要在HTML内部编写少量模块化逻辑，请使用内联<script type="module">，并确保没有src属性。

4.4 相对路径与绝对路径

模块导入路径可以是相对路径（如./person.js、../utils/helper.js）或绝对路径（如/modules/person.js）。相对路径是相对于当前HTML文件或当前模块文件的位置。

4.5 服务器环境要求

ES模块通常需要通过HTTP(S)协议提供服务才能正常工作。直接通过file://协议在浏览器中打开HTML文件可能会遇到CORS（跨域资源共享）或MIME类型问题，导致模块无法加载。建议使用本地开发服务器（如Live Server VS Code扩展、Node.js的http-server等）来运行包含ES模块的Web应用。