有没有组织Javascript代码的最佳方法？

我一直在做一个小型web应用程序，使用jQuery在Javascript中添加行为和DOM对象。问题是，代码开始快速增长，我不知道将其存储在哪里（无论是在正在使用的同一页面中，还是在一个大的js文件中）。 在这一点上，我有：

• 1个js文件，其中一个对象存储一些 从数据库同步的信息 服务器，以及最重要的 方法（应在整个系统中使用） 应用程序）。其中之一 方法包括一个DOM元素 生成器（然后我从中添加） 在所需的网页中）
• 1 js 使用一个大的方法创建文件，该方法是 当window.ready添加 一组DOM对象的行为（仅与网页相关）
• 一些标签被填满了 页面中的代码没有 使用第二个js文件。此代码也与网页相关

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

有组织Javascript代码的最佳方法吗？

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

你们觉得怎么样？提前谢谢

---

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

如果使用面向对象的设计策略，“代码在哪个文件中运行”的答案几乎可以自己回答

javascript的健壮部分（您的类定义和大量方法）应该放入相应的.js文件中（类定义通常有自己的.js文件） 但是初始化代码应该进入使用它们的html页面

jQuery提供了一个很好的例子：

对于主类和函数定义，它有自己的.js文件， 它允许您添加执行特定任务的插件，每个插件都位于各自的.js文件中

一旦您想要使用jQuery，只需添加jQuery脚本。

---

想要在这个页面上的插件吗？我通常将全局脚本存储在一个通用文件中，每个页面都有单独的脚本文件

您可以将特定于页面的脚本文件与页面一起存储（在同一文件夹中），也可以将站点的目录结构复制到公共“脚本”文件夹中（如果您有许多脚本文件，则很有用），这两种方法都可以将脚本文件命名为页面对应文件，以简化映射

---

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

这个问题没有确切的答案，但需要记住的一点是，如果您在外部文件中放入尽可能多的javascript，它可以被缓存，这将使后续访问页面的速度更快

我倾向于遵循的规则是：

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

编辑：如果你在一个页面中包含了很多javascript文件，那么把它们合并到一个文件中是值得的。这是因为页面中的每个

标记都会触发一个HTTP请求，而规范规定每个域在任何时候只能打开两个请求。将它们全部放在一个文件中还将增加使用JS压缩程序（如closure或YUI）的好处，以及使用mod_gzip的好处

---

yslow是一个确定优化以加快页面加载的好工具，它提供了大量关于javascript文件优化的建议

我想我理解你的问题了，所以你可以用模块组织你的代码，模块将进一步连接到一个文件中

对于模块，您可以使用CommonJS技术。看起来是这样的：

(function(window) {
  var Module = {};

  window.Module = Module;
})(window);

以及补充：

(function(module) {
  module.NewProp = {};

})(window.Module);

当然，您可以使用自己的变量，而不是窗口等

而且，如果您使用Node.js，这是在服务器和客户端之间共享变量的好方法

(function(exports) {
  exports.Func = function(){};

})(typeof exports === 'undefined' ? wow : exports);

---

希望有帮助

将全局脚本存储在单个公共文件中是一种良好的做法（直到它变得巨大）+1@Timothy格罗特：问题不在于文件大小，而在于文件内容的使用频率。如果您有一个500 KiB的脚本，包含200个函数，并且每个函数都在每个页面中使用，那么没有理由拆分它，但是如果每个页面调用其中一个或两个函数，那么您可以创建一个“公共”子文件夹，并将每个函数放在单独的文件中。