ES6模块系统通过export和import实现代码封装与复用，支持命名导出、默认导出及混合导入方式，需在HTML中使用type="module"并保留.js后缀，提升项目可维护性。
在ES6中，JavaScript引入了原生的模块系统，让开发者可以更清晰地组织代码。模块的核心是导出（export）和导入（import），实现功能的封装与复用。
1. 模块导出（export）
一个JS文件可以作为模块，通过export关键字将变量、函数或类暴露出去，供其他文件使用。
命名导出（Named Exports）：可以导出多个值。
// mathUtils.js export const add = (a, b) => a + b; export const multiply = (a, b) => a * b; export const PI = 3.14159;
也可以统一导出：
立即学习“Java免费学习笔记（深入）”；
// mathUtils.js const add = (a, b) => a + b; const multiply = (a, b) => a * b; const PI = 3.14159;export { add, multiply, PI };
默认导出（Default Export）：每个模块只能有一个默认导出，适合导出主功能，如一个类或主函数。
// calculator.js
export default class Calculator {
static add(a, b) {
return a + b;
}
}
2. 模块导入（import）
使用import从其他模块加载内容。
导入命名导出：
// main.js
import { add, multiply } from './mathUtils.js';
console.log(add(2, 3)); // 5
console.log(multiply(2, 3)); // 6
可以重命名导入：
import { add as sum, PI } from './mathUtils.js';
console.log(sum(1, 2)); // 3
导入默认导出：
// main.js import Calculator from './calculator.js'; console.log(Calculator.add(5, 3)); // 8
注意：默认导入时名字可自定义，不需与导出时一致。
同时导入默认和命名导出：
// main.js
import Calculator, { add, PI } from './mathUtilsAndCalc.js';
导入所有内容到一个对象：
import * as MathLib from './mathUtils.js'; console.log(MathLib.add(2, 3)); // 5 console.log(MathLib.multiply(2, 4)); // 8 console.log(MathLib.PI); // 3.14159
3. 使用模块的实际注意事项
浏览器中使用模块需要满足以下条件：
- HTML中引入模块需添加type="module"：
- 模块路径必须是完整文件名，包括.js后缀（不能省略）；
- 模块运行在严格模式下，无需手动写
"use strict";； - 模块支持相对路径（
./,../）或绝对路径； - 在Node.js环境中需启用ES模块支持（如使用
.mjs扩展名或在package.json中设置"type": "module"）。
4. 常见使用场景示例
假设有一个工具模块utils.js：
// utils.js
export const formatPrice = (price) => `$${price.toFixed(2)}`;
export const isEmpty = (str) => str.trim() === '';
export default function log(msg) {
console.log('[LOG]', msg);
}
在主文件中使用：
// app.js
import logger, { formatPrice, isEmpty } from './utils.js';
logger('App started');
console.log(formatPrice(19.9)); // $19.90
console.log(isEmpty('')); // true
基本上就这些。掌握export和import的几种形式，就能高效组织现代JavaScript项目。模块化让代码更清晰、可维护性更强，是前端开发的必备技能。
