随着 ECMAScript 2020 的发布，ES module 成为了一个非常流行的特性。此特性使得开发者可以更加优雅地组织自己的代码，使其更易于理解和扩展。本篇文章将介绍ES module 的工作原理，如何使用 ES module，如何从一个简单的代码文件开始，逐步将其转换为一个使用 ES module 的结构。
ES module 工作原理
ES module 是一种用于组织 JavaScript 代码的选择性标准。在标准的实现中，每个文件都被视为一个独立的模块，并且通过特殊的导出和导入语法实现声明和访问功能。这里，我们将重点关注两个术语 "导出" 和 "导入"。
导出
导出是 ES module 模块之间的通信方式，它定义了一个模块中其他模块可以访问的内容（例如函数、变量）。ES module 通过 export 关键字将标识符 (identifier) 暴露给其他模块。
-- ------ - -------- ------ ----- ---- - ------ -- ------ - -------- ------ -------- --------- ----- - ------ ---- - ----- -
导入
导入是 ES module 模块之间的另一种通信方式，它允许模块中的代码访问其他模块中导出的标识符。你可以使用 import 关键字从一个模块获取导出的标识符。
------ - ---- - ---- --------------- ------ - --- - ---- -------------- ------------------ -- ----- ------------------ ---- -- -
如何使用 ES module
ES module 的语法是标准化的，并内置在现代浏览器和 Node.js 模块系统中。可以使用以下语法在你的 JavaScript 代码中使用 ES module：
导出
ES module 支持两种导出方式。
命名导出
通过 'export' 关键字将一个变量、函数或类导出。
------ ----- ---- - ------ ------ -------- --------- ----- - ------ ---- - ----- -
我们可以导出多个标识符。
----- ---- - ------ -------- --------- ----- - ------ ---- - ----- - ------ - ----- --- --
默认导出
ES module 还支持默认导出。通过 default 关键字导出一个标识符。每个模块仅能导出一个默认值。
------ ------- -------- --------- ----- - ------ ---- - ----- -
导入
使用 ES module 时，我们需要从其他模块 import 我们想要的标识符。
命名导入
在导入时指定我们需要导入哪些命名标识符，以 'import' 关键字开始。
------ - ---- - ---- ----------------
默认导入
除了导入标识符，你还可以使用 default 关键字一次性导入默认值。
------ -------- ---- ---------------- -----------
导入和导出限制
在导出时，我们不能使用 let 或 const 修饰符，只能导出 var。在导入时，我们必须将导入语句放在代码顶部。
从一个简单的代码文件开始
让我们从一个简单的代码文件开始，将其转换为使用 ES module 的文件结构。
--- ---- - ------
-------- ---------- -
-------------------- ------
-
-----------我们需要做以下修改。
定义导出
将name和sayHello()函数声明为导出变量。例如：
------ --- ---- - ------
------ -------- ---------- -
-------------------- ------
-或者(一次性挂载多个导出)：
--- ---- - ------ -------- ---------- - -------------------- ------ - ------ - ----- -------- --
使用导入
在现有代码所在的位置或引用该代码的位置导入变量或函数。例如：
------ - ----- -------- - ---- --------------
或者使用默认导出方式：
------ -------- ---- --------------
总结
ES module 是一个非常重要的特性，可以改变我们组织 JavaScript 代码的方式。使用ES module可以更好的组织你的代码，使其更易于理解和扩展。现代工具和浏览器都已经支持ES module，以上是一些基本的用例。我们希望这篇文章可以帮助你更好地学习和使用ES module。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64954a4a48841e98942852ba