Recentemente alguns site e blogs vem 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 extender e compartilhar com vocês. Neste post estou reunindo 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 previne 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 únicamente 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" no sua tag <script> e ela irá rapidamente tratar o seu problema. Corrigir a transparência de arquivos PNG no IE6 é uma das possibilídades 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 usado em um local que junto dele existem marcações HTML, como abaixo:
[html]
<div>
<p>
<script type=”text/javascript”>
var my_variable = 100;
if (my_variable < 50) {
// alguma coisa aqui…
}
</script>
</p>
</div>
[/html]
Você pode notar que no código acima, dentro do if, existe o símbolo < que representa “menos”, que é parte da sintax, corréto? Este símbolo causa um erro de validação. O validador interpreta ele como um inicio 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:
[html]
<div>
<p>
<script type=”text/javascript”>
//<![CDATA[
var my_variable = 100;
if (my_variable < 50) {
// alguma coisa aqui…
}
//]]>
</script>
</p>
</div>
[/html]
3. Evite palavras-chaves 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:
[javascript]
break
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with
[/javascript]
4. 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:
[javascript]
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
volatile
[/javascript]
5. Não mude o tipo das variaveis depois da declaração inicial.
No javascript, tecnicamente, isso é perfeitamente legal:
[javascript]
var my_variable = “Esta é uma string”;
my_variable = 50;
[/javascript]
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 previnir 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:
[javascript]
var myVariable = “data”;
var myvariable = “more data”;
[/javascript]
8. Use o switch para lidar com multiplas condições
Não faça isso:
[javascript]
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…
}
[/javascript]
Faça isso:
[javascript]
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;
}
[/javascript]
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 previnir 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:
[javascript]
try {
funcaoQueNaoExiste();
} catch (error) {
document.write(“Um erro ocorreu.”)
}
[/javascript]
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 vázio 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 decumentaçã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 é esse a seguir:
[javascript]
/*
* Este é um comentário multi-linha…
* bla bla bla…
* bla bla bla…
* bla bla bla…
* bla bla bla…
*/
[/javascript]
E é isso 🙂
Este artigo é uma adaptação e tradução do texto: 10 JavaScript Quick Tips and Best Practices
Igor Escobar 
Ah, eu tinha visto esse post esses dias, coloquei até nos meus del.icio.us
Boas dicas!
LikeLike
Outra dica boa é encapsular código, pois ajuda a evitar conflitos
(function(){
// meu código aqui
})();
e se você usa jQuery:
(function($){
// meu código aqui
})(jQuery);
[]’s
LikeLike
em relação ao CData Section acho que a melhor maneira de usar seria a mostrada aqui. http://javascript.about.com/library/blxhtml.htm
LikeLike
@Mauro George Da forma como foi colocado no exemplo do post, funciona da mesma forma que no link que você passou. O CData está comentado, para evitar conflitos com browsers antigos 😉
LikeLike
Eu desaconselho o uso do switch por questoes de performance no Javascript expecificamente.
Sempre uso em outros linguagens.
LikeLike
Poste seus estudos aqui cara. É tão significante assim o ganho de performance?
LikeLike
Eu desaconselho o uso do switch por questoes de performance no Javascript especificamente.
Sempre uso em outros linguagens.
LikeLike
estava tentando corrigir o especificamente que escrevi errado ali acima, o switch no javascript eh conhecido por ser mais lento que varios ifs e elses, alias eh uma das aberracoes do JS.
LikeLike
Repetir a mesma aberração em todas as linguagens de programação do planeta não seria burrice? Não conheço nenhuma linguagem de programação onde o switch não está presente. Acho desnecessário se preocupar com a performance de algo tão simples. Acho mais vantajoso se preocupar com o que está dentro de cada condição do que ficar preocupado em usar ifs e elses ou um switch bonitinho. Isso não trará diferença alguma para o sucesso da aplicação.
LikeLike
Não sabia sobre essa do CData, ótimo post.
LikeLike