6

我刚刚开始研究 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”类的缩略图时可以出现的灯箱 - 将使用不显眼的 Javascript。

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

Edit2 - 接受的答案

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

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

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

“@Kristen - 你是对的，就像很多编程主题一样，有不止一种方法，人们会强烈地坚持他们的信念！如果我们谈论一个按钮的单一方法，我完全理解你在哪里'来自...

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

4

4 回答 4

14

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

  • 将功能（“行为层”）与网页的
    结构/内容和表示分离
  • 避免传统 JavaScript 编程问题的最佳实践（例如浏览器不一致和缺乏可扩展性）
  • 逐步增强以支持可能不支持
    高级 JavaScript 功能的用户代理

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

从学习 jQuery

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

您可能想看看jQuery in Action，我强烈推荐它。您可以在本书的主页上对第 1章和第 5章进行示例。我认为这样做可以进一步了解为什么分离可以很好地工作。

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

编辑：

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

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

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

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

于 2009-03-07T09:32:27.373 回答
2

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

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

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

于 2009-03-07T09:44:27.280 回答
1

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

class="MyFormSubmit" 变得像阅读 onClick="return MyFormSubmit();

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

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

于 2009-03-07T15:18:47.460 回答
0

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

于 2009-03-07T09:28:34.510 回答