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

管理中大型JavaScript应用程序的一些标准实践是什么？我关心的是浏览器下载速度和开发的易维护性

我们的JavaScript代码大致“名称空间”如下：

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

---

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

我发现适合我的方法是为每个类提供单独的JS文件（就像在Java、C#和其他语言中一样）。或者，您可以将JS分组到应用程序功能区域中，如果这样更便于导航的话

如果将所有JS文件放在一个目录中，您可以让服务器端环境（例如PHP）循环遍历该目录中的每个文件，并在所有UI页面包含的某些头文件中输出一个

。如果您经常创建和删除JS文件，您会发现这种自动加载特别方便

---

在部署到生产环境时，您应该有一个脚本，将它们组合到一个JS文件中，并对其进行“缩小”以保持较小的大小。

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

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

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

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

---

此外，作为一个好的经验法则，确保在页面末尾包含JavaScript。如果JavaScript包含在页眉中（或页面早期的任何位置），它将停止所有其他请求，直到加载为止，即使启用了管道。如果是在页面的末尾，你就不会有这个问题。

只是一个侧节点-Steve已经指出，你应该真正“缩小”你的JS文件。在JS中，空格实际上很重要。如果你有上千行JS，而你只删除了不需要的新行，那么你已经节省了大约1K。我想你明白了

---

这项工作有很多工具。而且你不应该手工修改“缩小的”/“剥离的”/“模糊的”JS！从来没有

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

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

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

---

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

此外，我建议您使用谷歌的来加载外部库

这是一个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");

---

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

AMD模块：非常简单，请看这里：它还可以将应用程序的所有部分打包到一个缩小的JS文件中：

---

模块模式：我使用了这个库：你现在问这是什么？这里有更多信息：

我以为javascript应该在头部加载，但你是说要将js推到身体？@SocialAddict是的，在几乎所有情况下，你都希望js是身体标签中的最后一个内容。你唯一应该把JS放在顶部的时间是，如果你需要在处理页面上的其余内容之前执行JS。由于JS会阻止渲染，因此将其放在底部可以加快加载速度，因为它允许浏览器异步加载更多内容。看看雅虎s在JS上的最佳实践：+1-我不知道这一点，因为它似乎总是暗示头部用于包含JS文件我认为这不是一个好主意-您很可能会在html文档中陷入脚本标记丛林。考虑使用AMD加载器，例如：

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");