Advertisement
  1. Code
  2. JavaScript

24 Boas Práticas no JavaScript para Iniciantes

by
Read Time:12 minsLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Como continuação do artigo "30 Boas Práticas no HTML e CSS", essa semana, revisarei as boas práticas do JavaScript! Após revisar essa lista, deixe suas próprias dicas nos comentários!

1. Use === Ao Invés de ==

O JavaScript usa dois tipos diferentes de operadores de igualdade: === | !== e == | !=. Considera-se boa prática, sempre usar a primeira dupla, ao fazer comparações.

Se dois operandos tem o mesmo tipo e valor, o === retornar verdadeiro e !== retorna falso." - JavaScript: Melhores Partes

Entretanto, ao usarmos == e !=, você acabará se deparando com problemas, ao trabalhar com tipos diferentes. Nesses casos, eles forçaraão uma conversão dos valores, sem sucesso.

2. Eval = Ruim

Para aqueles não familiarizados, a função eval dá-nos acesso ao compilador do JavaScript. Essencialmente, podemos executar o resultado de uma cadeia de caracteres passando-a como parâmetro para a função eval.

Além de diminuir substancialmente a performance do seu script, isso também gera um grande risco à segurança da aplicação, uma vez que dá muito poder ao que foi passado como texto. Evite!

3. Não Use Abreviações

Tecnicamente, você não precisa usar chaves ou ponto-e-vígulas. A maioria dos navegadores intepretará corretamente o trecho abaixo:

Entretanto, considere o seguinte:

Alguém pode achar que o código acima equivale ao do trecho abaixo:

Infelizmente, ele estaria errado. Na verdade, ele significaria:

Como você perceberá, a indentação imita o funcionamento das chaves. Não é preciso dizer que, essa prática, é terrível, e deve ser evitada a todo custo. A única vez que as chaves podem ser omitidos é nas instruções de linha única e, ainda assim, isso também é bastante debatido.

Sempre Considere o Futuro

E se, algum tempo depois, você precisar adicionar comandos à instrução if? Para tanto, precisará reescrever esse bloco de código. No fim das contas, tome muito cuidado ao omitir as chaves.

4. Use o JS Lint

O JSLint é um depurador, escrito pelo Douglas Crockford. Cole seu script lá e ele, rapidamente, escaneará por problemas e erros notáveis em seu código.

O JSLint pega um código fonte em JavaScript e escaneia-o. Se encontrar algum problema, retorna uma mensagem descrevendo o problema e a localização aproximada no código fonte. O problema não será, necessariamente, um erro de sintaxe, embora, geralmente, seja. O JSLint procura por algumas conveções de estilo de programação, bem como por problemas estruturais. Ele não atesta que seu programa está correto. Só provê "outros olhos" para ajudar a encontrar problemas."
- Documentação do JSLint

Antes de publicar algum script, execute-o pelo JSLint para ter certeza que não cometeu qualquer erro bobo.

5. Coloque os Scripts na Parte Final da Sua Página

Essa dica já foi abordada no meu artigo anterior dessa série. Mas, como ele é pertinente, colocarei a informação.

Place JS at bottomPlace JS at bottomPlace JS at bottom

Lembre-se – o objetivo principal é fazer a página carregar o mais rápido possível para o usuário. Quando carregar um script, o navegador não pode ocntinuar até que o arquivo inteiro tenha sido carregado. Assim, o usuário terá de esperar mais para perceber algum progresso.

Se o propósito dos seus arquivos JavaScript são, somente, para adicionar funcionalidades – por exemplo, após um botão ser clicado – vá em frente e coloque todos esses arquivos ao final da página, logo antes do fechamento da tag body. Isso é, definitivamente, uma boa prática.

Bem Melhor

6. Declare Variáveis, Fora da Instrução For

Ao executar instruções for muito grandes, não faça com que o motor JavaScript tenha de trabalhar mais que ele realmente precisa. Por exemplo:

Ruim

Perceba como precisamos determinar o tamanho do vetor a cada iteração e como temos de atravessar a DOM para encontrar o elemento container todas as vezes – altamente ineficiente!

Bem Melhor

Pontos extras para aquele que deixar um comentário mostrando e explicando como podemos melhorar o trecho acima, ainda mais.

7. A Forma Mais Rápida de Construir uma Cadeia de Caracteres

Não opte, sempre, pelo útil for, quando precisar iterar por um vetor ou objeto. Seja criativo e encontre a solução mais rápida para o trabalho em questão.

Não chatearei você com benchmarks; você terá de acreditar em mim (ou testar por conta própria) - esse, de longe, é o método mais rápido!

Usar métodos nativos (como o join()), independente do que esteja acontecendo por trás da camada de abstração, é, geralmente, muito mais rápido que os métodos alternativos, não nativos.
- James Padolsey, james.padolsey.com

8. Reduza as Variáveis Globais

Ao reduzir a quantidade de variáveis globais a um único nome, você reduz, significantemente, a chance de más interações com outras aplicações, widgets ou bibliotecas".
- Douglas Crockford

Bem Melhor

Note como reduzimos a quantidade de globais para o objeto, ridiculamente, chamado "DudeNameSpace".

9. Comente Seu Código

Pode até parecer desnecessário, no começo, mas, acredite, você QUERERÁ comentar seus códigos da melhor forma possível. O que acontece quando você volta a trabalhar em um projeto, depois de um mês sem tocar nele, só para descobrir que você não é capaz de lembrar, facilmente, a linha de pensamento que tinha. E se um de seus colegas tiver de revisar seu código? Sempre, sempre comente seções importantes do seu código.

10. Adira ao Aprimoramento Progressivo

