单文件中的 JavaScript 命名空间模块 VS 导入/导出加载的模块(例如 requireJS、es6)

Question

我正在尝试找出在我们的网站中构建模块的最有效方法，该网站已在单个文件 (app.js) 中包含大量 JavaScript 命名空间模块。

目前情况看起来有点像这样:

app.js

OURAPP.mapsModule = (function() {
  return ...
})();
...
OURAPP.searchModule = (function() {
  return ...
})();

..这些都包含在一个文件中。因此，当我们想要使用这些模块中的任何一个时，我们:

search-page.js

...
OURAPP.searchModule.search(query);
...

search.html

...
<script src="js/main.js">
<script src="js/search-page.js">
...

<小时/>

我们确实有很多这样的模块。但是，我想知道我们是否应该对导入/导出模块做一些事情:

方法#2

searchModule.js

export default {
    ...
}

search-page.js

import searchModule from "./js/searchModule";
...
searchModule.search(query);
...

<小时/>

我猜测单个文件命名空间模块的页面加载速度会更快(？)，因为它只需要下载一个文件。但是当我查看测试框架(例如 Jest)时，他们给出了许多以这种方式加载模块脚本文件的示例。我想知道它是否更适合测试？就我个人而言，无论如何，我更喜欢这种结构，但与迄今为止网站的构建方式相比，这是一个大胆的方向改变，我需要充分的理由来建议这一点。这个网站几乎都是使用 JavaScript 生成的服务器端，仅执行显示/隐藏、查询 API 等，并在每个页面需要时添加脚本和 JavaScript 库，例如 jQuery、Bootstrap、Isotope。

我已经阅读了周围的内容，但找不到任何内容来准确比较这两种方法以及支持和反对这两种方法的原因。希望有任何建议或有用的建议，谢谢。

Answer 1

不要默认导出对象，而是使用命名导出:

// searchModule.js
export function search(…) {
  …
}

// search-page.js
import * as searchModule from "./js/searchModule";
…
searchModule.search(query);
…

I'm guessing that a single file namespaced modules will be faster for the page to load as it's only a single file to download.

是的，确实如此。但是，不要让它影响您对如何构建模块的决定。您应该始终模块化您的代码，使其尽可能最干净。将 map 内容与搜索内容放在不同的模块中。

然后，您将使用bundler或packer工具创建一个要下载的缩小的JS文件，其中包含相应页面所需的所有模块。