JavaScript模块化是将代码拆分为独立可复用单元的方式，ES6模块（ESM）为原生标准，通过export/import实现依赖显性化、作用域隔离与按需加载，解决命名冲突、依赖错乱等问题。
JavaScript模块化是一种将代码拆分成独立、可复用单元的组织方式，每个单元（即模块）拥有自己的作用域，不污染全局环境，同时能明确声明依赖和对外接口。ES6模块（ESM）是语言原生支持的标准方案，无需额外工具即可在现代浏览器和Node.js中直接使用。
模块化解决的实际问题
传统脚本通过多个<script>标签引入时，所有变量默认挂到<font color="red"><a style="color:#f60; text-decoration:underline;" title= "win" href="https://www.php.cn/zt/19041.html" target="_blank">window上，容易造成：</script>
- 命名冲突：两个文件都定义
const utils = {...}，后者覆盖前者 - 依赖错乱：若
api.js依赖utils.js，但HTML中api.js写在前面，运行时报utils is not defined - 无法按需加载：哪怕只用一个函数，也得加载整个文件
- 维护困难：修改一处逻辑，可能因隐式依赖影响多个页面
ES6模块的核心语法：export 和 import
一个模块文件（如math.js）默认封闭，外部不可见内部变量。要共享内容，必须显式导出；要使用他人功能，必须显式导入。
命名导出（Named Export）：适合暴露多个具名成员
立即学习“Java免费学习笔记（深入）”；
/* math.js */
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export class Calculator {
multiply(x, y) { return x * y; }
}命名导入（Named Import）：按名称精确引入，必须用花括号
/* app.js */
import { PI, add, Calculator } from './math.js';
console.log(PI); // 3.14159
console.log(add(2, 3)); // 5默认导出（Default Export）：每个模块最多一个，导入时不需花括号，名称可自定
/* logger.js */
export default function log(msg) {
console.info('[LOG]', msg);
}
<p>/<em> main.js </em>/
import logger from './logger.js'; // 名称任意，如 import myLog from './logger.js'
logger('App started');混合使用也常见：
/* helpers.js */
export const isEmpty = (val) => val == null || val === '';
export default function debounce(fn, delay) { /* ... */ }
<p>/<em> use.js </em>/
import debounce, { isEmpty } from './helpers.js';在HTML中启用ES6模块的关键细节
浏览器中使用ES6模块，必须在
