ECMAScript modules规范示例详解

ECMAScript modules（简称 ES modules）是JavaScript的标准模块系统。每个模块都是一个独立的JavaScript文件，可以在其中定义导出的变量、函数或类，并从其他模块中导入这些变量、函数或类。以下是ES modules规范的一些示例和详解：

1. 导出模块

你可以使用export关键字将变量、函数或类导出为模块的公共API。例如：

javascript
// math.js
export const pi = 3.14159;

export function square(x) {
return x * x;
}

export class Circle {
constructor(radius) {
this.radius = radius;
}

area() {  return pi * this.radius * this.radius;  
}  

}
在这个例子中，math.js模块导出了一个常量pi，一个函数square，和一个类Circle。

2. 导入模块

你可以使用import关键字从其他模块中导入变量、函数或类。例如：

javascript
// main.js
import { pi, square, Circle } from ‘./math.js’;

console.log(pi); // 输出: 3.14159
console.log(square(10)); // 输出: 100

const circle = new Circle(5);
console.log(circle.area()); // 输出: 78.53975
在这个例子中，main.js模块从math.js模块中导入了pi、square和Circle。注意，导入语句必须在文件的顶部，不允许在代码块的中间或函数内部使用导入语句。

3. 默认导出和导入

除了上述的命名导出和导入外，ES modules还支持默认导出和导入。默认导出在每个模块中只能有一个，而命名导出可以有多个。例如：

javascript
// util.js
export default function () {
console.log(‘This is a default export’);
}

// main.js
import myFunc from ‘./util.js’;

myFunc(); // 输出: This is a default export
在这个例子中，util.js模块默认导出了一个函数。在main.js模块中，我们可以为这个默认导出的函数指定任意名称（在这个例子中是myFunc）。

注意：在导入默认导出时，不需要使用大括号。同时，一个模块可以同时包含默认导出和命名导出。但是，默认导出在每个模块中只能有一个。

4. 动态导入

除了静态导入（即在编译时确定的导入）外，ES modules还支持动态导入。动态导入允许你在运行时按需加载和执行模块。你可以使用import()函数来实现动态导入。例如：

javascript
button.addEventListener(‘click’, event => {
import(‘./myModule.js’)
.then(module => {
module.myFunction();
})
.catch(err => {
console.error(‘Failed to load module:’, err);
});
});
在这个例子中，当用户点击按钮时，会动态加载并执行myModule.js模块中的myFunction函数。注意，import()函数返回一个Promise对象，你可以使用.then()方法处理加载成功的情况，使用.catch()方法处理加载失败的情况。