0

虽然已经有人问过了，但我想解决正确 jQuery 编程的问题。

方法#1：

<script>
     function DoClickAction() {
          // Some work
          return false;
     }
</script>

<a href="#" id="ActionButton" onclick="DoClickAction();">Do some work</a>

VS

方法#2：

<script>
     $(function() {
          $("#ActionButton").on("click", DoClickAction);
     }

     function DoClickAction() {
          // Some work
          return false;
     }
</script>

<a href="#" id="ActionButton">Do some work</a>

我正在和我的同事讨论这个问题，我认为这两种方法都有足够的利弊，不能说“这是正确的方法”，但如果我必须选择，我倾向于选择方法# 1、这是为什么：

方法#1优点：

  • 在调试其他人的代码时，您可以轻松地跟踪当有人按下链接时执行了哪些 jQuery 代码。
  • 当您动态加载（AJAX 调用）内容时，它将始终有效，无需重新绑定您的 jQuery 事件。

方法#2优点：

  • 它将产生更少的 HTML 代码供浏览器下载，因为脚本文件将被缓存并且 onclick 属性不是必需的。虽然这个例子使用了更多的代码。
  • 您可以通过使用相同的属性轻松地重用代码，尽管使用带有 1 功能的 onclick 是一回事。

您对此有何看法？

4

2 回答 2

4

让我专注于方法1的缺点，而不是列出任何一种方法的优点：

  • 更改函数名称 == 更改整个标记
  • 所有事件处理程序都驻留在全局范围内。那么，使用闭包可能会有点痛苦。
  • 动态添加新元素（通过 JS 或通过 ajax 响应）意味着您要么必须解析标记并一一添加属性，要么必须发送本质上包含 JS 函数调用的标记。不安全，不干净
  • 每个属性都是一个新的侦听器。你拥有的属性越多，事件循环就会变得越重
  • 将 JS 和 HTML 混合在一起并不被认为是好的做法。将其视为关注点分离。标记用于为客户端提供 UI。JS 的工作（在浏览器中）是增强用户体验。他们必须一起工作，但有不同的任务。因此，它们应被视为独立的实体。

就第二种方法而言，我能想到的唯一“缺点”是：

  • 您的代码稍微难以理解，但如果有人无法弄清楚事件侦听器是什么，那么他不应该处理您的代码，IMO。
  • 调试可能会更困难，并且旧版浏览器可能会泄漏（jQ 确实包含大量与 X 浏览器相关的代码，因此它不适用于这里。当您编写 vanillaJS 时会出现这种情况）

除此之外，method2 还有另一个您未列出的主要优点： delegation。起初，委托看起来很难，但它很容易，jQuery$.delegate让它更容易，不过，$.on与选择器一起使用也可以委托事件。
基本上，委托允许您使用单个侦听器处理所有事件，例如click，对于整个页面或页面的一部分。这与将事件绑定到每个元素相反。因此：事件循环上的 1 个侦听器与数十/数百个侦听器。很明显，这是更高效的做事方式。

假设您在页面上有一个导航 div，如下所示：

<div id='nav'>
    <ul>
        <li id='nav-home'>Some pseudo-link</li>
        <li id='nav-page1'>Another</li>
    </ul>
</div>

您想通过单击其中一个<li>标签来了解用户。您列出的第一种方法会造成正确的混乱：<li id='nav-home' onclick='clickNav(event, this)'>. 我正在传递事件对象和 this（一个 DOM 引用）来访问委托允许我访问的所有内容。
使用委托，我可以简单地做到这一点：

//jQ
$('#nav').on('click','li',function(e)
{
    $.ajax({//you know the gist
        url: 'ajax/' + $(this).id().replace('nav-',''),
        success: function(){}
    });
});
//vanillaJS:
document.getElementById('nav').addEventListener('click',function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (e.tagName.toLowerCase() === 'li')
    {
        //perform ajax call
    }
},false);
于 2013-08-29T09:33:48.857 回答
1

我本人非常偏爱#2，因为它提供了 JavaScript 和 HTML 的清晰分离。浏览器插件可以完全否定在 HTML 中没有立即显示按钮操作的负面影响。

此外，正如您已经说过的那样，有时我想将 onclick 事件附加到表格的每一行，并且在每一行上设置元素的 OnClick 属性比简单地将点击处理程序附加到每个行更浪费其中有一行代码。

于 2013-08-29T09:27:33.263 回答