ECMAScript modules规范示例详解
ECMAScript modules（简称 ES modules）是JavaScript的标准模块系统。每个模块都是一个独立的JavaScript文件，可以在其中定义导出的变量、函数或类，并从其他模块中导入这些变量、函数或类。以下是ES modules规范的一些示例和详解：
- 导出模块
你可以使用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。
- 导入模块
你可以使用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。注意，导入语句必须在文件的顶部，不允许在代码块的中间或函数内部使用导入语句。
- 默认导出和导入
除了上述的命名导出和导入外，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）。
注意：在导入默认导出时，不需要使用大括号。同时，一个模块可以同时包含默认导出和命名导出。但是，默认导出在每个模块中只能有一个。
- 动态导入
除了静态导入（即在编译时确定的导入）外，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()方法处理加载失败的情况。