代码之家 › 专栏 › 技术社区 › erik

加载Javascript的最佳实践

onload javascript

erik · 技术社区 · 17 年前

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

例如,我有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函数是合适的。

7 回复 | 直到 17 年前

Matt Ephraim 17 年前

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

例如,假设在某些页面上,您想要一个在页面上弹出一些额外信息的按钮。你的html可能看起来像这样:

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

你的JavaScript可能看起来像这样:

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

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

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

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

无论如何,我不建议直接在html中附加在线链接(选项#1)。它很突兀,限制了你使用JavaScript的灵活性。

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

ForYourOwnGood 17 年前

首先,我不明白为什么你认为设置事件听众是突兀的?

但是。..

解决方案一是个坏主意

<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中去掉,那么它的加载时间就会减少。

annakata 17 年前

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

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

…在另一页上。..

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

您可以按类名选择“ 负载事件 “并获取该标记的其他类名,另一个类名是您要挂接的实际函数名。这样,一个处理程序就可以完成每个页面,您所要做的就是提供相应的类名。

cgreeno 17 年前

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

  $(document).ready(function() {

      // jQuery goodness here.
 });

cletus 17 年前

虽然Chris的说法有些正确,但你可以这样做:

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

所有函数都将被调用(按遇到的顺序),值得一提的是,ready()事件与onload()并不完全相同。从 jQuery API docs :

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

你可能想要 load() 事件改为:

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

其将等待图像等被加载。

annakata 17 年前

在不使用膝跳式jQuery的情况下,如果页面变化的JS相对较轻,我会将其包含在类似于#4的内联头脚本中(绑定到onload事件触发器,是的),但我不会将其作为单独的JS脚本进行下载,我希望用服务器端的include来处理这个问题——不管你想怎么处理(我?我会用XSLT include)。

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

roenving 17 年前

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

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

如果我不打算以任何其他方式使用它,我最后会求助于使用(大)库(jquery、mootools或任何东西!-)。..

现在你在谈论最佳实践,最佳实践总是你的用户将体验到的最轻的解决方案,在这方面,应该以尽可能广泛的方式理解用户,包括维护该网站的开发人员等!o]