jQuery 不良实践

Question

您见过哪些JQuery不良/最差实践，写的或者应该避免的事情？

- piyer

---

我知道我已经评论过了，但是这个问题完全是一个重复：https://dev59.com/pHM_5IYBdhLWcg3wymU0 - Doug Neiner

Answer 1

一个需要避免的事情是每行都再次使用“易于使用”的选择器，因为选择器的JavaScript实现不是非常高效的。当然，jQuery的开发者正在进行优化，但我认为你应该尽可能少地使用它。

所以，这是一种不好的做法。

$("li ul span").show();
$("li ul span").toggleClass("bubu");

链式编程很好

$("li ul span").show().toggleClass("bubu");

而将事物记在本地变量中也不错：

var allspans = $("li ul span");
allspans.show();
allspans.toggleClass("bubu");

- naivists

---

是的，很多人这样做。这对性能非常不利。 - jerone

+1 指出链式调用和局部变量！ - Doug Neiner

Answer 2

有两种方法我经常看到：

第一种，在点击事件中，id可以这样访问：

$("a").click(function(e){
   var id = $(this).attr('id');
});

这将在DOM节点周围创建一个新的jQuery对象，并调用一个函数。以下是正确的方法：

$("a").click(function(e){
   var id = this.id;
});

注意：你也会看到$(this).attr('href')，但这是正确的，因为jQuery在不同浏览器中对它进行了标准化。

第二个问题是将除DOM节点之外的任何内容传递给jQuery调用的scope参数：

$(".child", $(".parent")).doSomething();
// or
$(".child", ".parent").doSomething();

这样做并不会带来任何速度提升。只有在已经拥有 DOM 元素的情况下，你才能看到速度的提高：

$('div').click(function(){
   $('img', this).doSomething(); // This is good
});

- Doug Neiner

Answer 3

James Padolsey 写了一篇关于 jQuery 代码异味的优秀文章。我建议阅读它。

- Phil.Wheeler

Answer 4

仍在使用旧的文档就绪函数：

$("document").ready(function(){ });

与其使用非常常见的：

$(function(){ });

这不是真的很糟糕，但是它表明人们没有跟上新的API。

- jerone

---

使用 $(document).ready(...) 经常用于使代码清晰明了。当然，它并不是必需的，但在我看来这并不是一种坏习惯。 - Doug Neiner

你能解释一下，为什么我要这样做吗？我认为第一个版本更有意义 - 我们正在将事件处理程序附加到DOCUMENT对象。另一个版本...即使它可能工作得更好...也没有自我解释。 - naivists

在这种情况下，我也参考了http://docs.jquery.com/Core/jQuery#callback。就像我所说的，这不是一个坏习惯，而是提醒人们要跟上最新的API。他们更喜欢编写可读性强的代码，而不是快速和压缩的代码。 - jerone