<p>javascript 的模块化解决了代码组织混乱、命名冲突和依赖管理的问题。es6 引入了原生模块系统，通过 export 导出模块内容，支持命名导出（如 export { add, subtract }）和默认导出（如 export default function）。通过 import 导入模块内容，命名导出可使用 import { add } from 'module'，默认导出可用 import greet from 'module'，也可导入所有内容为对象：import * as math from 'module'。在浏览器中使用模块需注意：模块必须通过服务器加载，script 标签需设置 type="module"，模块作用域为模块级且默认启用严格模式。这些机制提升了代码结构和可维护性，尤其适用于大型项目。</p>
JavaScript 的模块化主要是为了解决代码组织混乱、命名冲突和依赖管理的问题。ES6（ECMAScript 2015）引入了原生的模块系统，使得我们可以用更清晰、标准的方式进行模块的导入和导出。
使用 export 导出模块内容
在 ES6 中，你可以通过 export 关键字把变量、函数、类或对象从一个模块中导出。导出方式有两种：命名导出和默认导出。
命名导出适合多个功能需要被导出的情况。例如：
立即学习“Java免费学习笔记（深入）”；
// math.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b;
你也可以使用大括号的形式统一导出：
// math.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
export { add, subtract };默认导出适用于每个模块只导出一个主要功能的情况：
// greeting.js
export default function greet(name) {
console.log(`Hello, ${name}!`);
}使用 import 导入模块内容
要使用其他模块导出的内容，就需要使用 import 语句来导入。
对于命名导出的内容，可以这样导入：
// main.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 输出 8
console.log(subtract(5, 3)); // 输出 2如果你只想导入其中一部分，也可以只写需要的部分：
import { add } from './math.js';而对于默认导出，导入时可以自定义名称：
import greet from './greeting.js';
greet('Alice'); // 输出 Hello, Alice!还有一种方式是将所有导出内容作为一个对象导入：
import * as math from './math.js'; console.log(math.add(2, 3)); // 输出 5
这种方式在调试或不确定具体要用哪些函数时比较方便。
模块文件的使用注意事项
在浏览器中使用 ES6 模块时，需要注意几点：
- 模块文件必须通过服务器加载，不能直接打开本地 HTML 文件运行（否则会因为跨域问题报错）。
- 在
<script>标签中要加上type="module"，例如：
<script type="module" src="main.js"></script>
- 模块中的变量作用域是模块级别的，不会污染全局作用域。
- 模块默认是严格模式（strict mode），不需要手动开启
'use strict'。
这些细节虽然看起来不起眼，但如果不注意，很容易导致模块无法正常运行或者出现意料之外的行为。
基本上就这些。ES6 模块机制虽然不复杂，但在实际开发中非常实用，特别是在大型项目中能有效提升代码结构和可维护性。
