Jquery不良做法[关闭]答案

【问题标题】：Jquery Bad practices [closed]Jquery不良做法[关闭]
【发布时间】：2011-01-05 10:05:03
【问题描述】：

您见过、写过或应该避免的事情有哪些 JQuery 不好/最差的做法？

【问题讨论】：

我知道我已经评论过，但这个问题完全是重复的：stackoverflow.com/questions/1229259/jquery-pitfalls-to-avoid

【解决方案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");

【讨论】：

【解决方案2】：

我经常看到两个：

首先，在点击事件中，id 的访问方式如下：

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

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

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

注意：您还会看到 $(this).attr('href')，但这是正确的，因为 jQuery 跨浏览器对其进行规范化的方式。

second 将除 DOM 节点之外的任何内容传递到 jQuery 调用的 scope 参数中：

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

这样做根本没有速度增益。当您已经拥有 DOM 元素时，您确实会看到速度提高：

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

【讨论】：

【解决方案3】：

James Padolsey 写了an excellent article 关于 jQuery 代码气味。推荐阅读。

【讨论】：

【解决方案4】：

仍在使用旧的文档准备功能：

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

而不是很常见的：

$(function(){ });

这还不错，但我向人们展示了新的 API 并没有起床。

【讨论】：

使用$(document).ready(...) 通常用于使代码明确清晰。当然它不是必需的，但它并不是 IMO 的坏习惯。
你能解释一下，我为什么要这样做？我认为，第一个版本更有意义 - 我们将事件处理程序附加到 DOCUMENT 对象。另一个..即使它可能效果更好.. 不能解释自己。
在那种情况下，我也参考了docs.jquery.com/Core/jQuery#callback 就像我说的那样，这不是坏习惯，它更像是人们没有赶上最新api的通知。他们更喜欢编写可读的代码，而不是快速和精简的代码。