ECMAScript Modules（ESM）是JavaScript中用于模块化开发的规范，它允许开发者将代码分割成多个独立的文件，以提高代码的可维护性和可重用性。下面是一个ECMAScript Modules规范的示例详解：
- 创建模块
1.1 导出变量
在一个模块中，可以使用 export 关键字将变量、函数或类导出，使其在其他模块中可用。
javascript
// module1.js
export const message = "Hello, ESM!";
1.2 导出函数
javascript
// module2.js
export function greet(name) {return `Hello, ${name}!`;
}
1.3 导出类
javascript
// module3.js
export class Calculator {add(a, b) {return a + b;}
}
- 导入模块
在另一个模块中，可以使用 import 关键字引入其他模块中导出的变量、函数或类。
2.1 导入变量
javascript
// main.js
import { message } from './module1.js';console.log(message); // 输出：Hello, ESM!
2.2 导入函数
javascript
// main.js
import { greet } from './module2.js';const greeting = greet('John');
console.log(greeting); // 输出：Hello, John!
2.3 导入类
javascript
// main.js
import { Calculator } from './module3.js';const calculator = new Calculator();
console.log(calculator.add(2, 3)); // 输出：5
- 默认导出
除了具名导出，模块还可以有一个默认导出。一个模块只能有一个默认导出。
3.1 默认导出变量
javascript
// module4.js
const defaultMessage = "Hello, Default ESM!";
export default defaultMessage;
3.2 默认导出函数
javascript
// module5.js
export default function sayHello(name) {return `Hello, ${name}!`;
}
3.3 默认导出类
javascript
// module6.js
export default class Greeter {greet(name) {return `Hello, ${name}!`;}
}
- 导入默认导出
javascript
// main.js
import defaultMessage from './module4.js';
import sayHello from './module5.js';
import Greeter from './module6.js';console.log(defaultMessage); // 输出：Hello, Default ESM!
console.log(sayHello('Alice')); // 输出：Hello, Alice!
const greeter = new Greeter();
console.log(greeter.greet('Bob')); // 输出：Hello, Bob!
以上示例展示了ECMAScript Modules规范的基本用法，包括模块的创建、导出、导入以及默认导出的使用。使用模块化开发有助于代码的组织和维护，同时提高了代码的可读性和可重用性。
