Pattern JavaScript

O pattern utilizado por ns o Revealing Module Pattern. As principais vantagens de

manter este padro so:

1.Consistncia de cdigo;

2.Melhores prticas;

3.Escalabilidade;

4.Fcil manuteno;

5.Uniformidade entre projetos.

A ideia que o cdigo mantenha unidade, seja ele escrito por uma ou vrias pessoas,

dentro de um projeto e entre projetos diferentes, diminuindo o tempo de aprendizado.

As regras a seguir propoem um padro mnimo para desenvolvimento. O mais importante

manter a consistncia de estilo de cdigo. O que for escolhido como estilo para o seu

projeto dever ser seguido em todos os arquivos.

Padres de escrita

Identao: utilizamos 2 espaos, mas o mais importante seguir um estilo nico. Nunca

misture espaos e tabs em nico arquivo. Para facilitar inclumos no projeto um arquivo de

configuraao de editores, o ".editorconfig", saiba mais sobre ele em editorconfig.org Existem

plugins para vrios editores, no nosso time usamos:

Plugin para Sublime Text

Plugin para Vim

Sintaxe: para separaao dos blocos de cdigo, utilizamos o estilo1TBS, por exemplo:
1 if ( x < 0 ) {
2 console.log( x )
3 } else {
4 console.log( y )
5 }
Observe os alinhamentos, quebras de linhas, posio das chaves e espaos entre variveis

e operadores.

Revealing Module Pattern

Para melhorar a organizao dos arquivos, funes, performance e diminuir a chance de

erros e conflitos, adotamos o Revealing Module Pattern do Christian Heilmann.

As vantagens desse pattern so: organizao, clareza, performance, expe publicamente

apenas as funes e variveis que se deseja e namespace nico evitando sobrescrever

mtodos facilmente. Leia mais sobre ele no livro do Addy Osmani.

Um exemplo:

8
// Define o objeto global do projeto, igual a um j existente ou cria um novo objeto.
9
var projeto = projeto || {};
1
0
// Define o mdulo no objeto global.
1
projeto.moduloUm = (function() {
1
'use strict';
1
2
function iniciar() {
1
interno();
3
// ...
1
}
4
1
function atualizar() {
5
// ...
1
}
6
1
function interno() {
7
// ...
1
}
8
3
return {
2
iniciar:iniciar,
4
atualizar: atualizar
2
};
5
2
}());
6
 Mdulos

Todos os scripts devem ser modularizados ao mximo. S inicia-se um comportamento se

ele precisar ser usado. O ideal ter um mdulo por arquivo, e que eles no se iniciem

sozinhos. Um mdulo central que funcione como controlador de quais sero executados

uma boa prtica. Abaixo, trs exemplos de mdulos e como eles so carregados:

Mdulo de grficos no arquivo charts.js

8
var projeto = projeto || {};
9
projeto.Grafico = (function() {
1
'use strict';
0
1
function iniciar() {
1
inserirGrafico();
1
}
2
1
function inserirGrafico() {
3
// ...
1
}
4
1
return {
5
iniciar:iniciar
1
};
6
1
}());
7

Mdulo servidores no arquivo servers.js

1
var projeto = projeto || {};
2
projeto.Servidores = (function() {
3
'use strict';
4
5
function iniciar() {
6
buscaServidores();
7
}
8
9
function buscaServidores() {
1
insereListaServidores()
0
// ...
1
}
1
1
return {
2
iniciar:iniciar
1
};
3
1
}());
4
 carregaModulos.js

Finalmente o arquivo que controla quando cada mdulo ser executado, da maneira que

preferir

1
var projeto = projeto || {};
1
projeto.carregaModulos = (function($) {
1
'use strict';
2
1
function inicio() {
3
if ( $('.grafico').size() ) {
1
projeto.graficos.inicio();
4
}
1
5
if ( window.location.pathname === '/servidores' ) {
1
projeto.servidores.inicio();
6
}
1
}
7
1
return {
8
inicio:inicio
1
};
9
2
}(jQuery));
0
2
projeto.carregaModulos.inicio();
1

Cdigo em apenas um idioma

Para facilitar a manutenao e a legibilidade do cdigo, procure usar apenas um idioma, em

nomes de funes, variveis e comentrios. O mais importante seguir um padro,

mantendo ele do incio ao fim do projeto. Excees, claro, so libraries e plugins que

utilizados. Seja qual for a lngua utilizada importante ser claro, utilizando nomes

descritivos, evitando ser prolixo nos nomes, funes e comentrios, como abordado no

tpico Seja compreensvel abaixo.

'use strict';

Ao utilizar "use strict"; no incio de cdigos ou funes, declara-se uma mudana na sintaxe

do Javascript, que lana mais excees mostrando problemas no cdigo. Os erros mais
comuns so uso de palavras reservadas do javascript (ECMAScript 5 e 6), uso de variveis

no declaradas e uso de funes descontinuadas.

Para utilizar, basta inserir a string 'use strict'; antes do bloco de cdigo a ser avaliado ou

funo. Exemplos:

