JQuery：为什么不显眼的 JavaScript / Document Ready 函数而不是 OnClick 事件？答案

【问题标题】：JQuery: Why Unobtrusive JavaScript / Document Ready function rather than OnClick event?JQuery：为什么不显眼的 JavaScript / Document Ready 函数而不是 OnClick 事件？
【发布时间】：2010-10-11 22:00:35
【问题描述】：

我刚刚开始研究 JQuery。目前我的 Web 应用程序中没有任何 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。

但是，我一直在努力说服自己，具有特定操作的按钮应该以这种方式应用其方法。（除了对“其他地方”的单个函数调用之外，我当然不会在按钮上放置任何代码，但在我看来，这是我关于该按钮功能的最佳线索，并且 Unobtrusive Javascript 层可能会使这更加困难来确定。）

Edit2 - 接受的答案

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

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

Russ 的最后评论特别有帮助，在此重复：

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

如果我们谈论很多 JavaScript，具有相同的函数调用对于一个以上的元素，不同的函数调用不同的方法，等我认为它会更多自己很难混在线和不引人注目的方法，它最好采用一个或其他方法”

【问题讨论】：

标签： jquery unobtrusive-javascript document-ready

【解决方案1】：

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

【讨论】：

谢谢，是的，我可以看到，但我的 HTML 中只有一个调用“MyFormSubmit()”。 MyFormSubmit() 的实际代码在一个单独的包含文件中 - 我只是认为它可以帮助我查看 HTML 标记上的方法，而不必在其他地方查看是否有方法
我必须承认我同意 Kristen 的观点：我发现维护/排除与单个 func 相关的 onclick 属性更容易，而不是分配的事件侦听器可能已附加或未附加在一点。
也许吧，但你真的需要看到 onClick 事件才能知道 btnSubmit 会做什么吗？如果我需要更改单击提交按钮时执行的函数，我只需将 .js 文件放入“关键事件”区域并搜索函数 btnSubmit_click()。
我还在脚本块中分配事件侦听器，因为它们可以很好地与动态创建的 DOM 对象配合使用。我将绑定放在 BindEmployeeEvents() javascript 函数中，每当用户添加员工时我都会调用该函数。静态按钮并不真正需要，我同意。

【解决方案2】：

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

功能（“行为层”）与网页的分离
结构/内容和展示

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

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

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

来自Learning jQuery

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

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

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

编辑：

一些想法可能会说服您为什么不显眼的 JavaScript 是个好主意。

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

更容易找出哪个元素调用该函数来处理声明内联时的事件在每个元素或声明中在一个地方，在外面标记？
如果要添加到调用该函数的元素事件是针对他们每个人提出的？添加内联到每个元素的事件处理程序还是在一处更改代码？

【讨论】：

谢谢；对 Unobtrusive JavaScript 的引用非常有帮助；我以前看过推荐的“jQuery in Action”，它在我的购物清单上！我将阅读示例章节。
PS 指向示例吟唱者的链接看起来是正确的，但从这个页面直接对我不起作用 - 但它们可以在该网站上的这个页面上找到：manning.com/bibeault
“在多个元素中的每一个上引发了相同的事件”这没问题 - 例如，在允许单击列标题进行排序的表格上的 Zebra Strips。我在这个单一方法提交按钮的情况下苦苦挣扎。
Kevink 建议 class="MyFormSubmit" 替换 onClick="return MyFormSubmit(); - 这对我来说似乎同样不引人注目！实际上我不知道如何使用样式类来识别 OnClick行动不是杂牌！
我认为这里要么有两种思想（就像许多编码“宗教”一样），要么我需要更多的 JQuery 经验才能“获得”它。

【解决方案3】：

文档就绪事件早于文档加载事件。一旦加载了 DOM，就会发生文档就绪，这样所有元素在您开始处理它们之前就已经存在。

所以是的，JS 将在文档呈现时准备就绪。关于绑定的另一点是，当某些动作发生时，它对于更改元素的绑定很有用。

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

【讨论】：

【解决方案4】：

随着时间的推移，我想你已经习惯了 jQuery 的语法和阅读方式：

class="MyFormSubmit" 变得和阅读 onClick="return MyFormSubmit(); 一样信息丰富

真正开始发挥作用的地方（除了其他海报提到的所有好处）是您可以轻松地通过选择器更改 onClick 绑定，该选择器与网页上的其他操作相关联，其方式似乎从未出现过最初是他们自己。

我问自己的一个问题是，我打算在多大程度上使用任何新工具自然和其他了解该工具的开发人员会发现代码更清晰、更易于理解。

【讨论】：