JS模块导入怎么实现，import/export语法详解

本文深入解析了JavaScript模块化的核心机制——import和export语法，系统讲解了命名导出、默认导出及动态导入的使用场景与正确写法，并直击开发中极易踩坑的关键细节：如必须显式书写.js扩展名、HTML中script标签需设置type="module"、模块只能通过本地服务器而非直接双击运行等实战要点，帮助开发者高效拆分代码、提升可维护性与复用性，轻松迈出模块化开发的坚实一步。

JavaScript 模块化让开发者能将代码拆分成多个文件，提高可维护性和复用性。通过 import 和 export 语法，可以轻松实现模块间的资源共享。以下是具体的使用方法和注意事项。

1. 使用 export 导出模块内容

在一个 JS 文件中，你可以导出变量、函数或类，供其他文件导入使用。支持两种导出方式：命名导出和默认导出。

• 命名导出（Named Exports）：允许导出多个值。

例如：

// math.js
export const add = (a, b) => a + b;
export const PI = 3.14159;
export function square(x) {
  return x * x;
}

• 默认导出（Default Export）：每个模块只能有一个默认导出，适合导出单个类或函数。

例如：

// calculator.js
export default function(a, b) {
  return a - b;
}

也可以先定义再导出：

// user.js
class User {
  constructor(name) {
    this.name = name;
  }
}
export default User;

2. 使用 import 导入模块内容

在另一个文件中，使用 import 语句引入已导出的内容。

• 导入命名导出：需要使用花括号，并且名称必须与导出一致。

// main.js
import { add, PI, square } from './math.js';
console.log(add(2, 3)); // 5
console.log(PI);        // 3.14159

• 导入默认导出：不需要花括号，名称可自定义。

// main.js
import subtract from './calculator.js';
console.log(subtract(5, 2)); // 3
import User from './user.js';
const user = new User('Alice');

• 同时导入默认和命名导出：

// main.js
import defaultFunc, { namedFunc1, namedFunc2 } from './module.js';

• 使用 * as 将所有导出内容聚合为一个对象：

// main.js
import * as MathUtils from './math.js';
console.log(MathUtils.add(2, 3));   // 5
console.log(MathUtils.square(4));   // 16

3. 实际使用中的注意事项

要正确使用 ES6 模块语法，需注意以下几点：

import { add } from './math.js';

• 模块文件需通过服务器运行：浏览器出于安全限制，不允许直接从本地文件系统加载模块。需使用本地服务器（如 Live Server、Vite 等）打开页面。

• script 标签需设置 type="module"：在 HTML 中引入模块脚本时，必须加上 type 属性。

• 支持动态导入（Dynamic Import）：可在运行时按需加载模块。

button.addEventListener('click', async () => {
  const { add } = await import('./math.js');
  console.log(add(2, 3));
});

基本上就这些。掌握 import 和 export 的基本用法后，就能有效组织项目结构，实现清晰的模块化开发。不复杂但容易忽略细节，比如路径和 script 类型设置。

本篇关于《JS模块导入怎么实现，import/export语法详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！