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

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

document-ready unobtrusive-javascript jquery

6

Kristen · 技术社区 · 17 年前

HTML中现有的JavaScript如下所示:

<form ...>
<p>Find what? <input ...></p>
<div class="ButtonArray">
  <a href="AddRecord.ASP&amp;Action=ADD">ADD</a>
  <a href="#" onClick="return MyFormSubmit();">FIND</a>
</div>
</form>

显示[添加]和[查找]按钮。对于Find,必须提交表单,我使用MyFormSubmit()验证数据,向页面添加视觉效果,然后发布数据。

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

在我理解JQuery的“新手”阶段,我不知道收到

JQuery Document Ready方法在加载文档之前不会被激活(我假设这可以保证JS都存在并且准备好运行?),但它将代码移动到HTML文件的一个单独部分——因此当我在HTML源代码中看到MyButtonArray DIV时,我不清楚哪些对象有方法,哪些没有。

你能帮助我了解我的选择是什么,以及我应该注意哪些好处/问题吗?

:我认为DOM操作(例如,在单击任何具有类“LightBoxThumb”的缩略图时可以显示的LightBox)将使用不引人注目的Javascript。

然而,我努力说服自己,一个按钮,有一个具体的行动应该有它的方法应用在这种方式。(除了对“其他地方”的某个函数调用之外,我当然不会在按钮上添加任何代码,但在我看来,这是我了解该按钮功能的最佳线索,而不引人注目的Javascript层可能会使这一点更难确定。)

Edit2-接受答案

Russ的最后评论特别有用,在这里重复:

在编程主题中,还有更多不止一种方法,人们会坚决坚持自己的信仰!如果我们讨论的是单一方法对于一个按钮,我完全

如果我们谈论的是很多 JavaScript,具有相同的函数调用对于多个元素,不同的函数调用不同的方法, 自己很难混在一起和不引人注目的方法,而且 “其他办法”

4 回复 | 直到 17 年前

1

14

Community Mohan Dere 8 年前

Unobtrusive JavaScript

将功能(“行为层”)与网页的
结构/内容和介绍

避免传统JavaScript问题的最佳实践不一致和缺乏一致性可扩展性)

逐步增强以支持可能不支持的用户代理
高级JavaScript功能

对于document.ready中的代码,在加载DOM和页面内容之前,它不会执行

Learning jQuery

使用$(document).ready(),您可以让事件加载或激发,或者在窗口加载之前让它们执行任何操作。

jQuery in Action ,我强烈推荐。你可以取样 Chapter 1 Chapter 5 上 book's homepage

this question

编辑:

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

元素调用该函数来处理在一个地方,在加成
如果要添加到是否更容易/更好地添加事件处理程序内联到每个元素还是在一个地方更改代码?

2

Richard 17 年前

因此,是的,JS将在呈现文档时准备就绪。关于绑定的另一点是,在执行cetain操作时,将绑定更改为元素非常有用。

3

1

kevink 17 年前

随着时间的推移,我认为您已经习惯了jQuery语法并阅读:

class=“MyFormSubmit”变得像阅读onClick=“return MyFormSubmit()”一样信息丰富;

我问自己的一个问题是,我计划在多大程度上使用任何新工具,如果我计划广泛使用框架或库,那么用“更原生”的编码风格编写代码将变得更自然,其他了解该工具的开发人员将发现代码更干净、更易懂。

4

0

Thomas Stock 17 年前

这样做是为了将UI逻辑从实际的HTML设计中分离出来。