12th fev 2009
Boas práticas no javascript
Estou escrevendo aqui no meu trabalho full time um manual de boas práticas para implementação de interfaces web ((x)html, CSS e javascript, basicamente). Muitas idéias pintando, conceitos sendo vistos – e revistos – e outros ainda sendo fortalecidos. Não tive tempo de fazer subdivisões em cada área das três camadas (html, CSS e javascript) da interface web.
Vou postar o que eu entendo ser boas práticas no que diz respeito a implementação de javascript. Não que isso seja lei, seja a última verdade, mas é como eu entendo que deva ser implementado, com a experiência que tenho na área. E vocês, o que acham? Quais as suas boas práticas?
- antes de tudo, lembrar que existem 3 sub-camadas na camada de interface de uma aplicação web. Conteúdo, apresentação e comportamento:
- Conteúdo: (x)html
- Aprentação: CSS
- Comportamento: scripts (no caso, javascript)
- A camada de Comportamento é a única que pode manipular as demais camadas. Através de manipulação da DOM acessa a camada de Conteúdo, e com isso pode manipular a Apresentação. Para manter compatibilidade entre os browsers e uma padronização no código, deve-se sempre usar os métodos nativos do javascript para manipulação DOM
- sempre que possível utilizar Orientação a Objetos
- evitar o uso de variáveis globais (usar passagem de parâmetros)
- seguir notação java para nomes de classes, objetos, variáveis, métodos e funções
- classe: não há espaço entre as palavras, e cada palavra do nome começa com letra maíscula. P.ex.: MinhaClasse
- objeto: a mesma regra da classe da qual foi instanciada, mas começando com letra minúscula. P.ex.: minhaClasse
- variáveis, métodos e funções: não há espaço entre as palavras, e cada palavra do nome começa com letra maíscula, exceto a primeira. P.ex. meuMetodoQueCalcula
- sempre que tentar acessar um atributo de um objeto, verificar se ele existe:
if(document.getElementById(“meuElemento”))
document.getElementById(“meuElemento”).value = “a”; - no mesmo sentido, ao acessar um item de um array diretamente pelo index do mesmo, verificar se ele existe
- terminar cada linha de comando com ; (Obs.: não é obrigatório, mas torna o código mais legível)
- comentar métodos e funções no padrão Javadoc (além de ser um padrão amplamente conhecido, existem geradores de documentação para javascript semelhantes ao Javadoc)
- utilizar solução javascript crossbrowser (SWFObject, plugin da jQuery, etc…) para inserir mídias SWF na página
- criar listeners de javascript para eventos dos elementos do html, ao invés de colocar os mesmos no html
P. ex.:
//no javascript…
document.getElementById(‘myLink’).onclick = ckickMe; - não usar detecção de browser para redirecionar para páginas específicas; detectar browser deve ser usado apenas para a camada ocupada javascript
- sempre queo usuário disparar um evento sem volta no sistema – caso clássico é o de apagar dados – confirmar se ele deseja realmente efetuar a operação (p.ex.: usar o comando confirm())
- validar os formulários é uma boa prática- mesmo que a validação no server-side seja feita (e deve ser sempre feita). Evita com que sejam enviados dados inconsistentes para o servidor (P.ex.: data em formato inválido) e que seja feito um request desnecessário.
- tentar se manter restrito aos padrões da ECMA: garantia de que sua implementação será suportada pela maioria dos browsers atuais
- tomar cuidado seleção por seletores CSS dos frameworks: a maioria dos frameworks de javascript implementam a possibilidade de selecionar elementos do DOM com as regras do CSS3. É uma facilidade, mas tenha em mente que a seleção por getElementsByClassName() (que é o método nativo do javascript usado nesse caso) é bem mais lenta do que a seleção por Id- getElementById().
- evitar escrever código html no javascript. Usar sempre manipulação da DOM, criando elementos, removendo-os, etc… através dos métodos nativos do javascript.
Posts relacionados
Avalie
(No Ratings Yet)
Podemos colar isto na testa de alguns.
Acho legal lembrar de fazer a divisão dos objetos no javascript, dividindo os objetos por sua resposábilidade ao invés de um único grande objeto.
Digo isso, por exemplo, para ter um objeto que cuida das chamadas remotas, outro para atualizar a interface… e por ai vai.
No geral, regras de OO valem aqui.
Bem colocado suas dicas, inclusive no sentido de se desenvolver Javascript não-obstrutivo. Isso ajuda, inclusive, na organização e manutenção dos códigos.
@Diogo: é verdade, tem gente que passa por cima de qualquer boa prática. Alguns por falta de conhecimento, mas muitos por falta de seno profissional mesmo! E fazer a divisão por objetos, seguindo camadas, no javascript tb é bacana!
@Ciro: concordo contigo. Mesmo sabendo que fazer o js não-obstrusivo é a parte mais complexa da implementação! hehe
[]s!
Aterrissei no seu site, vindo do Gostei. E gostei do que vi. Há posts bem interessantes como este que acabei de ler. Voltarei mais vezes.
Abraços
Obrigado pelos comentários, João!
Vi seu blog e achei interessantíssimo também!
[]s!