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

时间:2008-08-18 23:45:15

标签: javascript web-applications deployment

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

8 个答案:

答案 0 :(得分:11)

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

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

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

答案 1 :(得分:8)

此外,我建议您使用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");

答案 2 :(得分:5)

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

答案 3 :(得分:3)

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

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

答案 4 :(得分:3)

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

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

答案 5 :(得分:2)

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

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

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

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

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

答案 6 :(得分:1)

我的策略包括两个主要技术: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

答案 7 :(得分:1)

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

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