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

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/