JQuery:为什么不引人注目的JavaScript /文档就绪function而不是OnClick事件?

我刚刚开始关注JQuery。 我目前在我的网络应用程序中没有任何AJAX。

我在HTML中的现有JavaScript看起来像:

Find what?

这将显示[添加]和[查找]的按钮。 对于Find,有必要提交表单,我使用MyFormSubmit()validation数据,为页面添加视觉效果,然后POST数据。

我可以为Find按钮添加一个CLASS或ID,在JQuery中我可以编写如下内容:

 $(function() { $(".MySearchButtonClass").click(function() { // validate and process form here }); }); 

在我与JQuery理解的“新手”阶段,我不明白为什么我会这样做

我的旧方法识别对象附近的方法。 在用户按下按钮之前,JS可能存在未加载的风险(是否存在?JS的LOAD位于页面顶部)。

在加载文档之前,JQuery Document Ready方法不会被激活(我假设JS已经存在并准备好运行了吗?),但它将代码移动到我的HTML文件的一个单独部分 – 所以当我在HTML源代码中看到了MyButtonArray DIV,对我而言哪些对象有方法,哪些对象没有方法。

能否帮助我了解我的选择以及我应该注意的好处/问题?

编辑 :我觉得DOM操作 – 比如点击任何带有类“LightBoxThumb”的缩略图时可以出现的LightBox – 会使用Unobtrusive Javascript。

但是,我正在努力说服自己,具有特定操作的按钮应该以这种方式应用其方法。 (我当然不会在按钮上放任何代码而不是单个函数调用“其他地方”的东西,但在我看来,这是我最好的线索,关于该按钮的作用,以及不显眼的Javascript图层可能会更难确定。)

Edit2 – 接受的答案

我采取了Russ Cams的回答。 它以一种有助于我理解更多关于如何以及何时应该使用它的方式来描述Unobtrusive Javascript。

目前(当我有更多经验时可能会改变!)我会坚持使用OnClick事件对一个对象进行单一的,不变的动作,因为我觉得我更容易调试 – 并诊断出现问题。 对于允许单击标题列进行排序(以及该类型的情况)的表上的ZebraStripes,我可以看到Unobtrusive Javascript方法的好处

Russ的最终评论特别有用,在此重复:

“@Kristen – 你是对的,就像许多编程主题一样,有不止一种方法,人们会强烈支持他们的信念!如果我们谈论单一按钮的单一方法,我完全理解你在哪里来自……

如果我们谈论的是大量的JavaScript,同一个函数调用多个元素,不同的函数调用不同的方法等等。我认为自己混合内联和不显眼的方法会更加困难,而且它会是更好地采用一种或另一种方法“

不引人注目的JavaScript是将JS代码与标记分离的主要驱动因素

  • 从网页中分离function(“行为层”)
    结构/内容和演示
  • 避免传统JavaScript编程问题的最佳实践(例如浏览器不一致和缺乏可伸缩性)
  • 逐步增强以支持可能不支持的用户代理
    高级JavaScriptfunction

使用document.ready中的代码,它将在DOM加载之前和加载页面内容之前执行

从学习jQuery

使用$(document).ready(),您可以在窗口加载之前将事件加载或触发或者您希望它们执行的操作。

你可能想看看jQuery in Action ,我强烈推荐它。 您可以在本书的主页上对第1 章和第5 章进行抽样。 我认为这样做可以进一步深入了解为什么分离能够很好地发挥作用。

最后,看一下这个问题的答案,详细说明如何在DOM节点上找到事件监听器。

编辑:

一些想法可能会说服你为什么不引人注目的JavaScript可能是一个好主意。

想象一下,你有一个函数绑定为一个事件处理程序,用于在每个元素上引发的同一事件 –

  • 当声明在每个元素中内联,或者声明是在标记之外的一个地方时,是否更容易找出哪个元素调用该函数来处理事件?

  • 如果要在每个函数上引发事件时添加到调用该函数的元素,该怎么办? 将事件处理程序内联添加到每个元素或在一个地方更改代码会更容易/更好吗?

文档就绪事件就在文档加载事件之前。 一旦加载了DOM就会发生文档就绪,这样在开始处理之前所有元素都存在。

所以是的,JS将在文档呈现时准备就绪。 关于绑定的另一点是,当发生cetain操作时,它对于更改绑定到元素非常有用。

如果您愿意,仍然可以在元素上声明操作。

随着时间的推移,我认为你习惯了jQuery语法和阅读:

class =“MyFormSubmit”变得像阅读onClick =“返回MyFormSubmit();

function真正开始发挥作用(除了其他海报提到的所有好处)是您可以轻松地通过选择器更改onClick绑定,这些选择器与网页上的其他操作相关联,这些方式最初似乎不会出现。

我问自己的一个问题是,我计划使用任何新工具有多深,如果我计划大量使用框架或库,那么编写我的代码“更原生”的编码风格将变得更加自然和其他了解该工具的开发人员会发现代码更清晰,更易理解。

您这样做是为了将UI逻辑与实际的HTML设计分开。