Missing image

Boas Práticas com jQuery

Para um desenvolvimento de um bom código, não basta apenas “deixar funcionando”. Com a necessidade de criarmos aplicações e interações cada dia mais ricas e muitas vezes até robustas, precisamos nos preocupar com a qualidade performática dos nossos scritps e até mesmo a organização dele.
Separei algumas boas práticas para podermos otimizar os scripts do nosso dia a dia:

Evitar muitas chamadas DOM

Ao trabalhar com muitas chamadas DOM prefira fazê-lo de uma só vez, armazenando seu conteúdo.

Prefira

[code language=”javascript”]
var htmlLista = "";
$.each(meuArray, function(i, item) {
htmlLista += ‘<li>’ + item + ‘</li>’;
});
$("#minha-lista").html(htmlLista);
[/code]

Ao invés de

[code language=”javascript”]
$.each(meuArray, function(i, item) {
htmlItemLista += ‘<li>’ + item + ‘</li>’;
$("#minha-lista").append(htmlItemLista);
});
[/code]

Evitar funções anônimas

Ao trabalhar com funções anônimas, corremos o risco de perdemos o controle, encontrar dificuldades ao atualizar e até mesmo na hora de debugar nossas aplicações tudo pode virar um caos! Além de melhorar nossa organização, nossos testes, facilitar a manutenção dos scripts, temos como excelente vantagem a reutilização dessas funções para tarefas comuns, tornando nossos códigos menores, mais inteligentes, dinâmicos e reutilizáveis, impactando diretamente na performance, carregamento e processamento dos scripts.
Um método que eu gosto bastante é o de utilizar um objeto literal e nele organizar meus manipuladores. Segue um exemplo abaixo:

Prefira

[code language=”javascript”]
var lista = {
gerar : function(el,arr){
var htmlLista = "";
$.each(arr, function(i, item) {
htmlLista += ‘<li>’ + item + ‘</li>’;
});
$(el).html(htmlLista);
},
limpar : function(){ … },
numerar : function(){ … }
}
// Usando
$(document).ready(lista.gerar(‘#minha-lista’, meuArray))
[/code]

Ao invés de

[code language=”javascript”]
$(document).ready(function() {
var htmlLista = "";
$.each(meuArray, function(i, item) {
htmlLista += ‘<li>’ + item + ‘</li>’;
});
$("#minha-lista").html(htmlLista);
});

[/code]

Escolhendo bem os seus seletores

Começar um seletor usando ID

Seleções só com ID são manipuladas usando document.getElementById(), que por ser nativo do navegador é extremamente rápido.

Rápido

[code language=”javascript”]
$("#minhaDiv .elementoFilho");
[/code]

Bem mais rápido

[code language=”javascript”]
$("#minhaDiv").find(".elementoFilho");
[/code]

Ser mais específico ao lado direito do seletor do que no esquerdo

Na hora da especificidade, priorizar o detalhamento nos elementos filhos. Lembrando que quanto mais enxuto e objetivo for o seletor mais rápido também a seleção.

Não otimizado

[code language=”javascript”]
$("div#minhaDiv .titulo");
[/code]

Otimizado

[code language=”javascript”]
$("#minhaDiv span.titulo");
[/code]

Evitar Seletor Universal

Evite

[code language=”javascript”]
$("#minhaDiv *");
$("#minhaDiv *:text");
[/code]

Bem melhor assim

[code language=”javascript”]
$("#minhaDiv").children();
$("#minhaDiv input:text");
[/code]

Não Fazer Nada Com Elementos Vazios

[code language=”javascript”]
$(‘#minhaDiv’).slideUp();
[/code]

Ao executarmos a linha acima, no caso do elemento não existir, o  jQuery irá tentar executar um código em uma seleção vazia e após isso vai se comportar como se nada estivesse errado. Isso é maravilhoso no jQuery, porém sempre que pudermos, uma ajudinha ao jQuery cai bem.
Conforme o exemplo abaixo, nós podemos dizer ao jQuery não tentar aplicar código caso seja uma seleção na qual não retornará nenhum elemento e até mesmo evitar que ele tenha que contornar uma erro.

[code language=”javascript”]
var minhaDiv = $("#minhaDiv");
if (minhaDiv .length) { minhaDiv.slideUp(); }
[/code]

Nesse exemplo economizamos a etapa onde o jQuery tentaria executar o comando sobre um seletor vazio e também a etapa onde trataria o erro.