4

我是 JavaScript 新手。

我应该如何在外部脚本中拆分我的函数？什么被认为是好的做法？我应该将所有功能都塞进一个外部.js文件中还是应该将类似的功能组合在一起？

我猜更多的文件意味着更多的 HTTP 请求来获取脚本，这可能会降低性能？然而，更多的文件使事情井井有条：例如，onload.js在加载时初始化事物，data.js从服务器检索数据，ui.js引用 UI 处理程序......

专业人士对此有何建议？

谢谢！

4

4 回答 4

4

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

因此，我建议将您的 .js 连接起来以进行发布，但在开发过程中以适合您的方式将它们分开。

请记住，如果您"use strict"，连接脚本可能是错误的来源。
（这里有更多关于 js 严格模式的信息）

于 2012-11-19T14:38:30.267 回答
4

正如 Pointy 提到的，你应该尝试一个工具。试试Grunt of Brunch，两者都是为了在构建过程中为您提供帮助，您可以将它们配置为在您准备好生产时合并所有文件（也可以缩小等），同时在开发时保留单独的文件。

于 2012-11-19T14:43:01.737 回答
1

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

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

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

甚至可以将 CSS/JavaScript 缓存到 localStorage 中。有关更多信息，您可以阅读Web 性能日志

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

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

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

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

于 2012-11-19T15:07:24.510 回答
0

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

无论如何，JavaScript 中的 MVC 或 MV* 将帮助您构建代码，使所有操作都是控制器的一部分，而对象属性仅存储在模型中。然后视图仅用于显示目的，并通过特殊请求或渲染引擎为用户呈现。当我开始使用 MV* 时，我盯着 BackboneJS 和Addy Osmani的“开发 BackboneJS 应用程序”指南。当然，您可以使用许多其他框架来构建您的代码。它们可以在TodoMVC 网站上找到。

您还可以从他们的应用程序中导出您自己的结构，然后使用目录结构进行开发（但不使用 MV* 框架）。

我不同意您担心使用这种结构会导致更多文件，这意味着更多 HTTP 请求。当然这在开发过程中是正确的，但请记住，用户应该获得性能增强（即编译）和缩小版本作为脚本。因此，即使您以这种有组织的方式进行开发，使用来自 Google 的闭包编译器来缩小/丑化和编译您的脚本更有意义。

于 2012-11-19T14:51:32.140 回答