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 语句引入已导出的内容。
• 导入命名导出：需要使用花括号，并且名称必须与导出一致。
// 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
<p>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 路径中推荐包含.js 扩展名，尤其在浏览器环境中。
import { add } from './math.js';• 模块文件需通过服务器运行：浏览器出于安全限制，不允许直接从本地文件系统加载模块。需使用本地服务器（如 Live Server、Vite 等）打开页面。
• script 标签需设置 type="module"：在 HTML 中引入模块脚本时，必须加上 type 属性。
<script type="module" src="./main.js"></script>
• 支持动态导入（Dynamic Import）：可在运行时按需加载模块。
button.addEventListener('click', async () => {
const { add } = await import('./math.js');
console.log(add(2, 3));
});
基本上就这些。掌握 import 和 export 的基本用法后，就能有效组织项目结构，实现清晰的模块化开发。不复杂但容易忽略细节，比如路径和 script 类型设置。
