处理分布在多个页面上的几个不同的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函数是合适的。
答案 0 :(得分：3)
您是否考虑过为要附加到元素的每种行为创建一个类？这样，您可以在页面之间重用功能，以防万一有重叠。
例如，假设您想要的某些页面上有一个按钮，可以在页面上弹出一些额外的信息。你的HTML看起来像这样：
<a href="#" class="more-info">More info</a>
您的JavaScript可能如下所示：
jQuery(".more-info").click(function() { ... });
如果您坚持某种约定，您还可以向链接添加多个类，并在需要时让它执行一些不同的操作（因为jQuery将允许您在元素上堆叠事件处理程序）。
基本上，您专注于将JavaScript附加到的每种元素的行为，而不是选择要附加功能的元素的特定ID。
我还建议将所有JavaScript放入一个公共文件或有限数量的常用文件中。主要原因是，在第一次页面加载之后，JavaScript将被缓存，并且不需要在每个页面上加载。另一个原因是，它会鼓励您为整个站点中可用的按钮开发常见行为。
在任何情况下，我都不鼓励在html（选项＃1）中直接附加onlick。它是突兀的，限制了JavaScript的灵活性。
编辑：我没有意识到Diodeus发布了一个非常相似的答案（我同意）。
答案 1 :(得分：1)
我会尽可能使用JQuery's 文档准备
$(document).ready(function() {
// jQuery goodness here.
});
答案 2 :(得分：1)
首先，我不明白为什么你认为设置事件监听器是突兀的？
但......
解决方案一个是个坏主意
<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中获取此代码，则其加载时间将减少。
答案 3 :(得分：1)
你可以破解课程名称并以创造性的方式使用它：
<a class="loadevent functionA" id="link1" href="#" onclick="myFunc()" />
...在另一页......
<a class="loadevent functionB" id="link1" href="#" onclick="myFunc()" />
您可以按类名“ loadevent ”进行选择，并获取该标记的其他类名，另一个类名是您想要挂钩的实际函数名。这样一个处理程序就能够完成每个页面，你所要做的就是提供相应的类名。
答案 4 :(得分：0)
虽然克里斯有点正确，你可以这样做：
$(document.ready(function() {
// A
});
$(document.ready(function() {
// B
});
$(document.ready(function() {
// C
});
并且将调用所有函数（按照它们遇到的顺序），值得一提的是ready（）事件与onload（）不完全相同。来自jQuery API docs：
绑定要执行的函数 每当DOM准备就绪时 遍历和操纵。
您可能需要load()事件：
$(document).load(function() {
// do stuff
});
将等待加载图像等。
答案 5 :(得分：0)
如果不使用kneejerk jQuery，如果页面变化JS相对较轻，我会将其包含在内联头文件脚本中（绑定到onload事件触发器，是），类似于＃4，但我不会这样做一个单独的JS脚本和下载，我想用服务器端包括处理这个 - 但是你想要处理它（我？我将使用XSLT包括）。
这为您提供了高度的模块化分离，并使下载尽可能轻松。
答案 6 :(得分：0)
有很多不同的页面，我会允许对这些页面进行不同的事件处理......
但是，如果差异很小，我会尝试找到一个可以依赖的模式，并且可能会制作一个真正简单的算法来区分页面...
我要采取的最后一件事是使用（大）库（jquery，mootools或其他什么！ - ），如果我不打算以任何其他方式使用它...
现在，您正在谈论最佳实践，最佳实践始终是您的用户将体验为最轻的解决方案，并且应该以最广泛的方式理解用户，包括开发人员等等。那个网站！o]