Sempre crie uma alternativa para quando o JavaScript estiver desabilitado. Pode ser tentador pensar "A maioria dos visitantes tem o JavaScript habilitado, então, não preciso ficar preocupado". Porém, isso seria um erro gigantesco.

Você já parou para ver seu slider sem o JavaScript habilitado? (Baixe a Barra de Ferramentas do Desenvolvedor Web para conseguir fazer isso de forma fácil). Ele pode quebrar seu site completamente. Por via de regra, projete seu site, assumindo que o JavaScript estará desabilitado. Então, assim que o tiver feito, comece a aprimora progressivamente o layout!

11. Não Passe uma Cadeia de Caracteres Para "SetInterval" ou "SetTimeOut"

Considere o código a seguir:

Além de ser um código ineficiente, também funciona como se fosse a função eval. Nunca passe uma cadeia de caracteres para SetInterval ou SetTimeOut. Ao invés disso, passe uma função nomeada.

12. Não Use a Instrução "With"

A primeira vista, instruções "With" parecem ser uma boa ideia. O conceito básico delas é que podemo ser usadas para prover uma forma rápida para acessar objetos aninhados profundamente. Por exemplo...

– ao invés de –

Infelizmente, após alguns testes, percebeu-se que isso "se compoarta muito mal ao adicionar novos membros". Você deve usar um var.

13. Use {} Ao Invés de New Object()

Há inúmeras formas de criar objetos em JavaScript. Talvez o método mais tradicional é usar o construtor "new", dessa forma:

Entretanto, esse método recebe o selo de "má prática" sem, necessariamente, ser. Contudo, recomendo que você use uma forma muito mais robusta de criação de objetos, o método do objeto literal.

Bem Melhor

Note que, se quiser criar um simples objeto em branco, basta atribuir {} a uma variável.

Objetos literais permitem-nos escrever código que suporta várias funcionalidades e, ainda assim, torná-lo relativamente direto para os implementadores do nosso código. Não há necessidade de invocar construtores diretamente ou manter a ordem correta dos argumentos passados para as funções, etc". - dyn-web.com

14. Use [] Ao Invés de New Array()

O mesmo do ponto anterior, se aplica a vetores.

Okay

Bem Melhor

Um erro comum em programas JavaScript é usar um objeto no momento que um vetor é requerido, ou o contrário. A regra é simples: quando os nomes das propriedades são pequenos números inteiros sequenciais, você deve usar um vetor. Caso contrário, use um objeto". - Douglas Crockford

15. Tem Uma Longa Lista de Variáveis? Omita a Palavra-Chave "var" e Passe a Usar Vírgulas

Bem Melhor

...Isso deveria ser auto-explicativo. Duvido que tenha qualquer aprimoramento em velocidade, mas ele deixa seu código mais limpo.

17. Sempre, Sempre Use Ponto-e-Vírgulas

Tecnicamente, a maioria dos navegadores permitem você não usar os ponto-e-vírgulas.

Com isso dito, isso é uma prática muito ruim que pode levar a problemas, potencialmente, muito mais difíceis de achar.

Bem Melhor

18. Instruções "For in"

Ao iterar sobre itens de um objeto, você talvez perceba que está trazendo os métodos do objeto também. Para contornar isso, sempre envolva seu código usando uma instrução if que filtre a informação:

Como referenciado em JavaScript: Melhores Partes, por Douglas Crockford.

19. Use a Funcionalidade "Timer" do Firebug Para Otimizar Seu Código

Precisa de uma forma rápida e fácil de determinar o quanto uma operação leva? Use a funcionalidade "Timer" do Firebug para registrar os resultados.

20. Leia, Leia, Leia...

Embora seja um grande fã de blogs sobre desenvolvimento web (gosto muito deste aqui!), não há um verdadeiro substituto para um bom livro enquanto almoço ou antes de ir dormir. Sempre tenha um livro sobre desenvolvimento web na sua mesa de cama. Eis os meus livros facoritos sobre JavaScript.

Leia todos... Várias vezes. Eu mesmo ainda faço isso!

21. Funções Auto-executáveis

Ao invés de invocar uma função, é bem fácil criar uma função que automaticamente é executada quando a página carregar ou quando uma função pai for executada. Simplesmente, envolva sua função em parênteses e adicione um par extra ao final, que, essencialmente, invocará a função. Algo assim:

22. JavaScript Puro Sempre Pode Ser Mais Rápido Que Usar Uma Biblioteca

Bibliotecas JavaScript, como jQuery e Mootools, podem salvar um bom tempo quando estiver programando – especialmente com operações AJAX. Sabendo disso, tenha sempre em mente que uma biblioteca nunca será tão rápida quanto o JavaScript puro (assumindo que seu código esteja correto).

O método each do jQuery é ótimo para iterações, mas usar a isntrução for nativa, sempre será mais um pouco mais rápido.

23. O JSON.Parse do Crockford

Embora o JavaScript 2 deva vir com um analisador de JSON embutido, até o momento da escrita desse post, ainda precisamos implementar o nosso próprio analisador. Douglas Crockford, o criador do JSON, criou um analisador que você pode usar. Ele pode ser baixado AQUI.

Simplesmente, importando seu script, você terá acesso a um novo objeto JSON global, que pode ser usado para analisar seus arquivos .json.

24. Remova o Atributo "Language"

Anos atrás, não era incomum encontrar o atributo "language" em tags script.

Porém, esse atributo, há tempos, é obsoleto, então, deixe-o de fora.

Isso é Tudo, Pessoal

E lá se foram todas! vinte-e-quatro dicas essenciais para iniciantes em JavaScript. Deixe suas próprias dicas! Obrigado pela leitura. Qual deveria ser o assunto da terceira parte em nossa série?

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.