jQuery - 好的部分？

Question

我已经着手开始正确使用jQuery和JavaScript.我很遗憾地说,从历史上看,我已经陷入了使用jQuery犯了很多非常糟糕的错误的开发人员类(污染全局命名空间,没有缓存jQuery选择器,以及更多有趣的东西 - 其中一些我确定我还没发现).

事实上,jQuery允许人们轻松实现一些非常强大的功能.但是,因为一切"正常",性能问题和最佳实践立即退居二线.

我一直在阅读有关JavaScript和jQuery性能和最佳实践的文章,我已经学到了足够的知识,可以完全意识到我真正缺乏经验.我感到沮丧,因为我不确定何时应该使用jQuery或只是简单的JavaScript.jQuery对我很有吸引力的主要原因是它负责浏览器的兼容性.根据我的理解,你可以用jQuery做些事情,你也可以使用不受兼容性问题影响的常规JavaScript.基本上我正在寻找一个指南,解释当使用jQuery而不是常规JavaScript时是明智的.

回顾几个问题:

是否存在由于性能而不应使用的jQuery部分？

你应该经常使用jQuery的哪些部分来避免浏览器的不一致？

你不应该使用jQuery的哪些部分,因为有一种可靠而快捷的方法可以在JavaScript中本地执行相同的操作？

jQuery的哪些部分提供了多种方法来做同样的事情,一种方式更有效？例如,:not()选择器与.not()方法.

我正在寻找现有文章,博客文章,书籍,视频等.我知道文档的位置.我经常读它们.我希望能有更多关于上述问题的概述.

谢谢!

编辑:

看看这个非常相似的问题:什么时候使用Vanilla JavaScript和jQuery？

Answer 1

哇,我简直无法相信没有人提到将对象存储在变量中以备将来使用.

考虑这种情况.
你有一个复杂的菜单,你要写100行jQuery.

我非常喜欢

$(".menu").fadeIn("slow");
$(".menu li").each(bla bla);
$(".menu li").hover(more bla bla);
if($(".menu").attr('id') == 'menu1') {some hoo ha}

如果您要在jQuery中重用元素,请始终将其存储在变量中.通常的做法是$在变量名称前添加一个美元符号()来表示jQuery对象.

var $menu = $(".menu"); // store once and reuse a million times
var $menu_item = $("li", $menu); // same here

$menu.fadeIn("slow");
$menu_item.each(bla bla);
$menu_item.hover(more bla bla);
if($menu.attr('id') == 'menu1') {some hoo ha}

Answer 2

我肯定会说

• 使用事件模型,因为它抽象浏览器之间的差异,也提供了一种提升自己的自定义事件的方法.

• 不要使用.each()或$.each()不必要的.有时它可以帮助它,因为它引入了一个闭包,但通常一个简单的循环就足够了.

• 知道一个复杂的选择器字符串或一堆链接函数调用是否会更快的唯一方法是对所有方法进行基准测试.

• 将相同的事件处理程序绑定到三个以上的元素时使用事件委托(我会看看我是否可以挖掘超过三个元素的资源,我似乎记得一篇文章,基于直接绑定与委托对许多不同因素进行基准测试并发现超过三个是神奇的数字).

• 最重要的是,除非出现问题,否则不要担心性能问题.相比300毫秒200ms,谁知道差异？200ms相比1000ms,也许是时候看看优化的东西了:)

• 尽可能与您的选择器一致,并帮助那些可怜的旧版本的IE出来.