在过去的前端开发中，我们常常使用一些传统的方式来组织我们的代码，例如将所有的 JavaScript 代码放入一个文件中，或使用一些全局变量来管理我们的代码。这些方法虽然简单易用，但是随着项目规模的扩大，代码的复杂度也会随之增加，导致维护成本变得很高。为了解决这些问题，ECMAScript 2018 引入了模块化编程的概念，让我们可以更好地组织和管理我们的代码。
什么是模块化编程？
模块化编程是一种将代码分解为独立的、可复用的模块的方法，每个模块都具有独立的作用域和功能。这种方法可以使我们更好地组织和管理我们的代码，使得代码更易于维护和扩展。在模块化编程中，我们可以将代码分解为多个模块，每个模块都可以导出一些变量或函数，供其他模块使用。
ECMAScript 2018 中引入了一种新的语法来支持模块化编程，该语法使用 import 和 export 关键字来导入和导出模块。在 ECMAScript 2018 中，每个模块都是一个独立的文件，可以通过 import 关键字将其他文件中的模块导入到当前文件中。
导出模块
要将一个模块导出，我们可以使用 export 关键字。例如，假设我们有一个名为 utils.js 的文件，该文件包含一个名为 add 的函数，我们可以将该函数导出如下：
-- -------- ------ -------- ------ -- - ------ - - -- -
上述代码中，我们使用 export 关键字将 add 函数导出。这意味着其他模块可以使用 import 关键字来导入该函数。
导入模块
要使用其他模块中导出的函数或变量，我们可以使用 import 关键字。例如，假设我们想在一个名为 main.js 的文件中使用 utils.js 中的 add 函数，我们可以将其导入如下：
-- ------- ------ - --- - ---- ------------- ------------------ ---- -- -- -
上述代码中，我们使用 import 关键字将 utils.js 中的 add 函数导入到当前文件中，并将其命名为 add 变量。然后，我们可以在代码中使用 add 变量来调用该函数。
导出默认模块
除了导出具名模块之外，我们还可以导出默认模块。默认模块是一个模块，它默认导出一个变量或函数，可以使用 import 关键字来导入。例如，我们可以将 utils.js 中的 add 函数作为默认模块导出如下：
-- -------- ------ ------- -------- ------ -- - ------ - - -- -
上述代码中，我们使用 export default 关键字将 add 函数作为默认模块导出。这意味着其他模块可以使用 import 关键字来导入该函数，并将其命名为任何变量名。
-- ------- ------ ----- ---- ------------- -------------------- ---- -- -- -
上述代码中，我们使用 import 关键字将 utils.js 中的默认模块导入到当前文件中，并将其命名为 myAdd 变量。然后，我们可以在代码中使用 myAdd 变量来调用该函数。
总结
模块化编程是一种将代码分解为独立的、可复用的模块的方法，可以使我们更好地组织和管理我们的代码，使得代码更易于维护和扩展。在 ECMAScript 2018 中，我们可以使用 import 和 export 关键字来支持模块化编程。通过导出模块和导入模块，我们可以更好地组织和管理我们的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f137532b3ccec22f9faa90