10 dicas javascript e boas práticas

**SubCash** · 10 de Setembro 2010

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:

É necessário se cadastrar para acessar o conteúdo.

01<div>

02<p>

03<script type="text/javascript">

04var my_variable = 100;

05if (my_variable < 50) {

06// alguma coisa aqui...

07}

08</script>

09</p>

10</div>

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:

É necessário se cadastrar para acessar o conteúdo.

01<div>

02<p>

03<script type="text/javascript">

04//<![CDATA[

05var my_variable = 100;

06if (my_variable < 50) {

07// alguma coisa aqui...

08}

09//]]>

10</script>

11</p>

12</div>

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:

É necessário se cadastrar para acessar o conteúdo.

01break

02case

03catch

04continue

05default

06delete

07do

08else

09finally

10for

11function

12if

13in

14instanceof

15new

16return

17switch

18this

19throw

20try

21typeof

22var

23void

24while

25with

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:

É necessário se cadastrar para acessar o conteúdo.

01abstract

02boolean

03byte

04char

05class

06const

07debugger

08double

09enum

10export

11extends

12final

13float

14goto

15implements

16import

17int

18interface

19long

20native

21package

22private

23protected

24public

25short

26static

27super

28synchronized

29throws

30transient

31volatile

5. Não mude o tipo das variaveis depois da declaração inicial.

No javascript, tecnicamente, isso é perfeitamente legal:

É necessário se cadastrar para acessar o conteúdo.

1var my_variable = "Esta é uma string";

2my_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 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:

É necessário se cadastrar para acessar o conteúdo.

1var myVariable = "data";

2var myvariable = "more data";

8. Use o switch para lidar com multiplas condições

Não faça isso:

É necessário se cadastrar para acessar o conteúdo.

01if (example_variable == "cyan") {

02// faça algo aqui...

03} else if (example_variable == "magenta") {

04// faça algo aqui...

05} else if (example_variable == "yellow") {

06// faça algo aqui...

07} else if (example_variable == "black") {

08// faça algo aqui...

09} else {

10// faça algo aqui...

11}

Faça isso:

É necessário se cadastrar para acessar o conteúdo.

01switch (example_variable) {

02case "cyan":

03// faça algo aqui...

04break;

05case "magenta":

06// faça algo aqui...

07break;

08case "yellow":

09// faça algo aqui...

10break;

11case "black":

12// faça algo aqui...

13break;

14default:

15// faça algo aqui...

16break;

17}

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:

É necessário se cadastrar para acessar o conteúdo.

1try {

2funcaoQueNaoExiste();

3} catch (error) {

4document.write("Um erro ocorreu.")

5}

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:

É necessário se cadastrar para acessar o conteúdo.

1/*

2* Este é um comentário multi-linha...

3* bla bla bla...

4* bla bla bla...

5* bla bla bla...

6* bla bla bla...

7*/

Entrar

Quem está por aqui 0 membros estão online

10 dicas javascript e boas práticas

Posts Recomendados

SubCash 0

Link para o comentário

Compartilhar em outros sites

Fóruns

Todas Atividades

Lojinha WC

Informação Importante