JS ES6模块深入

学习import/export · 难度：高级 · +15XP

JS ES6模块深入

JavaScript ES6 模块深入

学习前的准备

你需要一个支持 ES6 模块的现代浏览器，以及一个代码编辑器（推荐 VS Code）。ES6 模块是现代前端开发的基石，几乎所有框架都依赖它。

什么是模块？为什么需要模块化？

模块化就是把代码拆分成多个独立的文件（模块），每个模块负责一个特定的功能。一个模块可以导出（export）变量、函数或类，供其他模块导入（import）使用。

// math.js — 数学工具模块
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export function multiply(a, b) { return a * b; }
const subtract = (a, b) => a - b;
export { subtract };
export default function log(msg) { console.log('[日志]', msg); }

// main.js
import { PI, add, multiply } from './math.js';
console.log(add(3, 5));       // 8

import myLog from './math.js';
myLog('模块导入成功！');
import * as MathUtils from './math.js';
console.log(MathUtils.PI);

动态导入 import()

动态的 import() 函数返回一个 Promise，用于按需加载。

document.getElementById('showChart').addEventListener('click', async () => {
  const chartModule = await import('./chart.js');
  chartModule.renderChart(data);
});

模块的最佳实践

1. 每个模块只负责一个功能（单一职责原则）。
2. 优先使用命名导出，默认导出只在模块有明显“主功能”时使用。
3. 在文件顶部集中写 import，方便一眼看清依赖。
4. 避免循环依赖——如果 A 导入 B，B 不要导入 A。

小结

ES6 模块让 JavaScript 拥有了原生的模块化能力。export（命名）和 export default（默认）是两种导出方式。对应的导入方式是 import { name } 和 import name。动态 import() 用于按需加载。掌握模块化是成为专业前端开发者的必经之路。