Javascript 语言自身不支持模块化（Module）的概念，将多个脚本文件组织成一个模块，提高程序的可维护性和可重用性，是前端程序员一直在探讨的问题。事实上，在 ES6 之前，JavaScript 并没有官方的模块化支持，社区中出现了 CommonJS，AMD 等模块化规范。随着 ES6 的发布，官方引入了模块化规范，成为 ES6 的一部分，其标准命名为 ECMAScript Modules（简称为 ES Modules）。本篇文章将详解 ES10 中的模块规范及使用方式。
ES10 中的模块规范
ES6 模块化规范采用 import 和 export 语句来导入和导出模块。在 ES6 规范中，我们可以将多个脚本文件组织成一个模块，通过 export 关键字导出需要暴露的内容，通过 import 关键字引入其他模块的导出内容。
export 语句
export 命令可用于导出一个或多个项目，它支持两种导出方式：命名导出和默认导出。
- 命名导出
使用命名导出需要在导出的变量前添加关键字 export，以指明这些变量是可供外部使用的：
export const PI = 3.1415926; export function square(x) { return x * x; }
- 默认导出
默认导出只能导出一个值，使用 default 关键字进行修饰，在导入时可以使用任何名称进行重命名。
export default function() { console.log('This is a default export function'); }
Import 语句
import 命令用于从指定模块导入功能，可为导入的项目取任意名称，但 import 命令只能用于在模块级作用域中运行，而不能用于在函数和代码块内运行。
// 命名导入示例 import { PI, square } from './mathUtil.js'; // 默认导入示例 import sayHello from './greetings.js';
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
