javascript - onload Javascript 最佳实践

Question

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

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

是否最好在每个单独的页面上设置这样的onclicks，

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

或者外部js文件中很长的文档就绪函数，

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

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

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

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

这些是最好的(或最差的)吗？或者有没有我没有想到的解决方案 5？

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

Answer 1

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

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

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

您的 JavaScript 可能如下所示:

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

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

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

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

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

编辑:我没有意识到 Diodeus 发布了一个非常相似的答案(我同意)。