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()方法处理加载失败的情况。