1 "use strict";
2 idade = 17; // lana um erro de referncia
3
4 function soma(a, b, c) { // erro de sintaxe
5 "use strict";
6 return a + b + c; // exibe o erro se a funo chamada
7 }
Leia mais em MDN - Strict mode

Nomenclatura de pastas, arquivos, mdulos e plugins

Um projeto pode ter muitos arquivos javascript, ento importante que estejam bem

organizados desde o incio, separados e bem nomeados.

A estrutura pode variar muito de projeto para projeto, mas as recomendaes mnimas

so:

Nomes dos arquivos na mesma lngua em que so escritos;

Nomes sem camelCase;

Pastas separadas por tipos (bibliotecas/frameworks/plugins);

Plugins identificados por verso.

1 javascripts
2 libs
3 jquery.min.js
4 underscore.min.js
5 highcharts.min.js
6 plugins
7 jquery.validate-1.2.js
8 jquery.slider-3.1.js
9 jquery.validate.addicional-methods-0.8.js
1 modules
0 charts
1 | servers.js
1 | transfer.js
1 servers.js
2 servers.forms.js
1 utils.js
3 main.js
1
4
1
5
1
6
1
7

Seja compreensvel

Use nomes de variveis e funes auto explicativos e simples. Crie algum padro e

mantenha em todo o projeto. Utilize variveis e funes camelCase, pela facilidade de

leitura, escrita e praticidade ao se trabalhar.

Exemplos:

Variveis com nomes ruins:

1 // Curtos, posicionamento no cdigo e abreviaes
2 var x1;
3 var campo1;
4 var latXY;
5
6 // Longos demais
7 var valorEixoXGraficoConsumo;
8 var campoTextoPrimeiroNome;

Funes com nomes ruins:

1 // Nomes que descrevem o cdigo, nao o objetivo da funo
2 function maiorDeDezoitoAnos(idade){
3 return idade >= 18;
4 }
5 // melhor descrever o objetivo
6 function possuiMaioridade(idade){
7 return idade >= 18;
8 }

uma boa ideia criar um padro para suas variveis e funes, como por
exemplo:
1
// Variveis com $ no incio so elementos/objetos jQuery
2
var $header = $('#header');
3
var $menuItens = $('#menu a');
4
5
// Maisculas para constantes
6
var PASTA_IMAGENS = '/assets/images/';
7
var NOME_CLIENTE = 'Fulano de Tal';
8
9
// _ no incio para variveis e funes privadas
1
var _contador = 0;
0
Confira o padro de nomenclatura do Douglas Crockford

Evite globais

No geral uma pssima idia, porque aumenta a chance de ter algo sobrescrito. Uma

opo utilizar closures e module pattern.

Seja consistente no estilo de cdigo

possvel escrever seu cdigo de muitas maneiras, mas procure manter o mesmo estilo em

todo seu projeto. Mantendo um padro nos nomes, identaces, patterns, etc. Uma dica,

utilize o jslint para validar seu cdigo.

Escreva os comentrios necessrios

comum ouvir "Um bom cdigo no precisa de explicao", mas na prtica em projetos

maiores, procure explicar a finalidade do seu cdigo. Muitas pessoas, de diferentes nveis,

podem ter que trabalhar no seu cdigo e nem sempre elas tem experincia, tempo ou

conhecimento do negcio para entender tudo. Facilite o desenvolvimento e manuteno

comentando, mas no explicando o que ele faz, mas qual a regra de negcio.

Exemplo:

1 // Ruim: verifica se maior de 18

2 // Bom: menores de idade so redirecionados
3 if( idade >= 18 ){ ... }

Lembrando que comentrios devem existir apenas na verso de desenvolvimento, devendo

ser removidos no arquivo minificado que entregue em produo.

 Use testes automatizados

Utilizamos Jasmine para testes, assim como os comentrios, uma tima forma de explicar

o que seu cdigo faz ou deveria fazer. Alm de ter o dispositivo de alerta quando algum

teste quebra, d mais segurana para manutenes e incluso de novas funcionalidades.

Evite misturar tecnologias

Na prtica do dia a dia, algo bem simples: estilize seu HTML com CSS, no com JS.

1 // Errado
2 $('#nome-usuario').css({
3 'border': '1px solid red',
4 'color': 'red'
5 });
6 // Certo
7 $('#nome-usuario').addClass('erro');

Crie os estilos que precisar (e animaes, quando possvel) no CSS, e no javascript controle

quando os estilos so aplicados, em vez de aplicar propriedades.

Outro ponto importante seguir a jQuery. Eu sei que voc vai querer escrever JavaScript

puro em alguns momentos. Mas isso complica a leitura do cdigo e sai totalmente do

padro inicial definido que usar a abstrao da jQuery. Por isso, use sempre os comandos

da jQuery.

Use sintaxe abreviada

Conhea as notaes de variveis e funes abreviadas e procure us-las.

Exemplo:

