javascript - 组织 Javascript 代码的最佳方式

Question

就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放， visit the help center以获得指导。

已关闭 11 年前。

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

Answer 1

我做了两件事:

1. 我将网站的所有 Javascript 放入一个或多个文件中；
2. 我在使用任何 Javascript 的每个页面上都包含该文件；
3. 这些文件会被有效缓存，因此只会下载一次(直到它们发生更改)；和
4. 页面从这些外部文件中调用所需的函数。

如果您的网站只有一页，则将其内联。

如果您的网站有 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);
});

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

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