Question

管理中型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文件？还有其他任何方便的提示或最佳做法吗？

Answer 1

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

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

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

Answer 2

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

这是一个Google开发人员工具，可以捆绑主要的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");

Answer 3

Flickr的Cal Henderson有一篇关于维生素的优秀文章，关于他们如何优化CSS和JavaScript的传递：http://www.iamcal.com/serving-javascript-fast/

Answer 4

只是一个副节点 - 史蒂夫已经指出，你应该真正“缩小”你的JS文件。在JS中，空白实际上很重要。如果你拥有数千行JS并且你只删除了你已经保存大约1K的不需要的换行符。我想你明白了。

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

Answer 5

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

一个编译时步骤，它接受我们所有的代码并缩小它（使用JSMin的变体）来减少下载大小
一个编译时步骤，它接受总是或几乎总是需要的类，并将它们连接成一个大包以减少到服务器的往返
一个'classloader'，可以根据需要在运行时加载剩余的类。

Answer 6

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

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

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

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

另外，作为一个好的经验法则，请确保将JavaScript包含在页面末尾。如果标题中包含JavaScript（或页面中的任何位置），则即使打开了管道传输，它也会在加载之前停止所有其他请求。如果它在页面的末尾，则不会出现此问题。

Answer 7

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

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

Answer 8

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

AMD模块：非常直截了当，请看这里：http://requirejs.org/docs/api.html它还可以将你应用的所有部分打包成一个缩小的JS文件：http://requirejs.org/docs/optimization.html

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

管理和部署大型JavaScript应用程序的最佳实践

8 个答案: