如何在文件中组织 OO js 代码？本地网络应用

Question

我目前正在开发一个将在B2B 环境中的本地网络上运行的应用程序。所以我几乎可以忘记在节省带宽方面的微型（迷你？）优化，因为硬件便宜，程序员昂贵。

我们的项目中有一个结构良好的面向对象的 js 代码，显然还有很多 js 类。如果所有类都存储在单独的文件中，那么浏览此代码并维护它将非常容易。

但这将使我的浏览器生成几十个 HTTP 请求，以获取页面上我需要的所有 js 文件/类。即使在本地环境中，第一次加载（缓存为空）时也不是超级快，稍后当您修改它并且缓存必须失效时。

可能的解决方案：

• 违反规则“每个文件一个类”
• 使用YUI 压缩器 始终（在开发和生产中）用于生成一个大的 js 文件。

但是如果我们为此选择 YUI 压缩器（在开发环境中没有缩小操作，而在生产环境中则缩小） - 那么我们需要在任何 js 文件中的每次修改时重新加载/重新编译这个大 js 文件。

您对解决此问题有何建议？

Answer 1

将所有 .js 文件分开。保持“每个文件一个类”规则。

然后，使用服务器端技术将脚本聚合到一个请求中。

选项：

1. 使用 ASPX 或 PHP 或任何您拥有的服务器端脚本，将所有 JS 聚合到一个请求中。对 .js 的请求不再是静态文件，但通过服务器上的缓存，其服务成本应该相对较低。

2. 在合并的 .js 文件中使用服务器端包含。

   
   

Answer 2

为每个类创建单独的文件的方法是好的 - 使开发更容易的做法总是好的。

以下是一些加快加载速度的技巧：

• 压缩代码。正如你所说，你可以使用 YUICompressor 或新发布的 Google Closure Compiler。
• 将多个文件连接成一个文件时，请考虑您需要什么以及何时需要：如果您在应用程序启动时只需要文件 A、B 和 C，而不需要 Z 和 X，则只需将 A、B 和 C 放入一个文件中。在 A/B/C 之后同时加载另一个带有 Z 和 X 的文件。
• 您可以使用 Firefox 插件 YSlow 和 Page Speed 用于测试负载性能瓶颈

正如您提到的，每次进行更改时都需要重新运行压缩器。我不认为这是一个大问题 - 在一台像样的机器上，即使有很多文件，它也应该运行得相当快。或者，您可以使用某种工具进行日常构建过程，该工具可以从源代码管理构建最新版本（您确实使用 scm，对吧？），并运行单元测试并在一切正常时进行部署。

我建议使用 Ant 或其他一些自动化工具来创建构建脚本。这将使它变得像运行一个命令来构建压缩脚本一样简单，从而减少了您原本需要做的重复工作。您甚至可以让 Ant 将代码部署到服务器。

Answer 3

您可能拥有两全其美的优势 - 每个 js 文件一个类的开发环境，无需为每次迭代进行编译/部署，并且在生产中具有一个（或多个）串联的较大 js 文件（如果需要，可以缩小）。

根据您的构建环境，可以通过多种不同的方式进行设置，但使用 Ant 可能是最简单的方法。使用 Ant，您可以运行串联 和缩小任务（通过Java 任务）。这将生成串联且缩小的大型 js 文件。

然而，为了保持生产力，您希望避免在每次代码迭代时都这样做。将标签从一个更改为多个（对于每个类文件）是不可能的。

因此，您可以按预期加载大 js 文件：

<script src="application.js"></script>

部署到生产环境时，此文件是所有 js 文件的串联/缩小版本。

然而，在开发过程中，这个文件是一个引导/加载程序文件，它只是加载所有单独的 js 文件（使用 jQuery 的说明性示例）。

$.getScript('/class1.js');
$.getScript('/class2.js');
$.getScript('/class3.js');
$.getScript('/class4.js');
$.getScript('/classn.js');
....

如果您使用 YUI 3，请查看模块行为以及如何指定依赖项。

使用不同的 Ant 目标，可以轻松管理这些文件的生成和复制到正确的位置。

现在，每当您需要测试文件中的更改时，您只需重新加载浏览器，即可在生产过程中获得性能优势。所有这些都不会牺牲生产力或可维护性。