VI.模块化 - 24.模块 - 《[译] 写给不耐烦程序员的 JavaScript》

24.模块

24.模块

原文： http://exploringjs.com/impatient-js/ch_modules.html

JavaScript 模块的当前环境非常多样化：ES6 带来了内置模块，但是它们之前的模块系统仍然存在。了解后者有助于理解前者，所以让我们进行调查。

24.1。在模块之前：脚本

最初，浏览器只有脚本 - 在全局范围内执行的代码片段。例如，考虑一个 HTML 文件，它通过以下 HTML 元素加载 脚本文件 ：

在脚本文件中，我们模拟一个模块：

在我们开始使用实际模块（在 ES6 中引入）之前，所有代码都是用 ES5 编写的（没有const和let，只有var）。

myModule是一个全局变量。定义模块的代码包含在 立即调用的函数表达式 （IIFE）中。创建一个函数并立即调用它，与直接执行代码相比只有一个好处（不包装它）：在 IIFE 中定义的所有变量都保持在其范围内，不会变为全局变量。最后，我们选择要导出的内容并通过对象字面值返回。这种模式被称为 揭示模块模式 （由 Christian Heilmann 创造）。

这种模拟模块的方法有几个问题：

脚本文件中的库通过全局变量导出和导入功能，这会冒名称冲突的风险。
没有明确声明依赖关系，并且脚本没有内置的方法来加载它所依赖的脚本。因此，网页不仅要加载页面所需的脚本，还要加载这些脚本的依赖关系，依赖项的依赖关系等等。它必须按正确的顺序执行！

24.2。在 ES6 之前创建的模块系统

在 ECMAScript 6 之前，JavaScript 没有内置模块。因此，该语言的灵活语法用于在语言中实现自定义模块系统 。两个流行的是 CommonJS（针对服务器端）和 AMD（异步模块定义，针对客户端）。

24.2.1。服务器端：CommonJS 模块

模块的原始 CommonJS 标准主要是为服务器和桌面平台创建的。它是 Node.js 模块系统的基础，在那里它获得了令人难以置信的流行度。对这种受欢迎程度的贡献是 Node 的软件包管理器 npm，以及支持在客户端使用 Node 模块（browserify 和 webpack）的工具。

从现在开始，我可以互换地使用术语 CommonJS 模块 和 Node.js 模块 ，即使 Node.js 还有一些额外的功能。以下是 Node.js 模块的示例。

CommonJS 的特征如下：

专为服务器设计。
模块意味着同步加载。
紧凑的语法。

24.2.2。客户端：AMD（异步模块定义）模块

创建 AMD 模块格式是为了在浏览器中比 CommonJS 格式更容易使用。它最受欢迎的实现是 RequireJS。以下是 RequireJS 模块的示例。

AMD 的特点如下：

专为浏览器设计。
模块意味着异步加载。这对于浏览器来说是一个至关重要的要求，代码不能等到模块下载完毕。必须在模块可用时通知它。
语法稍微复杂一些。从好的方面来说，AMD 模块可以直接执行，无需自定义创建和执行源代码（想想eval()）。网上并不总是允许这样做。

24.2.3。 JavaScript 模块的特征

看看 CommonJS 和 AMD，JavaScript 模块系统之间的相似之处出现了：

每个文件有一个模块（AND 每个文件也支持多个模块）。
这样的文件基本上是一段执行的代码：
- 导出：该代码包含声明（变量，函数等）。默认情况下，这些声明保留在模块的本地，但您可以将其中一些声明标记为导出。
- 导入：模块可以从其他模块导入实体。那些其他模块通过 模块说明符 （通常是路径，偶尔 URL）来识别。
模块是单例：即使多次导入模块，也只存在单个实例。
没有使用全局变量。相反，模块说明符用作全局 ID。

24.3。 ECMAScript 模块

ESAS 引入了 ECMAScript 模块：它们坚定地遵循 JavaScript 模块的传统，并分享现有模块系统的许多特性：

使用 CommonJS，ES 模块共享紧凑语法，单个导出的语法比 命名导出 （到目前为止，我们只看到命名导出）和支持循环依赖关系更好。
对于 AMD，ES 模块共享异步加载和可配置模块加载的设计（例如，如何解析说明符）。

ES 模块也有新的好处：

它们的语法比 CommonJS 更紧凑。
它们的模块具有静态结构（在运行时无法更改）。这样可以实现静态检查，优化的导入访问，更好的捆绑（交付更少的代码）等等。
他们对循环进口的支持是完全透明的。

这是 ES 模块语法的示例：

从现在开始，“模块”意味着“ECMAScript 模块”。

24.3.1。 ECMAScript 模块：三部分

ECMAScript 模块包括三个部分：

声明模块语法：什么是模块？如何申报进出口？
语法的语义：如何处理由导入创建的变量绑定？如何处理导出的变量绑定？
用于配置模块加载的编程加载器 API。

第 1 部分和第 2 部分与 ES6 一起介绍。第 3 部分的工作正在进行中。

24.4。命名出口

每个模块可以有零个或多个命名导出。

例如，请考虑以下三个文件：

lib/my-math.js
main1.js
main2.js

模块my-math.js有两个命名导出：square和MY_CONSTANT。

模块main1.js有一个命名导入，square：

模块main2.js有一个所谓的 命名空间导入 - my-math.js的所有命名导出都可以作为对象myMath的属性访问：

练习：命名出口

exercises/modules/export_named_test.js

24.5。默认导出

每个模块最多只能有一个默认导出。这个想法是模块是的默认导出值。模块可以同时具有命名导出和默认导出，但通常最好坚持每个模块一种导出样式。

作为默认导出的示例，请考虑以下两个文件：

my-func.js
main.js

模块my-func.js具有默认导出：

模块main.js默认 - 导入导出的函数：

注意语法差异：命名导入周围的花括号表示我们将传入模块，而默认导入是模块。

默认导出的最常见用例是包含单个函数或单个类的模块。

24.5.1。默认导出的两种样式

执行默认导出有两种样式。

首先，您可以使用export default标记现有声明：

其次，您可以直接默认导出值。在那种风格中，export default本身就像一个宣言。

为什么有两种默认导出样式？原因是export default不能用于标记const：const可能定义多个值，但export default只需要一个值。

使用此假设代码，您不知道三个值中的哪一个是默认导出。

练习：默认导出

exercises/modules/export_default_test.js

24.6。命名模块

命名模块文件及其导入的变量没有既定的最佳实践。

在本章中，我使用了以下命名方式：

模块文件的名称是破折号的，并以小写字母开头：
```
./my-module.js
./some-func.js
```
命名空间导入的名称是小写的和驼峰式的：
默认导入的名称是小写的和驼峰式的：

这种风格背后的理由是什么？

npm 不允许包名中的大写字母（ source ）。因此，我们避免使用驼峰，因此“本地”文件的名称与 npm 包的名称一致。
将基于短划线的文件名转换为以驼峰为基础的 JavaScript 变量名称有明确的规则。由于我们如何命名命名空间导入，这些规则适用于命名空间导入和默认导入。

我也喜欢下划线模块文件名，因为你可以直接使用这些名称进行名称空间导入（没有任何翻译）：

但是这种样式对默认导入不起作用：我喜欢下划线外壳用于命名空间对象，但它不是函数等的好选择。

24.7。导入是导出的只读视图

到目前为止，我们直观地使用了进口和出口，一切似乎都按预期运作。但现在是时候仔细研究进出口的真实关系了。

考虑以下两个模块：

counter.js
main.js

counter.js导出一个（mutable！）变量和一个函数：

main.js name-导入两个导出。当我们使用incCounter()时，我们发现与counter的连接是实时的 - 我们总是可以访问该变量的实时状态：

请注意，虽然连接是实时的并且我们可以读取counter，但我们无法更改此变量（例如，通过counter++）。

为什么 ES 模块会以这种方式运行？

首先，分割模块更容易，因为以前的共享变量可以成为导出。

其次，这种行为对于循环导入至关重要。在执行模块之前，模块的导出是已知的。因此，如果模块 L 和模块 M 相互导入，则循环地执行以下步骤：

L 的执行开始。
- L 进口 M. L’s 进口指向 M 内的未初始化槽。
- L’的尸体尚未执行。
M 的执行开始（由导入触发）。
- M 进口 L.
- M 的主体被执行。现在 L’s 进口有值（由于实时连接）。
L 的主体被执行。现在 M 的进口有值。

循环导入是您应该尽可能避免的，但它们可能出现在复杂系统或重构系统中。重要的是，当发生这种情况时，事情不会破裂。

24.8。模块说明符

一个关键规则是：

所有 ES 模块说明符必须是有效的 URL 并指向实际文件。

除此之外，一切仍然有点不稳定。

24.8.1。模块说明符的类别

在我们进一步了解之前，我们需要建立以下类别的模块说明符（源自 CommonJS）：

相对路径：以点开头。例子：

'./some/other/module.js'
'../../lib/counter.js'

绝对路径：以斜杠开头。例：
```
'/home/jane/file-tools.js'
```
完整的 URL：包括协议（从技术上讲，路径也是 URL）。例：
```
'https://example.com/some-module.js'
```
裸路径：不要以点，斜线或协议开头。在 CommonJS 模块中，裸路径很少有文件扩展名。
```
'lodash'
'mylib/string-tools'
'foo/dist/bar.js'
```