ES6+ 新特性
ES6 模块
掌握 import/export、默认导出与命名导出
ES6 模块
ES6 原生模块系统让 JavaScript 代码组织更清晰,支持 tree-shaking 优化。
学完本章你将: 掌握 import/export 的各种用法。
导出(Export)
javascript
// math.js —— 命名导出
export const PI = 3.14159;
export function add(a, b) {
return a + b;
}
export function multiply(a, b) {
return a * b;
}
// 一起导出
// export { PI, add, multiply };
// 默认导出(每个模块只能有一个)
export default function greet(name) {
return `Hello, ${name}!`;
}
导入(Import)
javascript
// 导入命名导出
import { PI, add, multiply } from "./math.js";
// 重命名
import { add as sum } from "./math.js";
// 全部导入为命名空间
import * as math from "./math.js";
console.log(math.PI);
console.log(math.add(1, 2));
// 导入默认导出
import greet from "./math.js";
// 混合导入
import greet, { PI, add } from "./math.js";
// 只执行,不导入(如 CSS、polyfill)
import "./styles.css";
动态导入
javascript
// 静态导入始终在顶部执行
// 动态导入按需加载
async function loadChart() {
// 返回 Promise
let module = await import("./chart.js");
module.renderChart();
}
// 条件加载
if (needAnalytics) {
import("./analytics.js").then(m => m.track());
}
// 懒加载组件
button.addEventListener("click", async () => {
let { Modal } = await import("./Modal.js");
new Modal().show();
});
模块特性
| 特性 | 说明 |
|---|---|
| 严格模式 | 模块始终在严格模式下运行 |
| 作用域 | 顶层 `this` 是 undefined,不是 window |
| 单次求值 | 同一模块多次 import,只执行一次 |
| 静态结构 | import/export 必须在顶层,不能用条件 |
javascript
// ❌ 不能在条件中使用
// if (condition) { import { a } from './m.js'; }
// ✅ 动态导入可以在条件中
if (condition) {
let { a } = await import("./m.js");
}