JS模块导入怎么实现_JS模块化importexport语法使用指南

JavaScript模块化通过export和import实现代码拆分与复用，支持命名导出、默认导出及动态导入，需注意文件扩展名、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 语句引入已导出的内容。

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

Fotor AI Face Generator

Fotor 平台的在线 AI 头像生成器

下载

// 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 类型设置。