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>
<p>
<script type="text/javascript">
var my_variable = 100;
if (my_variable < 50) {
// alguma coisa aqui...
}
</script>
</p>
</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>
<p>
<script type="text/javascript">
//<![CDATA[
var my_variable = 100;
if (my_variable < 50) {
// alguma coisa aqui...
}
//]]>
</script>
</p>
</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
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
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
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
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";
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";
var myvariable = "more data";8. Use o switch para lidar com multiplas condições
Não faça isto:
if (example_variable == "cyan") {
// faça algo aqui...
} else if (example_variable == "magenta") {
// faça algo aqui...
} else if (example_variable == "yellow") {
// faça algo aqui...
} else if (example_variable == "black") {
// faça algo aqui...
} else {
// faça algo aqui...
}Faça isto:
switch (example_variable) {
case "cyan":
// faça algo aqui...
break;
case "magenta":
// faça algo aqui...
break;
case "yellow":
// faça algo aqui...
break;
case "black":
// faça algo aqui...
break;
default:
// faça algo aqui...
break;
}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 {
funcaoQueNaoExiste();
} catch (error) {
document.write("Um erro ocorreu.")
}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:
/*
* Este é um comentário multi-linha...
* bla bla bla...
* bla bla bla...
* bla bla bla...
* bla bla bla...
*/E é isso!
*
Este artigo é uma adaptação e tradução do texto: 10 JavaScript Quick Tips and Best Practices
De 0 a 10, o quanto você recomendaria este artigo para um amigo?