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);
…

我猜测单个文件命名模块将使页面加载更快，因为它只是一个文件下载。

是的，是的。但是，不要让那影响您对如何构造模块的决定。您应该始终对代码进行模块化，以使其尽可能干净。将地图内容与搜索内容放在不同的模块中。

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

单个文件VS导入/导出加载的模块中的JavaScript命名空间模块（例如requireJS，es6）

1 个答案: