30

管理中型 JavaScript 应用程序的一些标准做法是什么？我关心的是浏览器下载的速度以及开发的易用性和可维护性。

我们的 JavaScript 代码大致“命名空间”为：

var Client = {
   var1: '',
   var2: '',

   accounts: {
      /* 100's of functions and variables */
   },

   orders: {
      /* 100's of functions and variables and subsections */
   }

   /* etc, etc  for a couple hundred kb */
}

目前，我们有一个（未打包、未剥离、高度可读的）JavaScript 文件来处理 Web 应用程序上的所有业务逻辑。此外，还有 jQuery 和几个 jQuery 扩展。我们面临的问题是，在 JavaScript 代码中查找任何内容都需要很长时间，而浏览器仍然有十几个文件要下载。

将少量“源”JavaScript 文件“编译”成一个最终的压缩 JavaScript 文件是否很常见？还有其他方便的提示或最佳实践吗？

4

7 回答 7

12

我发现对我有用的方法是为每个类使用单独的 JS 文件（就像在 Java、C# 和其他中一样）。或者，如果您更容易导航，您可以将您的 JS 分组到应用程序功能区域中。

如果将所有 JS 文件放在一个目录中，则可以让服务器端环境（例如 PHP）循环遍历该目录中的每个文件，并<script src='/path/to/js/$file.js' type='text/javascript'>在所有 UI 页面包含的某个头文件中输出 a。如果您经常创建和删除 JS 文件，您会发现这种自动加载特别方便。

在部署到生产环境时，您应该有一个脚本将它们全部组合到一个 JS 文件中并“缩小”它以减小大小。

于 2008-08-19T00:02:42.913 回答
8

另外，我建议您使用 Google 的AJAX Libraries API来加载外部库。

它是一个谷歌开发者工具，它捆绑了主要的 JavaScript 库，并且通过始终使用压缩版本使其更容易部署、升级和使它们更轻量级。

此外，它使您的项目更简单、更轻便，因为您无需在项目中下载、复制和维护这些库文件。

以这种方式使用它：

google.load("jquery", "1.2.3");
google.load("jqueryui", "1.5.2");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");
于 2008-09-02T08:18:15.777 回答
4

只是一个侧节点——史蒂夫已经指出，你应该真正“缩小”你的 JS 文件。在 JS 中，空格实际上很重要。如果你有一千行 JS 并且你只删除不需要的换行符，你已经节省了大约 1K。我认为你说对了。

有用于这项工作的工具。而且你永远不应该手动修改“缩小”/剥离/混淆的 JS！绝不！

于 2008-08-19T00:42:51.833 回答
3

在我们的大型 javascript 应用程序中，我们将所有代码编写在小的单独文件中 - 每个“类”或功能组一个文件，使用一种类似于 Java 命名空间/目录结构。然后我们有：

  • 一个编译时步骤，它获取我们所有的代码并缩小它（使用 JSMin 的变体）以减少下载大小
  • 一个编译时步骤，它采用总是或几乎总是需要的类并将它们连接成一个大包以减少到服务器的往返行程
  • 在运行时按需加载剩余类的“类加载器”。
于 2008-08-19T21:13:25.123 回答
2

为了服务器效率，最好将所有的 javascript 合并到一个压缩文件中。

确定需要代码的顺序，然后将缩小后的代码按需要的顺序放置在单个文件中。

关键是减少加载页面所需的请求数量，这就是为什么您应该将所有 javascript 放在一个文件中用于生产。

我建议将文件分开以进行开发，然后创建一个构建脚本来组合/编译所有内容。

此外，作为一个好的经验法则，请确保在页面末尾包含 JavaScript。如果 JavaScript 包含在标头中（或页面早期的任何位置），它将停止发出所有其他请求，直到它被加载，即使打开了流水线也是如此。如果它位于页面末尾，则不会出现此问题。

于 2008-08-19T00:09:03.290 回答
1

阅读其他（好的）javascript 应用程序的代码，看看它们是如何处理事情的。但我从每个班级一个文件开始。但是一旦它准备好投入生产，我会将这些文件合并成一个大文件并缩小。

我不会合并文件的唯一原因是我不需要所有页面上的所有文件。

于 2008-08-24T20:32:26.723 回答
1

我的策略包括 2 个主要技术：AMD 模块（避免数十个脚本标签）和模块模式（避免应用程序部分的紧密耦合）

AMD 模块：非常直接，请参见此处：http ://requirejs.org/docs/api.html它还能够将应用程序的所有部分打包到一个缩小的 JS 文件中：http ://requirejs.org/docs/优化.html

模块模式：我使用了这个库：https ://github.com/flosse/scaleApp你现在问这是什么？更多信息在这里：http ://www.youtube.com/watch?v=7BGvy-S-Iag

于 2013-07-27T14:59:28.817 回答