javascript - 编写干净的 jQuery

Question

考虑这个 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)

注意:实际上，情况可能更好，也可能更糟。

Answer 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]">

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

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

此外，我总是在文档末尾加载脚本(就在结束 </body> 标记之前)，以避免必须将方法分配包装在 $(function() {/*...*/} ) 内。或者更一般地说必须使用文档加载处理。

查看此jsFiddle