编写干净的 jQuery答案

【问题标题】：Write clean jQuery编写干净的 jQuery
【发布时间】：2013-12-04 11:15:44
【问题描述】：

考虑一下这个 HTML

<div id="container">
    <ul id="someID">
    <li id="someID1">
      <div id="someID2">
        <div class="someClass">
           <label>labelText</label>     
        </div>
      </div>
    </li>
    <li>2</li>
    <li>3</li>
    </ul>
</div>

及其脚本

<script>
$(function(){
$("#container label").click(function(){
    $(this).text("labelTextChanged");
});
})
</script>

让这个代码由别人写。现在我想将文本labelTextChanged 更改为labelTextChangedThen 之类的新内容（这只是一个示例，有时我需要更改很多功能）。但是现在很难从 DOM 中找到附加的事件？在 jQuery 中编写代码时如何避免这些问题？

仅使用属性（自定义属性）选择元素是否是一种好方法？（如 Angularjs）

注意：实际上它可能更好或更糟。

【问题讨论】：

您始终可以使用visual event 2 小书签来显示附加到 DOM 元素的事件侦听器。
那为什么不使用角度呢？这是编写 jQuery 的方法。也许在codereview.stackexchange.com 你会找到更好的答案。
@bagonyi 这就是我要求的。请将其发布为答案。

标签： javascript jquery coding-style custom-data-attribute

【解决方案1】：

有很多方法可以编写干净（更）的代码。我更喜欢将我的处理程序方法（使用命名函数）与处理代码分开，使用数据属性来查询和使用event delegation。对于您的示例，代码可以重写为：

function changeLabelText(e){
    var self = $(this);
    self.text(self.attr('data-changeOnClick'));
}

$(document).on('click', '[data-changeOnClick]', changeLabelText);

<label> 将变为 <label data-changeOnClick="[changed text]">

在这种情况下，稍后更改标签文本就像更改 html 中的 data-changeOnClick 属性一样简单。此外，很容易将属性添加到 html 中的任何元素，这都会触发点击处理程序。

编写单独的处理程序方法还显示了上述“视觉事件 2”小书签中的方法。

此外，我总是在文档末尾加载我的脚本（就在结束 </body>-tag 之前），以避免必须将方法分配包装在 $(function() {/*...*/} ) 中，或者更普遍地必须使用文档加载处理。

看到这个jsFiddle

【讨论】：

为什么更喜欢使用on而不是直接绑定jquery click函数？
@SubinJacob：我想是习惯。一个优点是使用on 附加事件，您可以在一个分配中分配更多事件（例如“单击”和“更改”）。此外，on 提供了selector 参数，这对于事件委托非常方便。
我认为如果 data-changeOnClick 前面加上 pg data-pgChangeOnClick 这样的东西会更好，这样可以更容易地找出直接依赖于脚本的元素。
@SubinJacob：[数据属性的命名]当然完全取决于你；）

【解决方案2】：

<script>
$(function(){
$("#container").on("click","label",function(){
  $(this).text("your desired text");
});
})
</script>

我认为要避免使用这些 tyoe 代码 visual event 2

Visual Event 是一个开源 Javascript 小书签，它提供有关已附加到 DOM 元素的事件的调试信息

参考on()

【讨论】：

【解决方案3】：

您始终可以使用visual event 2 小书签来显示附加到任何 DOM 元素的事件侦听器。

【讨论】：

【解决方案4】：

第二个问题。在我看来，使用 id 属性来选择 dom 是一个不错的方法。因为对于同一级别的元素，不应该应用相同的Id。类过滤器将有利于选择一组具有相同样式的元素。例如，您可以使用 $('div[id="xxx"]') 使代码有意义，这意味着“id 等于 xxx 的 div”。对于第一个问题，代码不容易阅读，你可以试试这样的 $('#container').find('.someClass").children('label').click (...)。也许阅读代码还是不容易。但是对于比较复杂的代码，使用插件可以帮助您使项目更具可读性和可维护性。

【讨论】：