jQuery优化/最佳实践 [英] jQuery Optimization/Best Practices

问题描述

好的马鞍牛仔，因为这将是一个漫长的。我早上花了一些旧的代码，我不知道最佳实践和优化。为了避免乘坐主观道路，我会发布一些例子，希望能够轻松回答问题。我将尽量使示例非常简单，以便于回答并减少出错的可能性。我们走了：

Ok saddle up cowboys, because this is going to be a long one. I have been spending the morning going through some of my old code and I'm left wondering about best practices and optimzation. In order to avoid a ride down subjective lane I'll just post some examples with some hopefully easy to answer questions. I will try to keep the examples very simple for ease of an answer and to decrease the likelihood of mistakes. Here we go:

据我所知，访问选择器时通常认为更好将选择器分配给变量而不是多次进行相同的调用 - 例如。

I understand that when accessing selectors it's generally considered better to assign a selector to a variable rather than make the same call more than once - ex.

$('div#apples').hide();
$('div#apples').show();

vs。

var oranges = $('div#oranges');
oranges.show();
oranges.hide();

引用jQuery的 $（this）？防爆。一个简单的脚本，可以使表中的某些数据可单击并自定义链接。

Does this same rule apply when referencing jQuery's $(this)? Ex. A simple bit of script to make some data in a table clickable and customize the link.

$('tr td').each( function() {
    var colNum = $(this).index();
    var rowNum = $(this).parent().index();
    $(this).wrap('<a href="example.com/hello.html?column=' + colNum + '&row=' + rowNum +'">'); 
})

vs。

$('tr td').each( function() {
    var self = $(this);
    var colNum = self.index()
    var rowNum = self.parent().index()
    self.wrap('<a href="example.com/hello.html?column=' + colNum + '&row=' + rowNum +'">'); 
});

2）此 vs $（this）

好的，下一个是我长期以来一直想知道但我似乎无法看到的东西找到它的任何信息。请原谅我的无知。什么时候调用vanilla js 这个而不是jQuery包装 $（this）？这是我的了解 -

2) this vs $(this)

Ok so this next one is something that I have wondered about for a long time but I can't seem to find any information on it. Please excuse my ignorance. When does it make sense to call the vanilla js this as opposed to the jQuery wrapped $(this)? It's my understanding that -

$('button').click(function() {
  alert('Button clicked: ' + $(this).attr('id'));
});

效率远低于访问vanilla 此DOM的DOM属性对象如下 -

Is much less efficient than accessing the DOM attribute of the vanilla this object like the following -

$('button').click(function() {
  alert('Button clicked: ' + this.id);
});

我明白那里发生了什么，我只是想知道是否有遵循的经验法则决定使用哪个。

I understand what is going on there, Im just wondering if there is a rule of thumb to follow when deciding which to use.

这个很简单，是它总是有利于我们的选择器更具体？很容易看出 $（'。rowStripeClass'）会比 $（'＃tableDiv.rowStripeClass'），但我们在哪里画线？是 $（'body div＃tableDiv table tbody tr.rowStripeClass'）还能更快吗？任何输入将不胜感激！

This one is pretty simple, is it ALWAYS beneficial to be more specific with our selectors? It's easy to see that $('.rowStripeClass') would be much slower than $('#tableDiv.rowStripeClass'), but where do we draw the line? Is $('body div#tableDiv table tbody tr.rowStripeClass') faster still? Any input would be appreciated!

如果你已经做到这一点，谢谢你看看！如果你还没有，：p

If you've made it this far, thanks for taking a look! If you haven't, :p ​

推荐答案

我会尽量简明扼要地回答这些问题：

I'll try to answer these as concisely as possible:

1. 在循环情况下经常使用特别是，运行时将其缓存获取相同结果的相同代码对性能来说永远不是一件好事，请将其缓存。

1. Cache it when it's used often, especially in a loop situation, running the same code to get the same result is never a good thing for performance, cache it.

使用这个当你需要一个DOM元素时， $（this）当你需要 jQuery方法（否则将无法使用），您的 this.id vs <的示例code> $（this）.attr（id）是完美的，一些更常见的例子：

Use this when you only need a DOM element and $(this) when you need the jQuery methods (that wouldn't be available otherwise), your example of this.id vs $(this).attr("id") is perfect, some more common examples:

• 使用 this.checked 而不是 $（this）.is（'：checked'）


• 使用 $。data（this，'thing'）而不是 $（this）.data（'thing' ）


• 创建jQuery对象的任何其他情况都没有用cally。

• Use this.checked instead of $(this).is(':checked')
• Use $.data(this, 'thing') instead of $(this).data('thing')
• Any other case where creating a jQuery object isn't useful basically.

从ID选择器降序是性能的首选...你需要具体的具体程度如何？简而言之，这完全取决于：具体到您需要。

Decending from an ID selector is preferred for performance...how specific do you need to be? That completely depends, in short: be as specific as you need to be.

这篇关于jQuery优化/最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！