Javascript 语言自身不支持模块化（Module）的概念，将多个脚本文件组织成一个模块，提高程序的可维护性和可重用性，是前端程序员一直在探讨的问题。事实上，在 ES6 之前，JavaScript 并没有官方的模块化支持，社区中出现了 CommonJS，AMD 等模块化规范。随着 ES6 的发布，官方引入了模块化规范，成为 ES6 的一部分，其标准命名为 ECMAScript Modules（简称为 ES Modules）。本篇文章将详解 ES10 中的模块规范及使用方式。
ES10 中的模块规范
ES6 模块化规范采用 import 和 export 语句来导入和导出模块。在 ES6 规范中，我们可以将多个脚本文件组织成一个模块，通过 export 关键字导出需要暴露的内容，通过 import 关键字引入其他模块的导出内容。
export 语句
export 命令可用于导出一个或多个项目，它支持两种导出方式：命名导出和默认导出。
- 命名导出
使用命名导出需要在导出的变量前添加关键字 export，以指明这些变量是可供外部使用的：
------ ----- -- - ---------- ------ -------- --------- - ------ - - -- -
- 默认导出
默认导出只能导出一个值，使用 default 关键字进行修饰，在导入时可以使用任何名称进行重命名。
------ ------- ---------- - ----------------- -- - ------- ------ ----------- -
Import 语句
import 命令用于从指定模块导入功能，可为导入的项目取任意名称，但 import 命令只能用于在模块级作用域中运行，而不能用于在函数和代码块内运行。
-- ------ ------ - --- ------ - ---- ---------------- -- ------ ------ -------- ---- -----------------
ESLint 对 ES10 模块的支持
当前，ESLint 支持 3 种主要的模块语法：CommonJS，AMD 和 ES6。由于 ES6 模块的特殊性，与它相关的规则是由 eslint-plugin-import 插件来处理的。
在使用 ESLint 进行代码检查时，可以添加 eslint-plugin-import 插件来验证代码中的 import 和 export 语句，如下所示：
-- -----
--- - -- ------ --------------------
-- ------------ ---
-
---------- -
--------
--
-------- -
----------------------- --
--------------- --
----------------- --
------------------- --
----------------------------- -
-
-以上配置可以开启对 ES10 模块代码中 import 或 export 语句的自动检查和验证。
ES10 模块化应用案例
一名 Javascript 工程师需要开发一个模块化的二叉树数据结构库，他采用 ES10 模块化规范来组织自己的代码，完整代码如下：
-- ------ ---- -----
----- -------------- - ----- -
------------------ -------- - ----- --------- - ----- -
---------- - ------
------------- - ---------
-------------- - ----------
-
--
----- --------------- - ---- -- -
-- ------ -
-------------------------------
------------------------
--------------------------------
-
--
------ ------- -
---------------
---------------
---- ---- ------ ---- ---- ------------ ----- -------- - --- ----------------------- ----------------- - --- ----------------------- ------------------ - --- ----------------------- -------------------------- - --- ----------------------- --------------------------- - --- ----------------------- ------------------- ------ ------------- -------------------------------
开发人员可以在自己的应用中引用该二叉树模块，通过 import 语句引入二叉树模块中导出的类和函数，并完成二叉树的遍历。
结论
ES10 在模块化方面的优化，是对单体应用结构的重要改进。模块化是支持应用程序中模块化代码、虚拟模块和代码分割等模式的关键概念。在你的下一个 javascript 项目中，尝试使用 ES10 模块化，来提高应用程序的可维护性、可测试性以及性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/67110809ad1e889fe2fd454d