Z
ZHANK
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");
}