1 // Use
2 var cores = ['rosa', 'azul', 'verde'];
3
4 // Em vez de
5 var cores = new Array();
6 cores[0]='rosa';
7 cores[1]='azul';
8 cores[2]='verde';
9
1 // Use
0 var margem = altura || 10;
1
1 // Em vez de
1 if(altura === undefined){
2 var margem = altura;
1 } else {
3 var margem = 10;
1 }
4
1 // Use
5 var direcao = (x > 100) ? 1 : -1;
1
6 // Em vez de
1 var direcao;
7 if(x > 100){
1 direcao = 1;
8 } else {
1 direcao = -1;
9 }

Modularize seu cdigo

Evite escrever funes, trechos de cdigo muito longos, ou aninhados. Procure separar

regras e evite cdigos repetidos.

Exemplo:

1 // Em vez de
2 $('#botao1').on('click', function(){
3 $('#resultado').load('ajax/lista-pessoas.html', function() {
4 $('#formulario').slideUp()
5 });
6 })
7 $('#botao2').on('click', function(){
8 $('#resultado').load('ajax/lista-empresas.html', function() {
9 $('#formulario').slideUp()
1 });
0 })
1 //...
1
1 // Faa
2 function ocultaFormulario(){
1 $('#formulario').slideUp();
3 }
1 $('#botao1').on('click', function(){
4 $('#resultado').load('ajax/lista-pessoas.html', function() {
1 ocultaFormulario();
5 });
1 })
6 $('#botao2').on('click', function(){
1 $('#resultado').load('ajax/lista-empresas.html', function() {
7 ocultaFormulario();
1 });
8 })
1
9 // Ou melhor
2 function ocultaFormulario(){
0 $('#formulario').slideUp();
2
}
1
function carregaDados( elemento, url){
2
$(elemento).on('click', function(){
2
$('#resultado').load(url, function() {
2
ocultaFormulario();
3
});
2
})
4
}
2
carregaDados('#botao1', 'ajax/lista-pessoas.html');
5
carregaDados('#botao2', 'ajax/lista-empresas.html');
2

Evite muitos aninhamentos

Facilite o entendimento e manutenao dos seus cdigos. Utilize as prticas anteriores e

evite um cdigo do tipo:

3 $('#botao').on('click', function(){
1 $.ajax({
4 type: "POST",
1 url: 'usuarios',
5 success: function(data){
1 $('resultado').fadeIn('fast', function(){
6 $('#formulario').animate({
1 heigth : 0,
7 opacity: 0
1 }, 300, function(){
8 $('#mensagem').animate({
1 heigth : 200,
9 opacity: 1
2 }, 300, function(){
0 // ...
2 })
1 }
2 )
2 })
2 },
3 error: function(){
2 $('#mensagem').text(mensageErro);
4 }
2 });
5 });

Otimize loops

Existem vrias maneiras de fazer loops, uma melhores que outras. Hoje, comum encontrar

cdigos usando loops do jquery ($.each) onde loops nativos poderiam resolver. Uma

tcnica simples para melhorar ainda mais os loops for() nativos fazer cache de variveis

de comparao, evitando executar o .length a cada iterao.

Exemplo:

1
2 // Use
3 var cores = ['Azul', 'verde', 'rosa', 'vermelho'];
4 for(var indice = 0, quantCores = cores.length; indice < quantCores; indice++){ //
5 console.log( cores[indice] );
6 }
7
8 // em vez de
9 var cores = ['Azul', 'verde', 'rosa', 'vermelho'];
1 for(var indice = 0; indice < cores.length; indice++){
0 console.log( cores[indice]) ;
1 }
1
Para comparao, um teste de performance no jsperf analisando diversos tipos de loop. O

loop otimizado, como acima, executou 159k vezes, contra 113k vezes do tradicional.

Minimize acessos ao DOM

Evite ao mximo acessar o DOM para buscar ou inserir informaes. lento e no se pode

confiar no que est no DOM. Coisas simples podem minimizar o acesso, por exemplo, se

alguma funo precisa atualizar uma tabela no seu HTML, em vez de percorrer por

alterando os valores, pode ser mais eficiente criar uma funo que reescreva toda a tabela,

e depois simplesmente troque a antiga pela nova. Outra simples fazer cache de objetos

jQuery, por exemplo:

4 // Em vez de
1 $('#botaoEnviar').on( 'click', function(){
5 $(this).prop( 'disabled', true );
1 $('$formulario').addClass( 'enviando' );
6 $.post( 'ajax/contato', function( dados ) {
1 $('#mensagem').html( dados );
7 $('$formulario').removeClass( 'enviando' );
1 $('#botaoEnviar').prop( 'disabled', false );
8 });
1 });
9
2 // Faa
0 var $botaoEnviar = $('#botaoEnviar');
2 var $formulario = $('#formulario');
1 var $mensagem = $('#mensagem');
2
2 $botaoEnviar.on( 'click', function(){
2 $botaoEnviar.prop( 'disabled', true );
3 $formulario.addClass( 'enviando' );
2 $.post('ajax/contato', function( dados ) {
4 $mensagem.html( dados );
2 $formulario.removeClass( 'enviando' );
5 $botaoEnviar.prop( 'disabled', false );
});
});