介绍
ES6 中引入了一套模块系统，但是由于浏览器的兼容性问题，不能在浏览器中使用。ES10 中引入了 ES Module，是浏览器与 Node.js 中通用的模块系统。
ES Module 随着现代前端开发需要而流行起来。我们可以使用 ES Module 来管理，加载和组织前端的代码。同时，ES Module 还支持异步加载，这使得我们可以利用缓存和延迟加载来优化应用程序的性能。
ES Module 不仅可以帮助前端工程师在使用现代 JavaScript 开发时更好地组织代码，还可以帮助开发者创建可重用、可维护和可测试性的 JavaScript 应用程序。
使用
语法
ES Module 具有两种语法：import 和 export。
import：用于从其他模块中加载 JavaScript 代码export：用于将 JavaScript 代码暴露给其他模块
export 基本语法
要在模块中导出一个变量、函数或类，可以使用 export，其基本语法格式如下：
export [default] [declaration];
default：当模块只导出一个变量时，可以使用 default 关键字导出，默认导出的变量在导入时可以省略名称。declaration：可以是一个函数、变量、类等等。
例如，我们在一个名为 utils.js 的模块中导出一个常量和一个函数：
// utils.js
export const PI = 3.14;
export function double(x) {
return x * 2;
}import 基本语法
要从另一个模块中导入变量、函数或类，可以使用 import，其基本语法格式如下：
import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";例如，我们在 main.js 中导入 utils.js 模块中的常量和函数：
// main.js
import { PI, double } from "./utils.js";
console.log(PI); // 3.14
console.log(double(5)); // 10示例代码
1. 导出变量和函数
// moduleA.js
export const a = 1;
export function double(x) {
return x * 2;
}2. 导出类
// moduleB.js
export default class Person {
constructor(name) {
this.name = name;
}
}3. 导出一组函数
-- -------------------- ---- ------- -- ---------- -------- ----- - ------------------- - -------- ----- - ------------------- - -------- ----- - ------------------- - ------ - ---- ---- --- --
4. 导入默认导出
// main.js
import Person from "./moduleB.js";
const person = new Person("Tom");
console.log(person.name); // Tom5. 导入一组函数
// main.js
import { foo, bar, baz } from "./moduleC.js";
foo(); // foo
bar(); // bar
baz(); // baz结论
ES10 中的 ES Module 是一种非常有用的前端工具，它可以帮助开发者更好地组织和管理 JavaScript 代码。它提供了一种简单的方法来导入和导出变量、函数和类。使用它，我们可以更轻松地编写可维护和可重用的 JavaScript 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67163100ad1e889fe21b459d