Boas Práticas com jQuery – Front End Brasil
Boas Práticas com jQuery
Publicado em 4 de novembro de 2012 4 de novembro de 2012 por Klayton Faria
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.
var htmlLista = "";
$.each(meuArray, function(i, item) {
htmlLista += '<li>' + item + '</li>';
$("#minha-lista").html(htmlLista);
htmlItemLista += '<li>' + item + '</li>';
$("#minha-lista").append(htmlItemLista);
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:
gerar : function(el,arr){
$.each(arr, function(i, item) {
$(el).html(htmlLista);
limpar : function(){ … },
numerar : function(){ … }
$(document).ready(lista.gerar('#minha-lista', meuArray))
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.
$("#minhaDiv .elementoFilho");
$("#minhaDiv").find(".elementoFilho");
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.
$("div#minhaDiv .titulo");
$("#minhaDiv span.titulo");
Evitar Seletor Universal
$("#minhaDiv *");
$("#minhaDiv *:text");
$("#minhaDiv").children();
$("#minhaDiv input:text");
Não Fazer Nada Com Elementos Vazios
$('#minhaDiv').slideUp();
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.
var minhaDiv = $("#minhaDiv");
if (minhaDiv .length) { minhaDiv.slideUp(); }
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.