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.
- Operador ternário
- Maxlength no Textarea, é possível?
- Contagem regressiva em Javascript
- Offset, descobrindo o posicionamento absoluto de um elemento
- Escrever um código direito é mais do que escrever a sintaxe direito
3 Comentários »
Rss dos comentários TrackBack URL
Comentário por Ronaldo Bitencourt - Seo.blog.br — 24/01/2009 @ 11:11 pm
Bacana, tecnicas de otimização de code sempre são bem vindas
parabens.
Eu depois que conheci o jQuery e passei a desenvolver com ele alem de o codigo ficar muito mais facil de se entender.
A sintaxe a muito parecida com essa tua dica mas os metodos e funções são diferentes.
fica a dica para quem sabe um post sobre jQuery
Abss.
Comentário por paulo angelo do vale — 01/03/2011 @ 12:52 pm
Está aparecendo na tela um aviso de erro, afirmando que faltam-me “components”. Ficar-lhe-ia muito grato se, por email, o amigo me explicasse como me livrar desta.
Comentário por leandro garcia — 20/05/2011 @ 1:53 pm
Você consegue explicar melhor o erro?