Boas Práticas ao desenvolver com Javascript

2010-09-20 duodraco Dicas

Olá. Este é meu primeiro post aqui no ajaxianos. Vou repassar algumas boas práticas e dicas para o desenvolvimento com javascript.

1.: Utilizar uma biblioteca: Vai te poupar boas horas de trabalho, com funções prontas para HttpRequest, alteração de conteúdo, utilitários para arrays e objetos, etc. Temos diversas opções, dentre as mais conhecidas jQuery, Prototype e Dojo. Ainda temos as utilitárias para interface como jQueryUI, Scriptaculous e YUI, sendo que esta ultima é mais global, não sendo uma biblioteca só para interface. O interessante ao usar uma biblioteca é antes de mais nada estudar sua API, e num segundo momento seu código. Você encontrará soluções sofisticadas para problemas comuns. Minha primeira opção é a jQuery / jQueryUI … e em breve jQuery Mobile

2.: Mantenha um padrão de codificação. Isso vai colaborar demais na organização do código, e principalmente trabalhando em equipe: é fundamental que todos estejam falando a mesma língua. Não conheço nenhum padrão que seja “o padrão a ser seguido”. O que existe é uma convenção na qual muitos desenvolvedores se apoiam:
- indentação com espaços (4) ao invés de tabs
- limite de 80 caracteres por linha
- chaves de blocos  lógicos(if,switch,for,while,etc) começam na linha da declaração, e seguem com uma quebra de linha e indentação e seu conteúdo.
- Utilizar o formato JSON para declarar objetos e arrays ([1,2,3] ou {“nome”:”Duodraco”})
- Nomear de maneira humanamente compreensível suas variáveis. Já vi variáveis com os nomes mais bizarros possíveis, e alguns com nomes acessíveis, mas completamente fora de contexto.
- Usar o formato “camelizado” na nomenclatura: palavras todas juntas, e o primeiro caracter de cada uma em maiúsculo. maisOuMenosAssim.
- Usar ; no final de cada comando
- Codar de forma que o código seja autodescritivo.
- evitar continue, eval e with, por mais tentador que possa parecer.
Um código bem formatado deve se parecer com isso:

var contador = 0;
function popularBox(titulo,corpo){
    if(titulo == undefined || corpo == undefined){
        return false;
    }
    jQuery("#box DIV.titulo").html(titulo);
    jQuery("#box DIV.corpo").html(corpo);
    return true;
}

Uma maneira que utilizo para organizar o código é mantê-lo em arquivos separados (independente da biblioteca, mesmo que seja feito mais um request). Nesses arquivos eu agrupo minhas funções em Objetos, utilizando-os inclusive com variaveis que utilizo na página. Uso e abuso do formato JSON para me organizar. Segue um exemplo:

var customControl = {
    "defaults":{
        "title":"Atenção",
        "position":"center center"
    },
    "alert":function(body,title,callback){
        if(title == undefined || !title){
            title = customControl.defaults.title;
        }
        //mais código
    },
    "confirm":function(body,callback){
        //codigo do confirm
    }
}
var artigo = {
    "obj":{
        "id":0,
        "title":"",
        "body":""
    },
    "save":function(){
        //codigo do save
    }
}

Outra dica de extrema importância: Sabe aquela história de “CSS no começo e JS no fim”? Siga isso sempre no seu desenvolvimento.
Deixe para carregar suas bibliotecas, funções, e tudo o mais que precisar no final, preferencialmente após todo o HTML (DOM) ter sido decalrado.
Os navegadores param a renderização sempre que encontram <script> e isso pode (e vai) ser prejudicial na performance do seu sistema/site; além disso em alguns navegadores (entenda-se: IE) lançam erros se você tentar alterar a árvore DOM enquanto ela estiver sendo processada. Sua vida será melhor se tentar manipular os objetos com os quais quer trabalhar se eles já existirem.

Dica extra: Utilize ferramentas de debugging/inspect … no firefox você tem o mais que excelente firebug, e em navegadores webkit existe o web inspector; o Opera tem o DragonFly e o IE … bem o IE é o IE…

Bom, por hora é só. Em breve voltaremos com mais dicas. Fiquem ligados