有没有最好的方式来组织 Javascript 代码？

Question

我一直在做一个小型 Web 应用程序，使用 jQuery 在 Javascript 中添加行为和附加 DOM 对象。问题是代码开始增长得非常快，我不知道在哪里存储它（在使用它的同一页面中，或者在一个大的 js 文件中）。在这一点上，我有：

• 1 个 js 文件，其中一个对象存储来自服务器的一些同步信息，以及最重要的方法（应该在整个应用程序中使用）。这些方法之一包括一个 DOM 元素生成器（然后我从所需的网页中添加）。
• 1 个 js 文件，其中包含一个大方法，当 window.ready 将行为添加到一堆 DOM 对象（仅与网页相关）时会调用该方法。
• 一些标签在页面中填充了没有使用第二个 js 文件的代码。此代码也与网页相关。

现在，你可能会用你的眼睛杀死我，我知道。这绝对不是存储 Javascript 的好（或至少不是一致的）方式。所以，我的问题是：

有没有最好的方式来组织 Javascript 代码？

我想至少我应该遵循一条规则，尽管问题是我不确定是否最好为所有“全局数据和方法”创建一个 js 文件，然后将其他文件存储在较小的 js 文件中，或者，或者干脆放弃去喝茶。

你们有什么感想？提前致谢！

PS：显然代码重用是一个很好的点。但是，我将重用最多的脚本保存在第一个 js 文件（具有全局内容的文件）中。

Answer 1

我通常将全局脚本存储在一个公共文件中，每个页面都有其单独的脚本文件。

您可以将页面特定的脚本文件与页面一起存储（在同一文件夹中）或将站点的目录结构复制到一个公共的“脚本”文件夹中（如果您有很多脚本文件，这很有用），两种方式我都有脚本文件命名为它们的页面对应物，以使映射变得容易。

此外，您可以使用命名空间来进一步组织您的代码。

Answer 2

对此没有严格而快速的答案，但要记住的一件事是，如果您将尽可能多的 javascript 放在外部文件中，它可以被缓存，这将使后续访问页面的速度更快。

我倾向于遵循的规则是：

• 可以在多个地方使用的所有代码都放在外部文件中
• 没有外部文件包含实际执行任何操作的代码，这些文件用作我可以使用的代码库。
• 页面本身包含最少的 javascript 代码来初始化我的库中的代码。
• 如果此初始化代码需要超过 10 行左右的代码，那么值得考虑将其放入库中的函数/方法中
• 所有 javascript 都尽可能靠近页面底部，就在</body>标记之前。这是因为当浏览器遇到<script>标记时，它将停止呈现页面并在继续之前评估脚本。这会使用户感觉页面变慢（尽管加载时间没有实际差异，但感觉很重要！）
• 由于上述原因，只有绝对必须进入头部的脚本才会放在那里。

编辑：如果您在页面中包含大量 javascript 文件，那么值得考虑将它们合并为一个文件。这是因为<script src="...">页面中的每个标签都会触发一个 HTTP 请求，并且规范说在任何时候每个域只能打开两个请求。将它们全部放在一个文件中还会增加使用 JS 压缩器（例如closure 或 YUI）的好处，以及使用 mod_gzip 的好处

yslow 是确定优化以加速页面加载的好工具，它提供了大量有关 javascript 文件优化的建议。.