加载 Javascript 的最佳实践答案

【问题标题】：Best Practices for onload Javascript加载 Javascript 的最佳实践
【发布时间】：2010-10-03 15:24:31
【问题描述】：

处理分布在多个页面的多个不同的加载脚本的最佳方法是什么？

例如，我有 50 个不同的页面，当 dom 准备好时，我想在每个页面上设置不同的按钮单击处理程序。

最好在每个单独的页面上设置这样的点击次数，

或者外部js文件中很长的文档准备函数，

Element.observe(window, 'load', function() { 如果（$（'link1'））{ // 设置点击处理程序 } 如果（$（'link2'））{ // 设置点击处理程序 } ... }

或将每个if ($('link')) {} 部分拆分为脚本标签并将它们放置在适当的页面上，

或者最后，将每个 if ($('link')) {} 部分拆分为自己单独的 js 文件并按页面适当加载？

解决方案 1 似乎最不优雅并且相对突兀，解决方案 2 会导致加载函数非常冗长，解决方案 3 不如 1 突兀但仍然不是很好，解决方案 4 将加载需要用户下载单独的他访问的每个页面都有一个 js 文件。

这些中的任何一个是最好的（或最差的）还是有我没有想到的解决方案 5？

编辑：我问的是设计模式，而不是使用哪个 onload 函数。

【问题讨论】：

标签： javascript onload

【解决方案1】：

您是否考虑过为要附加到元素的每种行为类型创建一个类？这样你就可以在页面之间重用功能，以防有重叠。

例如，假设您希望在某些页面上有一个按钮，该按钮会在页面上弹出一些额外的信息。您的 html 可能如下所示：

<a href="#" class="more-info">More info</a>

您的 JavaScript 可能如下所示：

jQuery(".more-info").click(function() { ... });

如果您坚持某种约定，您还可以向一个链接添加多个类，并在需要时让它做一些不同的事情（因为 jQuery 允许您在一个元素上堆叠事件处理程序）。

基本上，您关注的是要附加 JavaScript 的每种元素的行为，而不是挑选要附加功能的元素的特定 ID。

我还建议将所有 JavaScript 放入一个公共文件或有限数量的公共文件中。主要原因是，在第一个页面加载后，JavaScript 将被缓存，不需要在每个页面上加载。另一个原因是，它会鼓励您为整个站点中可用的按钮开发通用行为。

无论如何，我不鼓励直接在 html 中附加 onlick（选项 #1）。它很突兀，并限制了您使用 JavaScript 的灵活性。

编辑：我没有意识到 Diodeus 发布了一个非常相似的答案（我同意）。

【讨论】：

【解决方案2】：

首先我不明白为什么你认为设置事件监听器很突兀？

但是……

解决方案一是个坏主意

<a id="link1" href="#" onclick="myFunc()" />

因为你应该把化妆和剧本分开。

解决方案二是个坏主意

Element.observe(window, 'load', function() {
  if ($('link1')) {
    // set click handler
  }
  if ($('link2')) {
   // set click hanlder
  }
  ...
}

因为您在每个页面都使用了大量不需要的 javascript。

解决方案三是一个坏主意，原因与我说解决方案一是一个坏主意的原因相同。

解决方案 4 是最好的主意，是的，它每页有一个额外的负载，但是如果您只为每个页面拆分每个 if ($('link')) {} 部分，那么文件大小不会那么大吗？另外，如果你把这段代码从全局 javascript 中取出，那么它的加载时间将会减少。

【讨论】：

由于您所说的原因，解决方案一很突兀。您的标记应该与您的脚本分开。我没有（或至少不打算）说事件处理程序是突兀的。
哦，好吧，据我了解，突兀的 javascript 是给用户带来困难的代码，比如弹出窗口，而不是不合适的代码。

【解决方案3】：

您可以破解类名并以创造性的方式使用它：

<a class="loadevent functionA" id="link1" href="#" onclick="myFunc()" />

...在另一个页面上...

<a class="loadevent functionB" id="link1" href="#" onclick="myFunc()" />

您可以按类名“loadevent”选择并获取该标签的其他类名，其他类名是您要挂钩的实际函数名。这样一个处理程序就可以处理每一页，而您所要做的就是提供相应的类名。

【讨论】：

【解决方案4】：

如果可能的话，我会使用JQuery's 准备好文档

  $(document).ready(function() {

      // jQuery goodness here.
 });

【讨论】：

【解决方案5】：

虽然克里斯有些正确，因为您可以这样做：

$(document.ready(function() {
  // A
});
$(document.ready(function() {
  // B
});
$(document.ready(function() {
  // C
});

所有函数都将被调用（按照它们遇到的顺序），值得一提的是，ready() 事件与 onload() 并不完全相同。来自jQuery API docs：

绑定要执行的函数每当 DOM 准备就绪时遍历和操纵。

您可能需要load() 事件来代替：

$(document).load(function() {
  // do stuff
});

它将等待加载图像等。

【讨论】：

【解决方案6】：

如果不使用膝跳 jQuery，如果页面变化的 JS 相对较轻，我会将其包含在类似于 #4 的内联标题脚本中（绑定到 onload 事件触发器，是的），但我不会这样做一个单独的 JS 脚本和下载，我希望通过服务器端包含来处理这个 - 但是你想处理它（我？我会使用 XSLT 包含）。

这为您提供了高度的模块化分离，并让下载尽可能轻松。

【讨论】：

阿门，关于“使用 jQuery”。我厌倦了所有无法解释流程的“只使用 jQuery”答案。

【解决方案7】：

有很多不同的页面，我会允许对这些页面进行不同的事件处理......

但是，如果差异很小，我会尝试找到一种我可以坚持的模式，并且可能会制作一个真正简单的算法来区分页面......

如果我不打算以任何其他方式使用它，我最不想使用的就是使用（大）库（jquery、mootools 或其他任何东西！-）...

现在您说的是最佳实践，最佳实践始终是您的用户体验到的最轻量级的解决方案，因此，应该以尽可能广泛的方式理解用户，包括要维护的开发人员等那个网站！o]

【讨论】：