引言
在JavaScript的发展历程中，模块化是解决代码组织与依赖管理的核心方案。早期的全局变量污染和脚本依赖顺序问题，催生了CommonJS、AMD等规范。ES6（ECMAScript 2015）原生引入的import/export语法，标志着JavaScript模块化的标准化进程。本文将深入解析其基础用法，通过实际场景展示如何提升代码可维护性和复用性。
核心概念解析
ES6模块化基于静态加载机制，在编译阶段确立依赖关系，其核心包含两类操作：
- 导出（export）-命名导出：支持单个或多个变量导出
// mathUtils.js
export const PI = 3.14;
export function sum(a, b) { return a + b; }
- 默认导出：每个模块仅限一个默认导出
// logger.js
export default function(message) {
console.log(`[INFO] ${message}`);
}
- 导入（import）- 命名导入需使用
{}语法：
import { PI, sum } from './mathUtils.js';
sum(2, 3); // 5
- 默认导入无需大括号：
import logger from './logger.js';
logger('模块加载成功'); // [INFO] 模块加载成功
```**关键特性**：
- 模块拥有独立作用域（非全局）
- 支持静态分析实现Tree Shaking优化
- 严格模式自动启用
---
### 实际应用场景
#### 场景1：组件库按需加载
```javascript
// button.js
export const PrimaryButton = () => <button>Primary</button>;
export const DangerButton = () => <button>Danger</button>;
// App.jsx
import { PrimaryButton } from './components/button.js'; // 仅加载所需组件
场景2：服务层模块化
// apiService.js
export const fetchUser = async (id) => {
const res = await fetch(`/users/${id}`);
return res.json();
};
// userController.js
import { fetchUser } from './apiService.js'; // 解耦网络请求逻辑
注意事项：
- 浏览器需添加
type="module"属性：
<script type="module" src="main.js"></script>
- Node.js需设置
"type": "module"（package.json）或使用.mjs扩展名
最佳实践与技巧
1. 统一导出策略优化
// 推荐：集中管理导出（index.js作为入口）
export { default as Header } from './Header.jsx';
export { Table, Pagination } from './dataComponents';
2. 别名解决命名冲突
import { sum as add } from './math.js';
import { sum as calculateTotal } from './finance.js';
3. 动态导入实现懒加载
// 点击事件触发加载
button.addEventListener('click', async () => {
const utils = await import('./heavyModule.js');
utils.processData();
});
黄金法则：
- 优先使用命名导出（利于Tree Shaking）
- 默认导出仅用于模块主功能
- 避免混合默认导出与命名导出
常见问题与解决方案
问题1：循环依赖导致未定义
// a.js
import { bFunc } from './b.js';
export const aFunc = () => bFunc();
// b.js
import { aFunc } from './a.js'; // 执行时aFunc未初始化！
解决方案：
- 重构代码消除循环依赖
- 在函数内部延迟导入：
export const bFunc = () => {
import('./a.js').then(({ aFunc }) => aFunc());
}
问题2：导出值非实时绑定
// counter.js
export let count = 0;
export const increment = () => count++;
// main.js
import { count, increment } from './counter.js';
increment();
console.log(count); // 输出0？!
原因：ES6模块导出的是只读引用，需通过Getter获取最新值。
修正方案：封装访问器函数
export const getCount = () => count;
总结
ES6模块化通过import/export提供了标准化解决方案：
- 静态依赖关系提升编译优化空间
- 模块作用域根治全局污染问题
- 多种导入导出模式满足工程需求
进阶建议：
- 结合Webpack/Rollup探索Tree Shaking深度优化
- 学习动态导入（
import()）实现代码分割 - 掌握Node.js与浏览器环境的差异处理
扩展阅读：
- MDN JavaScript Modules
- 《JavaScript高级程序设计（第4版）》第26章
评论 (0)
暂无评论，快来抢沙发吧！