JavaScript模块化通过export和import实现代码拆分与依赖管理，支持命名导出、默认导出及混合导入，需注意顶层导入、路径规范、环境配置（如type="module"）及常见误区。
JavaScript 的模块化，就是把代码拆成独立、可复用的文件（模块），每个模块封装自己的变量、函数或类，不污染全局作用域，还能按需加载和依赖管理。现代浏览器和 Node.js（v14+）都原生支持 ES 模块（ESM），核心就是 export 和 import。
export：怎么对外暴露内容？
一个模块可以导出多个东西，方式灵活：
-
命名导出（named export）：用
export关键字逐个导出，名字必须一致才能导入。适合导出多个值。
math.js
export const PI = 3.14159;
export function add(a, b) {
return a + b;
}
export class Calculator {
multiply(x, y) { return x * y; }
}- 默认导出（default export）：每个模块最多一个，导入时可自定义名称，适合“主功能”或单例。
utils.js
立即学习“Java免费学习笔记（深入）”；
export default function debounce(fn, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}-
统一导出 / 重命名导出：用
export { ... }批量导出，支持别名（as）。
const name = "Alice";
const age = 30;
export { name as userName, age };import：怎么引入其他模块？
导入必须在模块顶层（不能在 if 或函数里），且路径要带扩展名（如 .js）或以 /、./、../ 开头：
-
导入命名导出：用大括号，名字必须和导出一致（或用
as重命名）。
import { PI, add, Calculator } from './math.js';
import { userName as myName, age } from './user.js';- 导入默认导出：不用大括号，可任意起名。
import debounce from './utils.js'; // ✅ 正确
import { default as debounce } from './utils.js'; // ❌ 不必要- 混合导入：默认 + 命名，顺序不限，但默认必须在前（语法要求）。
import debounce, { PI, add } from './math.js';- 只执行不导入：用于运行副作用（如初始化、打补丁），不取值。
import './polyfill.js';
实际使用要注意什么？
模块不是开箱即用，得看环境：
-
浏览器中：HTML 脚本标签要加
type="module"，否则import/export会报错。
-
Node.js 中：文件后缀为
.mjs，或package.json里写"type": "module"。 -
路径必须明确：不能写
import { add } from 'math'（没扩展名、没相对/绝对路径），会报错；应写from './math.js'。 -
不能动态 import 变量：
import(url)是异步函数，但url不能是拼接的变量（打包工具限制），常用于按需加载。
if (condition) {
const module = await import('./feature.js'); // ✅ 动态导入
module.doSomething();
}常见误区提醒
容易踩坑的地方：
-
export后不能跟var/let/const声明语句（语法错误），要分开写或直接导出表达式。 -
import必须在顶层，不能放在if、for或函数内（静态分析需要）。 - 模块是单例：多次
import同一模块，只会执行一次，所有导入共享同一份导出值（包括对象引用）。 - 循环导入（A 导入 B，B 又导入 A）不会报错，但未执行完的模块会返回空对象，需注意初始化顺序。
基本上就这些。模块化让代码更清晰、可维护、易测试，import/export 是基础，用熟了自然就顺了。
