模块化开发-ES6模块-ES6模块的语法-前端-Javascript-书闪BookChips

170 - 模块化开发 - ES6 模块 - ES6 模块的语法

作者：

贺及楼

成为作者

更新日期：2025-02-21 20:16:49

模块化开发 - ES6 模块 - ES6 模块的语法

一、引言

在前端开发中，模块化开发是一种至关重要的编程理念。它能够将代码分割成多个独立的模块，每个模块具有清晰的职责，提高代码的可维护性、可复用性和可测试性。ES6（ECMAScript 2015）引入了官方的模块语法，为 JavaScript 的模块化开发带来了极大的便利。接下来，我们将深入探讨 ES6 模块的语法。

二、ES6 模块的基本概念

ES6 模块是一个独立的文件，每个文件就是一个模块，模块内部的变量、函数、类等默认都是私有的，外部无法直接访问。只有通过 export 关键字导出，其他模块才能使用 import 关键字导入使用。

三、ES6 模块的导出语法

1. 命名导出（Named Exports）

命名导出允许我们从模块中导出多个变量、函数或类，每个导出都有一个名称。

// math.js
// 导出变量
export const PI = 3.14159;
// 导出函数
export function add(a, b) {
    return a + b;
}
// 导出类
export class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }
    getArea() {
        return this.width * this.height;
    }
}

在上面的例子中，我们从 math.js 模块中导出了一个常量 PI、一个函数 add 和一个类 Rectangle。

2. 默认导出（Default Exports）

每个模块只能有一个默认导出，默认导出可以是一个变量、函数、类等。默认导出在导入时可以使用任意名称。

// greeting.js
// 默认导出一个函数
export default function greet(name) {
    return `Hello, ${name}!`;
}

3. 混合导出

一个模块可以同时使用命名导出和默认导出。

// mixed.js
export const version = '1.0';
export default function sayHi() {
    return 'Hi!';
}

四、ES6 模块的导入语法

1. 导入命名导出

// main.js
// 导入单个命名导出
import { PI } from './math.js';
console.log(PI); 
// 导入多个命名导出
import { add, Rectangle } from './math.js';
console.log(add(2, 3)); 
const rect = new Rectangle(4, 5);
console.log(rect.getArea());

2. 导入默认导出

// main.js
import greet from './greeting.js';
console.log(greet('John'));

3. 导入混合导出

// main.js
import sayHi, { version } from './mixed.js';
console.log(sayHi()); 
console.log(version);

4. 重命名导入

当导入的名称可能与当前模块中的名称冲突时，可以使用 as 关键字进行重命名。

// main.js
import { add as addition } from './math.js';
console.log(addition(2, 3));

5. 导入整个模块

使用 * as 语法可以将模块中的所有导出导入到一个对象中。

// main.js
import * as math from './math.js';
console.log(math.PI); 
console.log(math.add(2, 3));

五、总结表格

导出类型	语法示例	导入语法示例	特点
命名导出	`export const num = 10; export function func() {}`	`import { num, func } from './module.js'`	可以导出多个，导入时名称必须匹配
默认导出	`export default function() {}`	`import func from './module.js'`	每个模块只能有一个，导入时可自定义名称
混合导出	`export const num = 10; export default function() {}`	`import func, { num } from './module.js'`	同时包含命名导出和默认导出

六、注意事项

ES6 模块是静态的，在编译时就确定了导入和导出关系，这有助于进行静态分析和 Tree Shaking（去除未使用的代码）。

在浏览器中使用 ES6 模块时，需要在 <script> 标签中添加 type="module" 属性。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ES6 Modules in Browser</title>
</head>
<body>
  <script type="module" src="main.js"></script>
</body>
</html>

七、结论

ES6 模块的语法为 JavaScript 的模块化开发提供了强大而简洁的解决方案。通过合理使用命名导出、默认导出和相应的导入语法，我们可以构建出结构清晰、易于维护的前端项目。掌握 ES6 模块的语法是每个前端开发者必备的技能之一。