2010
Por algum motivo idiota, sempre que eu precisava referenciar um elemento do DOM eu buscava o sujeito repetindo o seletor:
$('#post-238 h2 a').css('color','white'); if ($('#post-238 h2 a').text() === 'Colocando objetos jQuery em variáveis') { alert('Entramos na condição. Texto alterado para branco.'); }
Quando na verdade, o código abaixo é perfeitamente possível e muitíssimo mais limpo:
var conteudo = $('#post-238 h2 a'); conteudo.css('color','yellow'); if (conteudo.text() === 'Colocando objetos jQuery em variáveis') { alert('Entramos na condição. Texto alterado para amarelo.'); }
Vantagens
É boa prática em programação evitar a duplicação de código (no caso a string que define o seletor). Isso evita bugs e facilita o entendimento e a manutenção do código. Além disso, imagino que a performance seja maior.
Sou só eu???
Quando o Felipe Pupo começou a me ensinar MooTools, ele me mostrou que adquirir o objeto do DOM uma única vez era uma das grandes vantagens em relação ao jQuery. Sempre achei que a repetição do $ e dos seletores o tempo todo era algo realmente pouco prático. Não sei se isso é algo novo no jQuery ou se é algo que eu nunca havia reparado.
O fato é que não sou só eu que faço isso. Uma grande parte dos programadores jQuery não armazena os objetos já adquiridos em variáveis. Será que existe algum efeito colateral?
Não tem novidade não amigo. O uso da variável é sempre bom especialmente em locais onde rola um loop por exemplo. Não faz sentido buscar o DOM dentro do loop toda vez.
Abs
Pois é. Mas tem vezes que não funciona e eu ainda não descobri o porquê. Vou ficar atento.
Abs!
Opa, Legal pela iniciativa do blog, muito bom compartilhar conhecimentos.
Quando usamos o seletor $ no jQuery ele na verdade tras uma colecao de objetos dom, por isso para o aumento da performance precisamos usar o minimo possivel. E a cada vez que ele é chamado quanto mais seletores forem necessarios principalmente quando não falar o tipo do objeto ex: ‘#post-238 .itens .item .link’ dependendo do browser a performance cai muito por isso lembramos que o mesmo seletor desta maneira é mais vantajoso ‘#post-238 ul.itens li.item a.link’, outra forma de melhorar o codigo é usar:
var post = $(‘#post-238′);
var itens = $(‘ul.itens’, post);
var links = $(‘li.item a.link’, itens);
post.addClass(‘Pera’)
itens.addClass(‘Banana’);
links.trigger(‘click’);
ao inves de:
$(‘#post-238′).addClass(‘Pera’);
$(‘#post-238 ul.itens’).addClass(‘Banana’);
$(‘#post-238 ul.itens li.item a.link’).trigger(‘click’);
O codigo é maior mais a executa mais rapido, Ja algumas ocasiões precisamos utilizar a repetição do seletor, seria algo como selecionar o objeto e ficar na variavel, destruir este objeto por algum motivo. e criar o mesmo html no mesmo lugar, porem como voce recriou ele é outro e ai a variavel vai estar errada dependendo do que voce quiser executar.
Já quando voce invoca $.funcao varias vezes apenas estamos chamando o objeto sem o loop porem quando isso aqui acontece no jQuery $.funcao(array()) ele precisa verificar o tipo do parametro que foi passado se for array, objeto, string etc. Se esta funcao estiver disponivel desta forma array().funcao() teremos ganhos tambem…
Bom nao sei se expliquei bem mais é algo assim. e o efeito colateral fica no exemplo dificil de acontecer mais se acontecer… talves demore para achar.
Abraços, continue escrevendo.
A outra coisa que esqueci de falar é que tem alguns projetos que fazem o cache de seletores, de uma pesquisada no google.
Nunca usei e nao sei se traz problemas.
Fala Pupof!
Não conhecia este negócio de colocar o segundo argumento como o contexto:
por ex: var itens = $(‘ul.itens’, post);
Valeu pela dica.
Abs!
Flávio, na verdade quando se usa o $() ou o jQuery() ou o jQuer.noConflit() o retornado é um objeto do tipo jQuery e não um conjunto DOM, até pq vc tem acesso as funções do jQuery e não da DOM.
Tente fazer isso var a =$(‘a#a’); as.href. Não vai dar ou qualquer outra propriedade do DOM, mas se vc fizer as.attr(“href”) ele retornará o HREF do elemento selecionado