Otimizando o JS. Diminuir o uso do getElementById
Anteriormente, eu escrevi a respeito de otimização do css a fim de reduzir tempo de carregamento das páginas e tráfego.
Dando sequência, vamos otimizar o JS.
…
Quando estamos trabalhando em um grande projeto, é comum termos que utlizar diversas vezes a sintaxe getElementById. Porém, ao invés de para cada situação escrevermos toda a sintaxe, podemos criar uma pequena função para isso.
Como?
Não Otimizado
function mudacor(id){
document.getElementById(id).style.color = '#990000';
}
function mudacorTexto(id){
document.getElementById(id).style.color = '#990000';
}
function mudacorspan(id){
document.getElementById(id).style.color = '#990000';
}
Otimizado
function $(id){ return document.getElementById(id); }
function mudacor(id){
$(id).style.color = '#990000';
}
function mudacorTexto(id){
$(id).style.color = '#990000';
}
function mudacorspan(id){
$(id).style.color = '#990000';
}
Explicando
No exemplo acima, ao invés de eu escrever 3 vezes esta sintaxe, escrevi apenas uma. Em um projeto grande, é muito provável que você precise utilizar bem mais vezes essa sintaxe. Com esta simples função, podemos economizar muitos kbytes em trafego, pois reduzimos o tamanho do JS. Porém, não é apenas essa a vantagem, deixando o código mais enxuto, fica mais fácil de, posteriormente, o analisarmos para efetuarmos uma alteração ou correção.
Enviado por: leandro garcia - Categoria(s): dicas, JavaScript, Praticas, tutorial Tags relacionadas: otimizado, Praticas, redução de peso, tutorial