javascript - 加载 Javascript 的最佳实践

Question

处理分布在许多页面上的几种不同 onload 脚本的最佳方法是什么？

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

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

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

或者外部js文件中很长的文档准备功能，

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

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

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

解决方案 1 看起来最不优雅并且相对突兀，解决方案 2 将导致非常冗长的加载功能，解决方案 3 没有 1 那么突兀，但仍然不是很好，解决方案 4 将加载要求用户下载单独的 js 文件他访问的页面。

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

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

score 3 · Accepted Answer

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

例如，假设在某些页面上，您想要一个按钮，该按钮会在页面上弹出一些额外的信息。您的 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 发布了一个非常相似的答案（我同意）。

score 1 · Accepted Answer

如果可能的话，我会使用JQuery 的文档

  $(document).ready(function() {

      // jQuery goodness here.
 });

score 1 · Accepted Answer

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

但 ...

解决方案一是个坏主意

<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 中取出，那么它的加载时间将会减少。

score 1 · Accepted Answer

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

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

...在另一页上...

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

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

score 0 · Accepted Answer

虽然 Chris 在某种程度上是正确的，但您可以这样做：

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

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

绑定要在 DOM 准备好被遍历和操作时执行的函数。

您可能需要load()事件：

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

这将等待加载图像等。

score 0 · Accepted Answer

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

这既为您提供了高度的模块化分离，又使下载尽可能轻。

score 0 · Accepted Answer

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

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

如果我不打算以任何其他方式使用它，我会求助的最后一件事是使用（大）库（jquery、mootools 或其他任何东西！-）......

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

7 回答 7