介绍
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，其基本语法格式如下：
------ --------- --------------
default：当模块只导出一个变量时，可以使用 default 关键字导出，默认导出的变量在导入时可以省略名称。declaration：可以是一个函数、变量、类等等。
例如，我们在一个名为 utils.js 的模块中导出一个常量和一个函数：
-- -------- ------ ----- -- - ----- ------ -------- --------- - ------ - - -- -
import 基本语法
要从另一个模块中导入变量、函数或类，可以使用 import，其基本语法格式如下：
------ ------------- ---- -------------- ------ - -- ---- ---- -------------- ------ - ------- - ---- -------------- ------ - ------- -- ------ - ---- -------------- ------ - ------- - ------- - ---- -------------- ------ - ------- - ------- -- ------ - ----- - ---- --------------
例如，我们在 main.js 中导入 utils.js 模块中的常量和函数：
-- ------- ------ - --- ------ - ---- ------------- ---------------- -- ---- ----------------------- -- --
示例代码
1. 导出变量和函数
-- ---------- ------ ----- - - -- ------ -------- --------- - ------ - - -- -
2. 导出类
-- ----------
------ ------- ----- ------ -
----------------- -
--------- - -----
-
-3. 导出一组函数
-- ---------- -------- ----- - ------------------- - -------- ----- - ------------------- - -------- ----- - ------------------- - ------ - ---- ---- --- --
4. 导入默认导出
-- ------- ------ ------ ---- --------------- ----- ------ - --- -------------- ------------------------- -- ---
5. 导入一组函数
-- ------- ------ - ---- ---- --- - ---- --------------- ------ -- --- ------ -- --- ------ -- ---
结论
ES10 中的 ES Module 是一种非常有用的前端工具，它可以帮助开发者更好地组织和管理 JavaScript 代码。它提供了一种简单的方法来导入和导出变量、函数和类。使用它，我们可以更轻松地编写可维护和可重用的 JavaScript 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67163100ad1e889fe21b459d