我注意到,在监控/尝试回答常见的jQuery问题时,有一些实践使用javascript,而不是jQuery,实际上可以让你写得更少,做得更…同样的量。而且还可能带来性能上的好处。

具体例子

$(this) vs this

在引用已单击对象id的单击事件中

jQuery

$(this).attr("id");

Javascript

this.id;

还有其他类似的常见做法吗?某些Javascript操作可以更容易地完成,而不需要使用jQuery。或者这是一种罕见的情况?(jQuery的“快捷方式”实际上需要更多的代码)

编辑:虽然我很欣赏关于jQuery和纯javascript性能的答案,但实际上我正在寻找更多量化的答案。在使用jQuery时,使用纯javascript而不是使用$()会更好(可读性/紧凑性)的实例。除了我在最初的问题中给出的例子。


当前回答

当:

您知道对于您正在做的事情,有坚定的跨浏览器支持 它并不是要输入更多的代码,而且 它的可读性并没有明显降低,而且 你有理由相信jQuery不会根据浏览器选择不同的实现来获得更好的性能,那么:

使用JavaScript。否则使用jQuery(如果可以的话)。

编辑:这个答案既适用于选择使用jQuery整体还是不使用它,也适用于选择是否在jQuery内部使用香草JS。在attr('id')和.id之间选择倾向于JS,而在removeClass('foo')和. classname = . classname之间选择。替换(新Regexp(“(?:^ | \ \ s +)”+ foo +”(?:\ \ s + | $)”,“g”),”)倾向于支持jQuery。

其他回答

这是我个人的观点,但无论如何jQuery是JavaScript,我认为理论上它不能比普通JS表现得更好。

但实际上,它可能比手工编写的JS执行得更好,因为手工编写的代码可能不如jQuery有效。

总之,对于较小的东西,我倾向于使用普通的JS,对于JS密集的项目,我喜欢使用jQuery,而不是重新发明轮子——它也更有效率。

当:

您知道对于您正在做的事情,有坚定的跨浏览器支持 它并不是要输入更多的代码,而且 它的可读性并没有明显降低,而且 你有理由相信jQuery不会根据浏览器选择不同的实现来获得更好的性能,那么:

使用JavaScript。否则使用jQuery(如果可以的话)。

编辑:这个答案既适用于选择使用jQuery整体还是不使用它,也适用于选择是否在jQuery内部使用香草JS。在attr('id')和.id之间选择倾向于JS,而在removeClass('foo')和. classname = . classname之间选择。替换(新Regexp(“(?:^ | \ \ s +)”+ foo +”(?:\ \ s + | $)”,“g”),”)倾向于支持jQuery。

正确的答案是,当使用jQuery而不是“普通的”原生JavaScript时,您总是会受到性能损失。这是因为jQuery是一个JavaScript库。它不是什么花哨的JavaScript新版本。

jQuery强大的原因在于,它使一些在跨浏览器情况下过于繁琐的事情变得简单(AJAX就是最好的例子之一),并平滑了无数可用浏览器之间的不一致性,并提供了一致的API。它还很容易促进链接、隐含迭代等概念,以简化一起处理元素组的工作。

学习jQuery不能代替学习JavaScript。你应该对后者有一个坚实的基础,这样你才能充分体会到了解前者会让你更容易。

-编辑以包含评论-

As the comments are quick to point out (and I agree with 100%) the statements above refer to benchmarking code. A 'native' JavaScript solution (assuming it is well written) will outperform a jQuery solution that accomplishes the same thing in nearly every case (I'd love to see an example otherwise). jQuery does speed up development time, which is a significant benefit which I do not mean to downplay. It facilitates easy to read, easy to follow code, which is more than some developers are capable of creating on their own.

在我看来,答案取决于你想要达到的目标。如果正如我根据您对性能好处的参考所推测的那样,您希望获得应用程序的最佳运行速度,那么每次调用$()时使用jQuery都会带来开销。如果你追求可读性、一致性、跨浏览器兼容性等等,那么肯定有理由支持jQuery而不是“原生”JavaScript。

如果您最关心的是性能,那么您的主要示例就一针见血了。在我看来,不必要或冗余地调用jQuery是导致性能变慢的第二个主要原因(第一个原因是DOM遍历不好)。

这并不是你真正想要的例子,但我经常看到这样的例子,所以值得一提:加快jQuery脚本性能的最佳方法之一是缓存jQuery对象,和/或使用链接:

// poor
$(this).animate({'opacity':'0'}, function() { $(this).remove(); });

// excellent
var element = $(this);
element.animate({'opacity':'0'}, function() { element.remove(); });

// poor
$('.something').load('url');
$('.something').show();

// excellent
var something = $('#container').children('p.something');
something.load('url').show();

已经有了一个公认的答案,但我相信这里直接输入的答案不能在本机javascript方法/属性列表中全面地保证跨浏览器支持。为此,请允许我把你引向quirkmode

http://www.quirksmode.org/compatibility.html

它可能是关于在任何地方的任何浏览器上什么可以工作,什么不能工作的最全面的列表。请特别注意DOM部分。要读的东西很多,但重点不是全部读完,而是作为参考。

当我开始认真编写web应用程序时,我打印出了所有的DOM表,并把它们挂在墙上,这样我就能一眼知道哪些是安全的,哪些需要hack。这些天,当我有疑问时,我只是谷歌一些类似quirksmode parentNode兼容性的东西。

和其他事情一样,判断主要是一种经验。我不建议你阅读整个网站,记住所有的问题来弄清楚什么时候使用jQuery,什么时候使用纯JS。只是要注意这个列表。搜索起来很容易。随着时间的推移,你会发现什么时候纯JS更可取。


PS: PPK(网站的作者)也有一本非常好的书,我推荐你去读