JavaScript – dez dicas e boas práticas
Recentemente alguns site e blogs vêm divulgando listas de dicas para
se codificar em javascript, apresentando melhores práticas de
desenvolvimento e muitas dicas bacanas. Pensei que este seria um bom
tópico para se estender e compartilhar com vocês. Neste artigo, reúno as minhas top 10 dicas e boas práticas para codificação
javascript. Espero que gostem.
1. Use o atributo defer para indicar o uso scripts externos no IE
O propósito do defer é avisar o script que está sendo requisitado
externamente para esperar até que a página seja carregada ou o DOM
esteja preparado. O mesmo pode ser realizado através de bons métodos
não-obstrutivos via javascript, que usualmente inclui códigos que
previnem a execução de scripts antes que o DOM seja carregado por
completo.
A vantagem do defer ocorre quando utilizamos o Internet Explorer,
tendo em vista que é único browser que suporta o atributo defer. Então,
se você precisa de um rápido script que rode única e
exclusivamente no Internet Explorer, e você não quer que ele execute
antes que o DOM esteja preparado, então simplesmente adicione defer=”defer”
na sua tag <script> e ela irá rapidamente tratar o seu problema.
Corrigir a transparência de arquivos PNG no IE6 é uma das
possibilidades práticas do uso do defer.
(Edit: O atributo defer deve ser usado quando escondemos um script
de outros browsers com o uso dos comentários condicionais –
conditional comment – que afete somente os navegadores da Microsoft –
de outra maneira o script vai rodar normalmente em outros browsers.)
2. Use o CData Section para previnir erros de validação XHTML Strict
Muitas vezes seus scripts vão residir em arquivos externos e
chamados dentro da tag <script> dentro do <head> do
documento, ou então antes do fechamento da tag </body>.
Mas este documento pode estar eventualmente sendo usado em um local que junto dele existem marcações HTML, como abaixo:
<div><br /><p><br /><script type="text/javascript"><br />var my_variable = 100;<br />if (my_variable < 50) {<br /> // alguma coisa aqui...<br />}<br /></script><br /></p><br /></div>Você pode notar que no código acima, dentro do if, existe o símbolo
< que representa “menos”, que é parte da sintax, correto? Este
símbolo causa um erro de validação. O validador interpreta ele como um
início de uma marcação ou uma tag HTML que não foi fechada, a não ser
que você encapsule o seu código com o CData, assim:
<div><br /><p><br /><script type="text/javascript"><br />//<![CDATA[<br />var my_variable = 100;<br />if (my_variable < 50) {<br /> // alguma coisa aqui...<br />}<br />//]]><br /></script><br /></p><br /></div>3. Evite palavras-chave reservadas do JavaScript quando estiver criando funções e identificadores
Muitas palavras são reservadas no javascript, então você deve
evitá-las quando forem criar variáveis ou outros idenficadores. A lista
completa de palavras-chaves do javascript segue abaixo:
break<br />case<br />catch<br />continue<br />default<br />delete<br />do<br />else<br />finally<br />for<br />function<br />if<br />in<br />instanceof<br />new<br />return<br />switch<br />this<br />throw<br />try<br />typeof<br />var<br />void<br />while<br />with4. Evite palavras reservadas do JavaScript quando estiver criando funções e identificadores
Que estão também algumas palavras reservadas, que não estão
necessariamente sendo usadas pela linguagem mas são reservadas para o
uso futuro. São estas:
abstract<br />boolean<br />byte<br />char<br />class<br />const<br />debugger<br />double<br />enum<br />export<br />extends<br />final<br />float<br />goto<br />implements<br />import<br />int<br />interface<br />long<br />native<br />package<br />private<br />protected<br />public<br />short<br />static<br />super<br />synchronized<br />throws<br />transient<br />volatile5. Não mude o tipo das variáveis depois da declaração inicial
No javascript, tecnicamente, isso é perfeitamente legal:
var my_variable = "Esta é uma string";<br />my_variable = 50;Depois que a variável é inicialmente declarada como string na linha
1, na linha 2 o seu valor é mudado e o seu tipo também. Esta não é uma
boa prática e deve ser evitada.
6. Não use variáveis globais
Para preveinir possíveis conflitos, em 99% dos casos, use o “var”
no início quando estivermos declarando uma variável e seu valor. Isso
faz com que a sua variável exista somente no escopo da função e não
fora dela, ou seja, toda variável criada pelo var só
poderá ser acessível dentro do escopo no qual ela foi declarada e não
mais fora dele. Então, se acontecer de você utilizar duas variáveis com
o mesmo valor em lugares diferentes do seu script, nenhum conflito
ocorrerá.
7. Javascript é Case-Sensitive
Lembre-se do que vem a seguir: No código que segue temos duas
variáveis que estão armazenando seus valores em 2 lugares diferentes na
memória, e não um só, como alguns podem pensar. São duas variáveis
completamente diferentes alocadas em lugares diferentes na memória:
var myVariable = "data";<br />var myvariable = "more data";8. Use o switch para lidar com multiplas condições
Não faça isto:
if (example_variable == "cyan") {<br /> // faça algo aqui...<br />} else if (example_variable == "magenta") {<br /> // faça algo aqui...<br />} else if (example_variable == "yellow") {<br /> // faça algo aqui...<br />} else if (example_variable == "black") {<br /> // faça algo aqui...<br />} else {<br /> // faça algo aqui...<br />}Faça isto:
switch (example_variable) {<br /> case "cyan":<br /> // faça algo aqui...<br /> break;<br /> case "magenta":<br /> // faça algo aqui...<br /> break;<br /> case "yellow":<br /> // faça algo aqui...<br /> break;<br /> case "black":<br /> // faça algo aqui...<br /> break;<br /> default:<br /> // faça algo aqui...<br /> break;<br />}O segundo bloco de código faz exatamente a mesma coisa que o
primeiro, mas o segundo é limpo, fácil de ler, fácil de dar manutenção
e modificar.
9. Use o try-catch para prevenir que erros sejam expostos para os usuários
Encapsulando todo o seu código no try-catch, você pode evitar que o
usuário final nunca veja um feio erro de javascript exposto na tela.
Assim:
try {<br /> funcaoQueNaoExiste();<br />} catch (error) {<br /> document.write("Um erro ocorreu.")<br />}No código acima, eu tentei chamar uma função que não existe, para
forçar um erro. O navegador não vai exibir o típico erro “not an
object” ou “object expected”, mas ao invés disso, vai exibir um erro
mais customizável que eu incluí dentro do meu “catch”. Você pode também
deixar o catch vazio para nada ser mostrado para o usuário, ou você
pode criar uma função que seja chamada dentro do catch que faça o
tratamento deste erro para propósitos de debug etc.
Mantenha na sua cabeça que isso pode esconder erros do desenvolvedor
também, então uma boa documentação do código e comentários podem ser
úteis neste ponto.
10. Faça comentários multi-linhas legíveis, mas simples
Em javascript, você pode comentar uma linha de código colocando um
// no início da linha. Você também pode criar um comentário em bloco
como mostra a seguir: /* [comentário aqui ] */. Algumas vezes você
precisa incluir um comentário longo, um comentário de mais de uma
linha. Um bom método para se utilizar que não tenha uma visual
esmagador, mas é fácil de identificar o código é este a seguir:
/*<br /> * Este é um comentário multi-linha...<br /> * bla bla bla...<br /> * bla bla bla...<br /> * bla bla bla...<br /> * bla bla bla...<br /> */E é isso!
*
Este artigo é uma adaptação e tradução do texto: 10 JavaScript Quick Tips and Best Practices
é formado em Desenvolvimento de Sistemas para Internet pela Faculdade Véris IBTA, Zend PHP 5 Certified Engineer, blogueiro e colunista iMasters, WebInsider e IBM DeveloperWorks.
