项目中 JavaScript 的良好结构？答案

【问题标题】：Good structuring of JavaScript in a project?项目中 JavaScript 的良好结构？
【发布时间】：2011-05-14 12:02:12
【问题描述】：

所以，我现在已经完成了我网站中的 JS。它涉及 jQuery（以及这样的 .ready init）页面分为两部分，上层主要是谷歌地图，下层是输入表单。

所有这些目前都在 one .js 中，函数、初始化、迭代等等。它的结构很好，一切都做得很好。

我的问题是：什么是好的结构？我应该将上半部分放在一个文件中，将下半部分放在另一个文件中吗？还是应该将所有需要的初始化放在 .ready() 下并将所有函数放在另一个文件中？还是应该将所有内容保存在一个不断增长的文件中？

【问题讨论】：

javascript code architecture question的可能重复
@Marius - 这个问题似乎已经假定所有内容都在一个文件中；这个问题明确要求将事情分解成多个文件。

标签： javascript performance project-files

【解决方案1】：

从性能的角度来看，按照其他答案的建议，将所有 JS 在单个文件中提供给浏览器是明智的。但是，以这种方式构建代码并非如此，每个“类”都应该在一个单独的文件中，将内容分成实体和一个或两个控制文件来处理实际的页面调用 - 与任何其他语言相同。然后可以将这些组合到一个文件中，以便提前或动态提供 - 最好也最小化。

【讨论】：

所以基本上只是“结构化在一个文件中”？或者有没有关于控制文件和JS的更深入的信息？
Javascript 像大多数脚本语言（PHP、Perl、bash 等）一样工作，因为所有不同的<script> 都包含在一个页面上，在某种程度上只是按照引用的顺序组装一个页面，范围在顶层大致相同。因此，将它们以相同的顺序组合在一个文件中，并且在大多数情况下使用它可以正常工作。虽然我经常在 JS 文件中使用查询字符串，但那样做会被破坏。
对于一个主要的 JS-heavy 项目，我可以拥有整个 JS 库。如果您查看 jQuery 源代码本身 (github.com/jquery/jquery/tree/master/src)，您会看到它被拆分为多个文件，但内置/编译为单个文件以供生产使用。查看可爱的 Rakefile 构建脚本 (github.com/jquery/jquery/blob/master/Rakefile)。

【解决方案2】：

将脚本调用保持在最低限度可以缩短处理时间——每个脚本包含都是一个增加时间的往返。所以——个人喜好，只要你不关心页面加载时间。

Yahoo 的 Best Practices for Speeding Up Your Web Site 以 最小化 HTTP 请求开头：

80% 的最终用户响应时间是花费在前端。这大部分时间都花在了下载所有页面中的组件：图像，样式表、脚本、Flash 等。减少组件的数量反过来减少HTTP的数量呈现页面所需的请求。这是加快页面速度的关键。

一种减少数量的方法页面中的组件是为了简化页面的设计。但是有没有办法构建内容更丰富的页面同时也实现了快速响应次？这里有一些技巧减少 HTTP 请求的数量，同时仍然支持富页面设计。

合并文件是一种减少通过组合的 HTTP 请求数将所有脚本合并为一个脚本，以及类似地将所有 CSS 组合成一个单个样式表。合并文件是当脚本和样式表因页面而异，但是把这部分作为你发布的一部分流程缩短了响应时间。

【讨论】：

【解决方案3】：

就个人而言，我更喜欢将所有代码保存在一个文件中，因此浏览器只需要获取一个文件，而不是两个/三个/四个/什么。

但我认为这取决于个人喜好。

【讨论】：