ES6 模块系统
概述
ES6（ECMAScript 2015）引入了模块系统，使得JavaScript代码可以更好地组织和管理。模块系统允许我们将代码分割成多个文件，每个文件可以导出和导入功能，从而实现代码的复用和模块化。
1. 模块的基本概念
1.1 导出（Export）
在模块中，我们可以通过export关键字导出变量、函数、类等。导出的内容可以在其他模块中被导入和使用。
// math.ts
export const PI = 3.14159;
export function add(a: number, b: number): number {
return a + b;
}
export class Calculator {
static multiply(a: number, b: number): number {
return a * b;
}
}
1.2 导入（Import）
在其他模块中，我们可以通过import关键字导入其他模块导出的内容。
// main.ts
import { PI, add, Calculator } from './math';
console.log(PI); // 输出: 3.14159
console.log(add(2, 3)); // 输出: 5
console.log(Calculator.multiply(2, 3)); // 输出: 6
2. 默认导出（Default Export）
每个模块可以有一个默认导出。默认导出使用export default语法。
// message.ts
const greeting = "Hello, World!";
export default greeting;
在导入默认导出时，可以使用任意名称。
// main.ts
import msg from './message';
console.log(msg); // 输出: Hello, World!
3. 混合导出
一个模块可以同时包含命名导出和默认导出。
// utils.ts
export const MAX_COUNT = 100;
export function log(message: string): void {
console.log(message);
}
export default function greet(name: string): string {
return `Hello, ${name}!`;
}
导入时可以同时导入命名导出和默认导出。
// main.ts
import greet, { MAX_COUNT, log } from './utils';
log(greet("Alice")); // 输出: Hello, Alice!
console.log(MAX_COUNT); // 输出: 100
4. 重命名导入和导出
4.1 重命名导出
在导出时，可以使用as关键字重命名导出的内容。
// math.ts
export { PI as pi, add as sum };
4.2 重命名导入
在导入时，也可以使用as关键字重命名导入的内容。
// main.ts
import { pi, sum } from './math';
console.log(pi); // 输出: 3.14159
console.log(sum(2, 3)); // 输出: 5
5. 动态导入（Dynamic Import）
ES6模块系统还支持动态导入，这意味着可以在运行时根据需要加载模块。
// main.ts
async function loadModule() {
const { default: greet } = await import('./message');
console.log(greet); // 输出: Hello, World!
}
loadModule();
6. 实践练习
练习1：创建一个模块
- 创建一个名为
geometry.ts的文件，导出一个计算矩形面积的函数calculateArea。 - 在另一个文件
main.ts中导入并使用该函数。
// geometry.ts
export function calculateArea(width: number, height: number): number {
return width * height;
}
// main.ts
import { calculateArea } from './geometry';
console.log(calculateArea(5, 10)); // 输出: 50
练习2：使用默认导出
- 创建一个名为
config.ts的文件，默认导出一个包含应用配置的对象。 - 在
main.ts中导入并使用该配置对象。
// config.ts
const appConfig = {
apiUrl: "https://api.example.com",
timeout: 5000
};
export default appConfig;
// main.ts
import config from './config';
console.log(config.apiUrl); // 输出: https://api.example.com
console.log(config.timeout); // 输出: 5000
7. 总结
ES6模块系统为JavaScript提供了强大的模块化能力，使得代码组织更加清晰和易于维护。通过export和import关键字，我们可以轻松地实现模块的导出和导入，从而提高代码的复用性和可维护性。
在实际开发中，合理使用模块系统可以帮助我们更好地组织代码，提高开发效率。希望本教程能帮助你更好地理解和使用ES6模块系统。