Ok, selem cowboys, porque isso vai ser longo. Passei a manhã passando por alguns dos meus códigos antigos e fiquei me perguntando sobre as melhores práticas e otimização. A fim de evitar um passeio pela pista subjetiva, vou apenas postar alguns exemplos com algumas esperançosamente fáceis de responder perguntas. Tentarei manter os exemplos muito simples, para facilitar a resposta e diminuir a probabilidade de erros. Aqui vamos nós:

1) Atribuição x chamadas jQuery

Entendo que, ao acessar seletores, geralmente é considerado melhor atribuir um seletor a uma variável em vez de fazer a mesma chamada mais de uma vez - ex.

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

vs.

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

Esta mesma regra se aplica ao fazer referência a jQuery$(this)? Ex. Um bit simples de script para tornar alguns dados em uma tabela clicáveis e personalizar o 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)this vs$(this)

Ok, então este próximo é algo sobre o qual me pergunto há muito tempo, mas não consigo encontrar nenhuma informação sobre ele. Por favor, desculpe minha ignorância. Quando faz sentido chamar os vanilla jsthis em oposição ao jQuery envolto$(this)? É meucompreensão que -

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

É muito menos eficiente do que acessar o atributo DOM da baunilhathis objeto como o seguinte -

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

Eu entendo o que está acontecendo lá, estou apenas me perguntando se existe uma regra de ouro a seguir ao decidir qual usar.

3) Mais especificidade é sempre melhor?

Essa é bem simples, SEMPRE é benéfico ser mais específico com nossos seletores? É fácil ver isso$('.rowStripeClass') seria muito mais lento que$('#tableDiv.rowStripeClass'), Mas onde desenhamos a linha? É$('body div#tableDiv table tbody tr.rowStripeClass') Mais rápido, ainda? Qualquer entrada seria apreciada!

Se você chegou até aqui, obrigado por dar uma olhada! Se você não tiver,: p