ES6 的模块系统是一种新的 JavaScript 的模块化加载方案，它主要通过 import 和 export 两个关键字实现模块间的加载和导出。
import
import 是 ES6 中的一个关键字，用于加载模块中的指定部分，可以加载模块中导出的任何内容，包括变量、函数、类等等。
-- -------------------- ---- ------- -- ---------- ------ - -------- - ---- ----------- -- ---------- ------ - ---------- --------- - ---- ----------- -- ---------- ------ - -- ------ ---- ----------- -- ------ ------ ------ ---- -----------
我们可以使用 import 来加载其他模块导出的内容，这样我们就可以在我们的代码中复用其他模块的可复用代码了。
export
export 是 ES6 中的另一个关键字，用于导出当前模块中的变量、函数、类等等。export 可以导出多个变量、函数、类，也可以导出一个默认导出。
-- -------------------- ---- -------
-- ------
------ ----- -------- - ------------
-- ------
------ ----- --------- - -------------
------ ----- --------- - -------------
-- ------
------ ----- ---- - ------ ----- -- -
------ ---- - -----
--
-- -----
------ ----- ------- -
----------------- -
--------- - -----
-
---------- -
------------------- ----------------
-
-
-- --------
------ ------- ----- -
----------------- -
--------- - -----
-
---------- -
------------------- ----------------
-
-使用 export 也是为了方便我们对模块中的可复用代码进行封装和导出，让其他模块可以使用我们的代码。
示例代码
module.js
-- -------------------- ---- -------
------ ----- -------- - ------------
------ -------- ------ -- -
------ - - --
-
------ ----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ------------ --- - -- ----------- ----- -------
-
-
------ ------- ----- ------- -
----------------- -
--------- - -----
-
---------- -
------------------- ----------------
-
-app.js
-- -------------------- ---- ------- ------ - --------- ---- ------ - ---- ----------- ------ ------- ---- ----------- ---------------------- -- ----------- ------------------ ---- -- - ----- ------ - --- ------------- ---- ------------------ -- ------- -- ---- -- --- --- - -- -- ----- ----- ----- ------- - --- ----------------- ------------------- -- ------- -------
运行代码我们可以看到正确输出了 variable、add 函数、Person 类以及 Greeter 类。这就是 import 和 export 带来的便利，使我们可以在不同的模块之间轻松地共享可复用代码。
总结
ES6 的模块系统提供了非常好的模块化加载和导出功能，包括模块的 import 和 export 两个关键字。使用这些关键字，我们可以很方便地向其他模块导出代码，并获取其他模块导出的代码。这样，在复杂的应用程序中，我们可以更好地组织代码，使其更加清晰可维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f72b8bf6b2d6eab3fb28d1