Question

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

我在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（）来验证数据，为页面添加视觉效果，然后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，以便更多地了解＆amp;什么时候应该使用。

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

Russ的最终评论特别有用，在此重复：

“@Kristen - 你很对，很多   编程主题，还有更多   而不是一种方法，人们会   强烈支持他们的信仰！如果   我们在谈论一种方法   对于一个按钮，我完全   了解你来自哪里......

如果我们谈论很多   JavaScript，具有相同的函数调用   对于多个元素，不同   函数调用不同的方法，   我认为会更多   难以自己混合内联   和不引人注意的方法，它   采用一个或更好的会更好   其他方法“

Answer 1

Unobtrusive JavaScript是将JS代码与标记分离的主要驱动程序

从网页中分离功能（“行为层”）   结构/内容和介绍

避免传统JavaScript问题的最佳做法   编程（如浏览器   不一致和缺乏   可扩展性）

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

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

来自Learning jQuery

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

您可能需要查看jQuery in Action，我强烈推荐它。您可以在Chapter 1上对Chapter 5和book's homepage进行抽样。我认为这样做可以进一步深入了解为什么分离能够很好地发挥作用。

最后，看看this question，其答案详细说明了如何在DOM节点上找到事件监听器。

修改

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

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

更容易找出哪个 elements调用该函数来处理声明为内联时的事件在每个元素或声明中在一个地方，在外面标记？

如果要添加到该内容中该怎么办？在何时调用该函数的元素每个人都提出了这个事件？是否更容易/更好地添加事件处理程序内联到每个元素或者在一个地方更改代码？

Answer 2

文档就绪事件就在文档加载事件之前。加载DOM后就会出现文档就绪，这样在开始处理之前所有元素都存在。

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

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

Answer 3

随着时间的推移，我认为你习惯了jQuery语法并阅读：

class =“MyFormSubmit”与阅读onClick =“返回MyFormSubmit（）;

一样有用

权力真正开始发挥作用（除了其他海报提到的所有好处）是你可以轻松地通过与网页上的其他动作相关联的选择器来改变onClick绑定，其方式似乎永远不会出现最初他们自己。

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

Answer 4

您可以通过这种方式将UI逻辑与实际的HTML设计分开。

JQuery：为什么不引人注目的JavaScript /文档就绪功能而不是OnClick事件？

4 个答案: