在 ECMAScript 2021 中，全局代码已支持使用 import 和 export 语句进行模块化的开发。
传统上，我们在浏览器运行前端代码时，都是通过 script 标签引入 JavaScript 文件，这样会使得全局命名空间污染，导致变量名冲突的问题。而模块化开发能够将代码按照模块划分，避免了全局命名空间被污染，使得代码更加清晰、易于维护。
export 语句的使用
export 语句用于将模块中的变量、函数、类、甚至整个模块公开给其他模块使用。
-- ------ -- ------ --- ---------- - ------ ------- -- ------ -- --- ------ - -- --- ------ - -- ------ - ------- ------ --
从上面的示例中可以看到，export 可以导出单个变量或函数，也可以导出多个。导出多个变量或函数时，需要将它们放在花括号内。
如果想要导出默认的值，则需要在 export 后面加上 default。
-- ------ ------- ------ ------- -------- ------------ - ------------------ -------- -
从上面的示例中可以看到，我们导出了名为 myFunction 的函数，并将其设置为默认的导出值。在其他模块中，可以使用 import 语句来导入。
import 语句的使用
import 语句用于从其他模块中导入变量、函数、类等，并将其绑定到当前模块的作用域中。import 语句与 export 语句相对应，它们是模块化开发中的两个重要组成部分。
-- ------ -- ------ - ---------- - ---- ---------------- -- ------ -- ------ - ------- ------ - ---- ---------------- -- ------ -- ------ ---------- ---- ----------------
从上面的示例中可以看到，我们使用 import 语句来导入其他模块中的变量、函数、类等。在 import 语句中，我们需要指定要导入的内容的名称，并指定它来自哪个模块。必须添加适当的文件路径，它告诉浏览器在哪里找到要导入的模块。
模块化开发的优势
使用模块化开发有如下的优势：
- 明确的依赖关系，避免了全局命名空间污染。
- 可以方便地重用代码，避免了重复造轮子。
- 提升代码的可维护性和可读性。
总结
ECMAScript 2021 中，全局代码已支持使用 import 和 export 语句进行模块化的开发。通过 import 和 export 语句，我们可以更好地组织代码，避免全局命名空间污染，提升代码的可维护性和可读性。希望本文的介绍能够帮助大家更好地了解模块化开发并在项目中使用它。
示例代码：
-- ----------- ------ --- ---------- - ------ ------- --- ------ - -- --- ------ - -- ------ - ------- ------ -- ------ ------- -------- ------------ - ------------------ -------- -
-- ------- ------ - ----------- ------- ------ - ---- ---------------- ------ ---------- ---- ---------------- ------------------------ -------------------- -------------------- -------------
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66496a25d3423812e483f2ca