39

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

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

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

  • 复杂的 JS 开发通常会涉及到单个 JS 文件中的所有代码吗？例如。你在写太空侵略者，你只有 spaceinvaders.js 还是有 ship.js、logic.js 等。

  • 是否可以拆分您的 JS（无论是使用多个脚本标签还是预编译到单个 JS 文件）还是将它们全部放在一个文件中？

  • 行业标准是什么？HTML 5 规范有什么建议吗？

4

4 回答 4

13

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

使用构建工具

咕噜声

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

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

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

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

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

早午餐

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

仅加载需要的文件

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

需要.js

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

于 2013-03-29T17:10:03.970 回答
3

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

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

于 2013-03-29T17:08:28.203 回答
2

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

于 2013-03-29T17:08:55.530 回答
2

您可以使用任意数量的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
});
于 2013-03-29T19:52:46.950 回答