如何将多个文件放入单个命名空间/模块中？ (javascript)

Question

我一直在阅读有关模块模式的信息，但我阅读的所有内容都假定模块的全部内容都在一个文件中。我希望每个班级有一个文件。

我已经在每个文件的顶部都这样做了：

if(window.ModuleName === undefined) { window.ModuleName = {}; }

ModuleName.ClassName = function () { ... }

但这允许在没有依赖关系的情况下包含文件，这也很烦人。例如，假设有 ClassA 使用 ClassB，并且 HTML 中省略了“ClassB.js”，那么 ClassA 将抛出错误。据我所知，Javascript 缺少 import 语句，所以在这种情况下，我实际上希望所有内容都在一个文件中。

我假设大型 javascript 项目被分解为多个文件，因此必须有办法解决这个问题。一般是怎么做的？是否有一些工具可以将多个类文件组合成一个模块文件？

Answer 1

这是一个很大的话题，但让我尽可能多地解释一下。 Javascript 要求您预先加载您打算使用的任何内容，这就是为什么您的模块模式将所有“事物”都放在同一个文件中的原因。但是，如果您打算将它们分隔在不同的文件中，那么您必须在使用前对其进行管理。我建议以下方法

1. 在服务器中提供它们之前将它们连接起来。例如在 jsp 中，您可以创建一个返回 contenttype = "text/javascript" 的 servlet，在该 servlet 中，您可以将所需的所有脚本附加到一个动态生成的脚本中，然后将其返回给客户端。

2. 在您的 ant 或 maven 构建等中，有一些配置可以在其中将您想要的文件连接在一起。这是一种常见的做法，因此您应该在互联网上找到很多参考资料。

3. 延迟加载 JavaScript。这是我的首选方式。我使用Lazyload javascript library。基本上我声明某些代码的依赖关系很像Java中的“导入”，然后在我调用它们之前我加载它们的依赖关系。这允许在没有脚本冗余的情况下优化依赖加载。问题是您需要编写一些相当复杂的脚本来执行此操作。

希望能提供帮助。