javascript - 在哪里放置我的 JS 代码以及在哪里/如何加载多个 jQuery 插件？

Question

我有几个问题有些相关，所以我将它们全部发布在 SO 上的一个问题上......

问题 1:

我目前正在做这个 Facebook 应用程序，我在其中使用 jQuery UI 选项卡，只有 4 个，其中 2 个是通过 Ajax 加载的。主页是 index.html，这是放置标签代码的地方，对于通过 Ajax 加载的 2 个标签，我有两个不同的文件，tab1.html 和 tab2.html。

目前，jQuery 选项卡初始化和 Facebook JavaScript 初始化是在 index.html 上完成的。 tab1.html 和 tab2.html 都有属于这些页面的 JavaScript 代码。例如，tab2.html 有一个表单，并且有一些 JS(带有 jQ​​uery)代码来验证表单，此代码与 tab1.html 无关，因为 tab1.html 上的 JS 代码与 tab2.html 无关。

我的问题是，我应该继续这样做还是将 index.html、tab1.html 和 tab2.html 中的所有 JS/jQuery 代码聚合到一个 global.js 文件中，然后将其包含在 index.html 中？

虽然我想这样做，但如果用户从不打开 tab1 或 tab2，就会加载不相关的代码。使用单个 global.js 文件的好处是我可以打包/缩小文件，如果我将每个代码块包含在每个相应的 tabX.html 文件中，我就无法做到这一点。

问题 2:

当我使用 jQuery 时，我还使用了很多插件(目前实际上只有 3 个，但这个数字可能会增加)。其中一些提供了一个缩小的 JS，我在可用时使用它们，当它们不可用时，我当然使用普通版本。

还有请求问题。如果我有很多插件，比如 10 个，那么这些插件将有 10 个请求。还有一个事实是，有些插件在 tab1.html 中使用，但在 tab2.html 中没有使用，反之亦然。

我应该如何在单个 Web 请求中以缩小/打包版本加载所有插件？我应该在发布我的应用程序之前手动执行此操作(将它们打包并合并到一个文件中)还是我可以使用 PHP version of Dean Edwards's Packer并即时打包/合并所有插件？这是一个好方法吗？

问题 3:

如果第 1 季度的答案类似于“将所有代码合并到一个 global.js 文件中”，我是否应该将 global.js 文件包含在上面第 2 季度描述的打包/合并脚本中？

这样做会简化一切。我可以将我的开发环境与所有 .js 文件、插件和 global.js 正确地组织在适当的文件夹中，而不用担心其他任何事情。打包/合并应该处理其余部分(从各自的文件夹中提取文件，发送各自的 JS header 并输出一个打包的 .js 文件)。

让我最困惑的一件事是，并非所有插件都用于每个选项卡，并非所有代码也适用于每个选项卡。尽管如此，代码块对于每个选项卡和索引都是全局的。这也简化了一切:a) 我不必担心将需要的代码添加到每个 tabX.html 文件中，我可以简单地将它们视为 HTML 模板吗？ b) 我不必费心在我需要的地方包含必要的插件，因为我目前正在使用 jQuery 中的 $.getScript() 来加载我需要的插件，并且只在我需要它们时加载它们，但我是不确定这是一个好方法，而且代码感觉像这样又脏又丑。

Answer 1

问题 1:

将它们全部打包到一个 .js 文件中。这将使维护更容易，并且用户加载他们可能不使用的一点 js 的微小开销无关紧要。我还会让 Google 为您加载 jQuery 库，然后将您的所有 js 代码放在一个单独的文件中。

问题 2:

由于这些插件并没有真正改变，我会手动组合它们。 Closure Compiler擅长这个。缩小时使用不会发出任何警告的最高设置。

问题 3:

是的，你会想要缩小 global.js

当浏览器下载 global.js 时，它会被缓存一段时间。因此，当您在另一个页面上再次调用整个 global.js 时，它不会重新下载，而是首先查看您的本地副本。因此，您一开始在初始下载时需要多做一些工作，但从那时起，速度应该会更快。