开发复杂的 Javascript 应用程序时可以使用多个 .JS 文件吗？答案

【问题标题】：Can you use multiple .JS files when developing a complex Javascript application?开发复杂的 Javascript 应用程序时可以使用多个 .JS 文件吗？
【发布时间】：2013-03-20 10:19:29
【问题描述】：

来自 C# 背景，其中每个类（最佳实践）都存储在自己的单独文件中，它使开发变得非常干净。过去我从未用 Javascript 编写过任何复杂的东西，但我开始学习 HTML 5，我想使用 HTML 5 画布编写一个复杂的游戏。

将我所有的函数和代码放到一个 .js 文件中似乎很麻烦。有没有办法将其拆分，或者有一种工具/IDE 可以让您使用单独的文件进行开发并将它们编译成一个单独的文件以进行部署？

我想我正在寻找一些最佳实践建议。像这样的问题通常似乎已经解决了，所以这里是我的具体问题，需要遵守 SO FAQ，这些问题需要实用、可回答的问题：

复杂的 JS 开发是否通常会将所有代码都放在一个 JS 文件中？例如。你在写太空侵略者，你只有 spaceinvaders.js 还是有 ship.js、logic.js 等。
是否可以拆分您的 JS（无论是使用多个脚本标签还是预编译到单个 JS 文件）还是将它们全部放在一个文件中？
行业标准是什么？ HTML 5 规范有什么建议吗？

【问题讨论】：

您可以将 JS 编写在单独的文件中，但是在部署时，将它们全部压缩到一个文件中会更有效。对于您在浏览器中加载的每个脚本，您都会往返于服务器，因此将这些脚本最小化是有意义的。
另外，看看jquery source on github。许多单独的文件，但它们都打包为一个文件以进行部署。
啊，谢谢 - 我应该以 JQuery 为例！如果我能弄清楚多人是如何工作的，它可能会回答我所有的问题。干杯。
可能重复：stackoverflow.com/questions/950087/…

标签： javascript html standards

【解决方案1】：

当然，您可以使用多个 javascript 文件。像 jQuery 或 Knockout 这样的库还有什么功能？

但要记住的一件事是，要让页面保持流畅，您想要做的一件事是减少每次页面加载的 http 请求总数。添加一堆单独加载的 javascript 文件会导致对每个额外文件的附加请求。因此，您可能希望为您的构建试验一个系统，该系统将您的 javascript 文件拼接成一个您可以在部署时使用的项目。有许多解决方案可以自动为您完成这项工作。

【讨论】：

JQuery 只是一个文件。从我的角度来看，这很棒，因为我只需一个脚本标签即可获得所有这些功能。但是从开发人员的角度来看，如果整个 JQuery 都在一个文件中，那将是一场难以控制的噩梦，不是吗？我无法想象我的 C# 应用程序都在一个文件中。
@SLC：我上面说了，看看github上的jquery。他们不会将其开发为单个文件。
@SLC 证明了我的两个观点：jQuery 之所以有用，是因为您可以从其他 javascript 文件访问 jQuery 对象。它证明这是可能的（而且很容易）。这也证明了我的建议：您想要一种将复杂的 javascript 产品拼接成单个结果的方法。
太好了，谢谢。我将研究其他回答过的人建议的工具，这应该让我准备好写一些东西！
jQuery 实际上也在使用grunt。看看他们的Gruntfile

【解决方案2】：

您可以考虑使用 requirejs - 一个非常好的库，可以将您的 javascript 拆分为模块。它还提供了一个工具，您可以将所有模块“组合”到一个文件中。

【讨论】：

【解决方案3】：

有两种可能的方法。就个人而言，我会使用构建工具来简化对多个文件的处理。

使用构建工具

咕噜声

我最喜欢跟上复杂 js 应用程序的工具是grunt。使用 grunt，您可以根据需要开发任意数量的文件，并使用其插件 watch 和 concat 在保存时自动连接它们。您可以做更多事情，但这是可能对您有所帮助的基本用例。

Grunt 需要nodejs 并且需要一些时间来设置。但是，一旦您准备好 Gruntfile 设置，它确实会加快您的开发过程。

为了使您的项目准备好用于生产，您还可以通过一些配置和一个命令来缩小您的脚本。

许多主要的 javascript 库都在使用 grunt，根据它们的 Gruntfile 很容易识别：jQuery、AngularJS、Twitter Bootstrap 等。

Grunt 也是开发工具集 yeoman 的一部分。

早午餐

Brunch 是另一个构建工具，它允许您像 grunt 那样做类似的事情。

只加载需要的文件

如果您正在开发一个巨大的单页应用程序并且担心应用程序的启动时间，那么单个文件可能不是最佳解决方案。在这种情况下，您可以使用 javascript 模块加载器。

Require.js

因此require.js 非常合适。它允许您仅在当前页面上加载实际需要的文件。虽然设置 require.js 比设置 grunt 需要更多的工作。

【讨论】：

它既易于理解，又易于模块化。
很好的答案！帮了大忙！
grunt 如何处理文件之间的公共和私有变量？

【解决方案4】：

您可以使用任意数量的javascript 文件。只需在您的 html 代码中添加指向它们的链接：

<body style="background-color: black" onload="main();" >
    <!-- Your HTML body contents -->


    <!-- Your scripts (here, I used HTML5 BoilerPlate to setup, and the links to jquery are provided) -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
    <script src="js/main.js"></script>
</body>

然后你可以连接你的main.js 来监听main() 函数调用：

function main() {
    //here you can do your basic setup or delegate the control of the app to a different .js file.
}

或 jQuery 文档就绪回调：

$(document).ready(function() {
    //here is a good spot to hookup other jQuery listeners
});

【讨论】：