MVC no javascript
No artigo anterior que escrevi sobre Jasmine, recebi um comentário de um amigo no qual ele me perguntava como fazer para testar códigos Javascript que interagem com o DOM ou que tenham uma certa dependência dele.
O primeiro impulso foi de responder para usar um recurso de Fixtures ( ou similiar), onde ele pode “criar” elementos no DOM durante um cenário de teste e depois removê-los para não atrapalhar os demais. Embora isso resolva o problema dele – de testar funções que precisem de elementos HTML, a pergunta dele suscita uma discussão bem mais ampla e interessante.
Hoje é um fato que nossos front-end ( client side ou interface web ou como queira chamar) são cada vez mais ricos … Tem muito ( mas muito mesmo) código Javascript para criar uma experiência para o usuário boa. Se acha que estou exagerando, abrar seus próprios arquivos ou então converse com um desenvolver front-end mais experiente.
Com uso maior do javascript, o cuidado com seu uso também tem que ser maior. Não é mais aquela função de duas linhas que abre um alert ou aquelas validações simples do seu form. Acredito que em muitas páginas a quantidade de linhas de Javascript é maior que a de html e css. Tudo depende da riqueza da experiência ( veja que não estou considerando CSS3 que “substitui” bastante algumas coisas).
Mas chega de enrolação e vamos ao que interessa: como a gente organiza melhor o nosso código.
Primeira dica é separá-lo em um arquivo. Nada de script na página, por favor. Deixe para fazer isso em última instância. Acredite, sempre existe um jeito de desacoplar.
Caso você já tenha programado alguma coisa no SERVER-SIDE(adoro esse nome, parece que é outra dimensão), sabe que existem diversos padrões de designs( boas práticas). Um deles, e mais famoso, é o MVC – model view controller. Esse pattern ajuda a gente manter bem separado a lógicas de apresentação da lógica de negócio. Assim ao mexer num, não necessariamente precisará mexer noutro.
Seguindo essa filosofia, procuro desenvolver minhas lógicas de forma que eu separe bem oque é apresentação/animação da lógica de “negócio” da minha página. Por exemplo, imaginemos que agora temos que validar alguns dados e mostrar um aviso com os erros. O que faria seria quebrar isso em diversas funções. Uma para cada camada, no mínimo:
...
}
function avisaErro(mensagem){
...
}
Erros = {
"nome_obrigatorio": "Campo nome deve ser obrigatorio"
}
Sei que o exemplo acima pode ser muito simples. Mas ele facilita testar e ainda por cima facilita alterar qualquer coisa na lógica de cada parte sem ter que mexer em um monte de lugar ou ter um método de 40 linhas para fazer uma validação.
Outro exemplo, mais próximo do real, imagina que recebe dados de um form, posta-os via ajax, atualiza uma listagem abaixo e mostra mensagem de sucesso ou erro:
}
Requisicao.prototype.envia = function(url,dados){ //faz algo aqui};
function ItemLista(){}
ItemLista.prototype.renderizaHtml = function(){ //aqui voce pode colocar a logica e escrever o item no html};
function submit(){
var form = document.getElementByTag("form");
...
var requisicao = new Requisicao();
var item;
try {
requisicao.envia(form.url);
item = new Item(requisicao);
catch {
avisaErro("Ocorreu um envio no envia de dados");
}
item.renderizaHtml();
}
O exemplo acima é apenas conceitual e está faltando coisa para caramba. Mostra bem, como separar bem as coisas e garantir uma boa legibilidade. Para testar isso você pode fazer sem precisar de acessar o DOM, fazendo mock das chamadas onde isso ocorre.
Bom num próximo artigo avançamos mais no assunto e mostro algumas bibliotecas e frameworks para ajudar nesse sentido.
