Question

你们如何组织你的javascript代码？我知道将代码存储在外部.js文件中是一个好习惯，对于在多个页面中运行的代码来说这很好但是如果你有20个页面，你如何组织，并且只有1个使用特定的功能。您是为该1页创建新的外部文件还是内联创建代码？

Answer 1

我做了两件事：

我将所有网站的Javascript放在一个或多个文件中;
我在每个使用任何Javascript的页面上包含该文件;
这些文件被有效地缓存，以便它们只被下载一次（直到它们改变）;和
页面从这些外部文件中调用所需的功能。

如果您的网站是一个页面，则将其内联。

如果您的网站是20页并且他们都使用了一点Javascript，请将其全部放在一个文件中，将其包含在每个页面中，并根据需要在每个文件中使用inlien Javascript调用函数。

我在Supercharging Javascript in PHP中写了这个以及更多内容。当然它是特定于PHP的，但原则是普遍的。

基本上每个额外的HTTP请求都是个问题。因此，如果您有20个页面，每个页面都有不同的Javascript文件，那么这就是一个问题，即使这些文件很小。最好将所有Javascript组合在一个文件中，只下载一次（使用有效的缓存）并使用您需要的内容。

举个例子。外部JS文件包含：

function delete_user(evt) { ...}
function suspend_user(evt) { ... }
function unsuspend_user(evt) { ... }

您的某个网页包含：

$(function() {
  $("#delete").click(delete_user);
  $("#suspend").click(suspend_user);
  $("#unsuspend").click(unsuspend_user);
});

通过这种方式，您可以获得包含所有网站的Javascript的外部JS，但实际上并未使用它。使用来自页面中的内联代码。这样就没有更大的JS文件的开销。

无论你做什么，都不要在你的Javascript文件中放入所有初始化。我曾经犯过这个错误，并将一个巨大的$（function（）{...}函数放入外部文件中，理由是如果相关的ID不在页面中，则不会发生任何事情。最终这已经足够了代码将页面加载时间增加近半秒（并且该网站大不了）。

Answer 2

浏览器不应该重新下载javascript文件，所以我会把它放到单个Javascript文件中。这节省了另一个连接/请求到Web服务器，它将代码保存在一个位置，而不是在HTML / JSP / PHP / etc文件中包含script标记和代码。即，它更易于维护，并且获得代码的开销非常小（除非它是一个1000行的怪物！但这完全是另一个问题），即使它没有被使用。

对于非常特殊的情况，并非我在某些文件中没有script块。最后，它归结为你满意的东西 - 但整个项目的一致性是最重要的，所以不要在一个地方有一个一个脚本，然后在其他地方做一些不同的事情。

Answer 3

始终将JavaScript放在HTML外部的文件中。页面中存在的JavaScript问题是它通常存在于全局命名空间中，这很容易导致命名空间冲突，从而导致代码崩溃。

因此，始终将JavaScript放在外部文件中。

据说，你应该以面向对象的方式组织你的代码。尝试将表示单个执行点的整个应用程序捕获到单个命名函数。始终使用每个函数的单个var命令编写代码，该命令应位于函数的顶部，以便您的代码更易于阅读。确保使用var命令声明所有变量和函数，否则它们将进入全局命名空间，这可能是失败的。将一个巨型函数的执行部分放入较小的子函数中，因为这可以在调试或编写增强功能时指向特定的命名块时使代码更易于维护。

此外，始终通过JSLint运行代码以验证语法准确性。

Answer 4

如果您只有少量代码，我认为不值得将其拆分。

根据您拥有的JS数量，请考虑一个构建过程，该过程可以将您单独的JavaScript文件连接成一个简化的单个下载。

YUI非常模块化。它们具有“核心”包含，然后您可以使用实际使用的小部件来补充它们。例如，我没有兴趣使用他们的文件上传器小部件，所以永远不要包含JS。

将JS缓存到将来的日期。如果需要进行更改，请在SRC属性的末尾附加一个版本标记，即my-code.js？v = 91

使用名称空间来避免污染全局范围。同样，YUI在这方面非常有条理 - 参见YAHOO.namespace（）函数。

Answer 5

对于只有一个函数，最好是内联编码。我不会包含一个100KB的Util脚本文件，只是在其中调用Trim函数。

如果文件已经被缓存，那么如果你在一个只调用文件中的一个函数的页面中引用它就不会有问题。

Answer 6

我想说把它放在外部文件中。您无论如何都需要为它添加新功能，但从SEO的角度来看，最好将它保存在外部文件中。

Answer 7

这取决于。你可能有一堆网页。其中一个页面可能只使用一个函数，其他页面可能使用其他一些不同的函数。我首先将函数分类为Utility函数，然后编写一个Utility.js。其他功能也是如此，并将它们放在各自的js文件中。

Answer 8

如果我有选择，我将JS函数放在外部文件中，但不是全部放在一个文件中。缓存或不缓存，我按其功能对文件进行分组，并将它们组织为类似于Java包。如果我有一个实用程序函数，比如像trim()这样的泛型，那就是最顶层的JS文件，所有页面都可以使用它。如果我对网站的某个部分（在其他部分中未使用）有某些特定内容，就像子包一样，只针对该特定部分...等等。

当然你必须使用常识，所以你不要过度，并且让我们说每个JS文件的功能。如果您有精细的JS文件，那么当您的网站发展并且您发现自己将功能从子包移动到上层包或其他方式时，这会影响您。我认为一个父实用程序JS和每个站点功能一个JS应该在大多数情况下都足够了。

组织Javascript代码的最佳方式

8 个答案: