四个最佳实践，引导你写出高质量JavaScript模块 _JavaScript模块

使用 ES2015 模块，您可以将应用程序代码分成可重用的、封装的、专注于单一任务的模块。
这很好，但是如何构造模块呢？一个模块应该有多少个函数和类？
这篇文章介绍了有关如何更好地组织 JAVAScript 模块的4种最佳实践。

文章插图

1.优先使用命名导出当我开始使用 JavaScript 模块时，我使用默认的语法来导出模块定义的单个块，不管是类还是函数。
例如，这是一个将模块 Greeter 导出为默认值的模块程序：

文章插图

随着时间的推移，我注意到了重构默认导出的类（或函数）的困难。在重命名原始类时，使用者模块中的类名没有改变。
更糟糕的是，编辑器没有提供有关要导入的类名的自动完成建议。
我的结论是，默认的导出并没有带来明显的好处。然后我转向了命名导出。
让我们将 Greeter 命名为出口，然后看看好处：

文章插图

使用命名导出，编辑器可以更好地进行重命名：每次更改原始类名时，所有使用者模块也会更改类名。
自动完成功能还会建议导入的类：

文章插图

所以，这是我的建议：

"支持命名模块导出，以受益于重命名重构和代码自动完成功能。"

2.导入期间不进行繁重的计算工作模块级别范围定义了函数、类、对象和变量。该模块可以导出其中一些组件，就像这样。

文章插图

模块级范围不应该进行繁重的计算，比如解析 JSON、发出 HTTP 请求、读取本地存储等等。
例如，下面的模块配置解析来自全局变量 bigJsonString 的配置：

文章插图

这是一个问题，因为bigJsonString的解析是在模块级范围内完成的。bigJsonString的解析实际上是在导入配置模块时发生的：

文章插图

在更高的级别上，模块级范围的作用是定义模块组件、导入依赖项和导出公共组件：这是依赖项解析过程。它应该与运行时分离：解析JSON、发出请求、处理事件。
让我们重构配置模块来执行延迟解析：

文章插图

因为 data 属性被定义为一个 getter ，所以只有在使用者访问 configuration.data 时才解析bigJsonString 。

文章插图

消费者更清楚什么时候进行大的操作，使用者可能决定在浏览器空闲时执行该操作。或者，使用者可能会导入模块，但是出于某种原因不使用它。
这为更深层的性能优化提供了机会：减少交互时间，最大程度地减少主线程工作。

【四个最佳实践，引导你写出高质量JavaScript模块】导入时，模块不应该执行任何繁重的工作。相反，使用者应该决定何时执行运行时操作。

3.尽可能的使用高内聚模块内聚性描述了模块内部各个组件在一起的程度。
高内聚模块的函数、类或变量是密切相关的，他们专注于单个任务。
formatDate 模块具有很高的内聚性，因为它的功能密切相关，并且侧重于日期格式化：

文章插图

formatDate()、ensureDateInstance() 和 MONTHS 彼此密切相关。删除 MONTHS 或ensureDateInstance() 会破坏 formatDate()：这是高内聚的标志。
4.避免较长的相对路径我发现很难理解一个模块的路径包含一个，甚至更多的父文件夹：