组织Javascript代码的最佳方式

Question

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

Answer 1

我做了两件事:

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

如果您的网站是一个页面,那么将其内联.

如果您的网站是20页,它们都使用JavaScript的一点点,把它们都放在一个文件,它包含在每一页上,并呼吁与inlien JavaScript作为必要的功能,每个文件.

我在PHP中使用Supercharge Javascript来写这个以及更多内容.当然它是特定于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不在页面中,则不会发生任何事情.最终这已经足够了代码将页面加载时间增加近半秒(并且网站不是那么大).