JavaScript模块化通过import和export实现代码拆分、复用与作用域隔离，核心是按需导出引入以避免全局污染；支持命名导出（多个，名字需一致）、默认导出（每个模块至多一个，导入名可自定义）及混合导入；import/export必须在顶层，浏览器需script加type="module"，Node.js需.mjs或package.json设"type": "module"。
JavaScript模块化通过import和export实现代码的拆分、复用与作用域隔离，核心是把功能按需导出、按需引入，避免全局污染和依赖混乱。
export：怎么把东西“亮出来”？
一个模块（.js文件）默认不对外暴露任何内容，必须显式用export声明哪些变量、函数或类可以被其他模块使用。
-
命名导出（Named Export）：可导出多个，名字必须和导入时一致
math.jsexport const PI = 3.14;<br>export function add(a, b) { return a + b; }<br>export class Calculator { ... } -
默认导出（Default Export）：每个模块最多一个，导入时可自定义名字
utils.jsexport default function debounce(fn, delay) { ... } -
混合导出也允许，但默认导出不能用
export default const x = 1这种写法，得先声明再导出，或用export default后接表达式
import：怎么把东西“拿进来”？
导入语法要和导出方式匹配，路径必须是相对或绝对的（如./math.js），不能是纯模块名（Node.js里除外，需配置）。
-
导入命名导出：用大括号，名字必须完全一致
import { PI, add, Calculator } from './math.js'; -
导入默认导出：不用大括号，名字任意
import debounce from './utils.js'; // ✅<br>import myDebounce from './utils.js'; // ✅ 也可以
-
同时导入默认 + 命名：
import debounce, { PI, add } from './mathAndUtils.js'; -
整体导入（namespace import）：把所有命名导出挂在一个对象下
import * as math from './math.js';<br>console.log(math.PI, math.add(2, 3));
常见注意事项
-
import和export只能出现在模块顶层，不能在if或函数里——它们是编译时静态解析的 - 浏览器中使用模块，
<script></script>标签必须加type="module"，否则会报错<script type="module" src="main.js"></script> - Node.js默认不支持ES模块，需把文件后缀改为
.mjs，或在package.json中设置"type": "module" - 路径别名（如
@/components）不是原生支持的，需要构建工具（Vite、Webpack等）配置别名解析
一个最小可运行例子
utils.js
export function greet(name) { return `Hello, ${name}`; }<br>export default function log(msg) { console.log('[LOG]', msg); }
立即学习“Java免费学习笔记（深入）”；
main.js
import log, { greet } from './utils.js';<br>log(greet('Alice'));
在HTML中引入：<script type="module" src="./main.js"></script>
基本上就这些。不复杂但容易忽略细节，比如路径写错、大小写不一致、漏掉type="module"——跑不通时优先检查这几处。
