Question

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

带有存储一些对象的1 js文件来自a的同步信息服务器，并且最重要方法（应该跨越应用程序）。其中之一方法包括DOM元素生成器（然后我从中添加在所需的网页内。）。
1 js 文件用一个很大的方法当window.ready添加时调用对一堆DOM对象的行为（仅与网页相关）。
有些标签已填满在页面中的代码没有使用第二个js文件。此代码也与网页相关。

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

有没有最好的方法来整理Javascript代码？

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

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

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

Answer 1

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

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

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

Answer 2

这个问题没有硬性和快速的答案，但要记住的一件事是，如果你在外部文件中放入尽可能多的javascript，它可以被缓存，这将使后续访问页面更快。

我倾向于遵循的规则是：

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

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

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);

希望它有所帮助！

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

4 个答案: