有没有组织 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 都尽可能靠近页面底部，就在 标签。这是因为当浏览器遇到
• 由于上述原因，只有绝对必须放在头部的脚本才会被放在那里。

编辑：如果您在页面中包含大量 javascript 文件，那么值得考虑将它们合并到一个文件中。这是因为页面中的每个

yslow 是一个确定优化以加速页面加载的好工具，它有很多提供有关 javascript 文件优化的建议。 。

Answer 3

如果您使用面向对象的设计策略，那么“代码在哪个文件中”的答案几乎不言而喻。

javascript 的重要部分（类定义和大量方法）应该放入适当的 .js 文件中，（类定义通常有自己的 .js 文件）
但初始化代码应该进入使用它们的 html 页面。

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

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

一旦您想使用 jQuery，只需添加 jQuery 脚本即可。
也想要这个页面上的插件吗？也添加那个。

Answer 4

我想我理解你的问题是正确的，所以你可以用模块组织你的代码，这些模块将进一步连接在一个文件中。

对于模块，您可以使用 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);

希望有帮助！