JavaScript模块化通过export导出、import导入实现代码拆分与复用，支持命名导出（需大括号匹配名）和默认导出（可自定义名），须注意静态语法、路径完整、浏览器需type="module"等规则。
JavaScript模块化是把代码拆分成独立、可复用的文件，每个文件封装自己的功能和作用域，避免全局污染和命名冲突。核心机制就是 export 输出内容，import 引入使用。
export：暴露变量、函数或类
一个模块里可以多次用 export 导出多个东西，也可以用 export default 指定默认导出（每个模块最多一个）。
- 命名导出（named export）：导出时带名字，导入时必须用对应名字（可重命名）
// math.js
export const PI = 3.14;
export function add(a, b) {
return a + b;
}
export class Calculator {
multiply(x, y) { return x * y; }
}- 默认导出（default export）：导出时不加名字，导入时可自定义任意名字
// utils.js
export default function formatDate(date) {
return date.toISOString().split('T')[0];
}import：在其他文件中加载模块
根据导出方式不同，导入语法也不同。注意路径必须写全（如 ./math.js），浏览器中需加 type="module" 才能启用 ES 模块。
- 导入命名导出：用大括号
{}，名字要匹配（或用as重命名）
// main.js
import { PI, add, Calculator } from './math.js';
import { add as sum } from './math.js'; // 重命名- 导入默认导出：不加大括号，名字随意
import formatDate from './utils.js'; import myFormat from './utils.js'; // 也可以叫 myFormat
- 混合导入：默认 + 命名一起导入
import formatDate, { PI, add } from './math.js';常见注意事项
ES 模块是静态的，import/export 必须写在顶层，不能放在 if 或函数里；路径是相对或绝对 URL，不支持 Node.js 的自动扩展（如 .js 后缀不能省）；浏览器中 script 标签要加 type="module"：
立即学习“Java免费学习笔记（深入）”；
<script type="module" src="./main.js"></script>
- Node.js 中需把
"type": "module"加进package.json，或用.mjs后缀 - 暂不支持直接 import HTTP 地址（除非用 CDN 提供的 ESM 兼容链接）
- 循环引用会发生，但模块会返回已执行部分的 exports 对象（不是报错）
简单示例：跑起来试试
建两个文件：
// greet.js
export function hello(name) {
return `Hi, ${name}!`;
}
export default function bye() {
return 'See you later!';
}// index.js
import goodbye, { hello } from './greet.js';
console.log(hello('Alice')); // Hi, Alice!
console.log(goodbye()); // See you later!在 HTML 中引入：<script type="module" src="index.js"></script>，打开控制台就能看到结果。
基本上就这些。不复杂但容易忽略细节，比如路径、后缀、script 类型——对了，别忘了浏览器控制台报错时先看是不是漏了 type="module"。
