外部JavaScript文件的良好实践

Question

我是JavaScript的新手。

我应该如何在外部脚本之间拆分我的功能？什么是好习惯？我的所有功能都应该塞进一个外部.js文件中，还是应该将功能组合在一起？

我猜想更多的文件意味着更多的HTTP请求来获取脚本，这可能会降低性能？但是，更多文件可以保持组织有序：例如，onload.js在加载时初始化内容，data.js从服务器检索数据，ui.js引用UI处理程序...

这方面的专业建议是什么？

谢谢！

Answer 1

发布产品时，您通常希望尽可能少的HTTP请求来加载页面（例如，image sprites）

所以我建议将你的.js用于发布，但在开发过程中保持它们的分离方式对你有利。

请记住，如果您"use strict"，连接脚本可能是错误的来源 （more info on js strict mode here）

Answer 2

正如Pointy所说，你应该尝试一种工具。尝试Grunt的Brunch，两者都是为了帮助您完成构建过程，并且您可以将它们配置为在准备好prod（同样，缩小等）时合并所有文件，同时保持在开发时分开文件。

Answer 3

这取决于您的脚本的大小，计数以及您随时使用的脚本数量。

许多性能良好实践声称（并且这里有很好的逻辑），如果它足够小，可以内联JavaScript。这会导致HTTP请求数量减少，但也会阻止浏览器缓存JavaScript，因此您应该非常小心。这就是为什么在某些特殊情况下甚至用内联你的图像（使用base64编码）的做法（例如看看Bing.com，他们所有的JavaScript都是内联的）。

如果你有很多JavaScript文件并且你在任何时候只使用它们中的一小部分（不仅是计数而是作为大小），你可以异步加载它们（例如使用require.js）。但是，如果您在开始时没有考虑它，那么这将需要对您的应用程序设计进行大量更改（并且还会使您的应用程序复杂性更大）。

甚至可以将CSS / JavaScript缓存到localStorage中。有关详细信息，请阅读Web Performance Daybook

所以让我们做一些简短的回顾。 如果你有JavaScript内联，这将减少页面的第一次加载。浏览器不会缓存内联JavaScript，因此如果您使用了外部文件，则每次下载页面的速度都会慢一些。

如果您使用不同的外部文件，请确保您正在使用所有这些文件，或者至少使用其中的大部分文件，因为您可以对实际上不必要加载的文件进行冗余HTTP请求。这样可以更好地组织代码，但可能会有更长的加载时间（仍然不要忘记可以帮助您的浏览器缓存）。

将所有内容放在单个文件中会减少您的HTTP请求，但是您将有一个大文件阻止您的页面加载（如果您正在使用JS文件的同步加载），直到文件已完全加载。在这种情况下，我可以建议你把这个大文件放在正文的末尾。

对于性能跟踪，您可以使用YSlow等工具。

Answer 4

当我考虑良好实践时，我会想到MVC模式。有人可能会说，如果这是开发的方式，但许多人用它来构建想要实现的目标。如果项目太小，通常不建议使用MVC - 就像创建一个完整的C ++ Windows应用程序一样，只需要一个带有for循环的简单C程序。

在任何情况下，javascript中的MVC或MV *都可以帮助您构建代码，使所有操作都成为控制器的一部分，而对象属性只存储在模型中。这些视图仅用于显示目的，并通过特殊请求或rendinering引擎为用户呈现。当我盯着MV *时，我盯着BackboneJS和来自Addy Osmani的the Guide "Developing BackboneJS Applications"。当然，您可以使用许多其他框架来构建代码。它们可以在TodoMVC website上找到。

您还可以做的是从他们的应用程序派生您自己的结构，然后使用目录结构进行开发（但没有MV *框架）。

我不同意您的担心，使用这样的结构会导致更多文件，这意味着更多的HTTP请求。当然，在开发过程中也是如此，但请记住，用户应该将性能增强（即编译）和缩小版本作为脚本。因此，即使您以这种有组织的方式进行开发，使用closure compiler from Google缩小/ uglify并编译脚本也更有意义。