Minimizando o uso de IFs - Utilizando o conceito de responsabilidade no javascript

Há tempos que eu ando tentando aplicar no meu dia-a-dia o conceito de responsabilidade no desenvolvimento javascript, depois de um tempo desenvolvendo funções com IFs que não terminavam mais, passei a aplicar esse conceito para a melhoria do meu código.
Para ilustrar o que eu chamo de responsabilidade no javascript criei alguns pequenos trechos de código que demonstram o uso do mesmo:

Código Javascript

function mostraTipo(tipo) {
    "use strict";
    document.getElementById("nome").style.display = "none";
    document.getElementById("placa").style.display = "none";
    document.getElementById("cpf").style.display = "none";
    //Mostra o input do tipo selecionado
    document.getElementById(tipo).style.display = "";
}

function validar() {
    "use strict";
    var combo = document.getElementById("tipo").value;
    if (document.getElementById(combo).value === "") {
        alert("Preencha o campo " + combo + ".");
        document.getElementById(combo).focus();
        return;
    }
}


Código Html

<form id="f">
<select id="tipo" onchange="mostraTipo(this.value);">
<option value="tipo">Selecione</option>
<option value="nome">Nome</option>
<option value="placa">Placa</option>
<option value="cpf">Cpf</option>
</select>
<input type="text" id="nome" style="display:none"/>
<input type="text" id="placa" style="display:none"/>
<input type="text" id="cpf" style="display:none"/>
<input type="button" value="Validar" onclick="validar();"/>
</form>

Pois é, o código acima demonstra que a passagem de parâmetro com o "this" evita uma quantidade considerável de Ifs, vamos ver como ficaria sem esse parâmetro:

function mostraTipo() {
    "use strict";
    document.getElementById("nome").style.display = "none";
    document.getElementById("placa").style.display = "none";
    document.getElementById("cpf").style.display = "none";
    //Mostra o input do tipo selecionado
if( document.getElementById("tipo").value == "nome") {
    document.getElementById("nome").style.display = "";
} else if( document.getElementById("tipo").value == "placa") {
    document.getElementById("placa").style.display = "";
} else {
    document.getElementById("cpf").style.display = "";
}
}

Javascript Idiomático

Javascript idiomático? what the fuck? Essa foi a primeira reação que muitos desenvolvedores por ae tiveram. "Pra que preciso escrever javascript de forma consistente? É só javascript". Bom, o fato é que o javascript tem evoluído muito no últimos anos, e com a consolidação da importância do front-end, isso só tende a aumentar.
Hoje vou tentar explorar guias de estilo do javascript, especificamente: a sua importância, guias de estilo que valem a pena dar uma olhada e ferramentas que podem auxiliar a melhorar o nosso querido código javascript.


Como assim guia de estilo?
Um guia de estilo é um conjunto de padrões para a escrita e design de código. A implementação de um guia de estilo proporciona uniformidade no estilo de código e formatação, muitas vezes cobrindo orientações sobre recuo (tabs ou espaços), variável e função, convenções de nomeação, onde melhor se aplicam espaços em branco e assim por diante.

E porque isso é importante?
Como dizem por ae, código bem escrito não precisa de documentação. Embora isso não seja 100% verdade, mas fato é que quanto mais legível o código, menos nosso ele é, se tornando mais fácil de manter por outros devs.
Seguir um guia de estilo consistente ajuda tanto a melhorar a qualidade do código que escrevemos. Isso facilita que outros desenvolvedores o entendam rapidamente,  podendo economizar tempo no longo prazo.

Usando de código bem escrito, você pode:

• Reduzir o tempo necessário para compreender uma implementação.
• Tornar mais fácil determinar qual código pode ser reutilizado.
• Saber como fazer a manutenção do código sem afetar toda a aplicação.

E onde eu vejo mais sobre isso?

É bom saber que temos desenvolvedores interessados em melhorar a consistência do código JavaScript que  escrevem, e o mais legal, grandes empresas e projetos também!  Fico muito feliz em recomendar os seguintes guias de estilo:

• Idiomatic.js
• JQuery Core Style Guidelines
• Google JavaScript Style Guide

Bom galera, esse foi meu primeiro post aqui, tentei falar de como o javascript bem escrito e consistente pode ajudar no dia-a-dia do desenvolvedor. Até a próxima!

Referencias:

http://bartwullems.blogspot.com.br/2012/04/principles-of-writing-consistent.html

http://dev.opera.com/articles/view/efficient-javascript/

https://github.com/rwldrn/idiomatic.js/tree/master/translations/pt_BR

Padrões Javascript

Hoje estou aqui para falar um pouco sobre padrões javascript, estou lendo o livro Padrões javascript que conheci por indicação no livro o melhor do javascript que também contém muitas dicas de padrões, estou utilizando o jslint - http://www.jslint.com/ para validar minhas funções javascript, mas como hoje em dia ninguém cria funções javascript na mão passei a utilizar o jshint - http://www.jshint.com/ que é uma variação do jslint mas com suporte aos frameworks variados, e uma dica também para identar seu código javascript estou utilizando o jsbeautifier - http://jsbeautifier.org/ muito bom faz um trabalho excelente de identação. Usando esses sites para validação e identação seu código ficará bem melhor escrito e bem mais legivel. No próximo post dou mais dicas e falo mais sobre padrões javascript.

Iniciando atividades - O melhor do javascript

Bom, estou criando este blog para compartilhar as experiências e novidades descobertas no mundo da programação e tecnologia, tudo que eu julgar interessante estarei postando aqui e vocês poderão acompanhar.
Pra começar:
Estou terminando de ler o livro O melhor do javascript - Douglas Crockford/2008, o livro é muito bom e aprendi muito sobre a linguagem e suas partes boas e ruins até agora.
Vou dividir algumas coisas aqui que achei legal e que é aplicável no meu ambiente de trabalho.
Herança prototipica - Pra quem não sabe o que é vale a pena dar uma pesquisada porque pelo que li essa é uma das melhores coisas na liguagem javascript.
Um exemplo prático todo programador que trabalha com web e nem sempre utilizar os frameworks javascript sabe que o javascript não tem uma função trim(), função para retirada de espaços tanto no inicio quanto final de um texto, como nas outras linguagens como java, php, etc.
Pois então isso é facilmente contornado com o uso da herança prototipica você pode criar uma que lhe sirva igual a das demais linguagens sem muito trabalho.Ficaria assim:
String.prototype.trim = function(){//herdando de strings
return this.replace(/^\s*/, "").replace(/\s*$/, "");//código para retirar os espaços em branco usando expressões regulares
}

Pois então está resolvido esse problema da falta da função trim() no javascript, o mais legal é que eu já havia lido o livro do Aurélio, o qual recomendo pra todo mundo interessado no assunto, o que facilitou bastante o meu entendimento sobre esse e outras funções do livro.
Uma coisa muito legal também e que não sabia é que o javascript herdou a estruturação da linguagem c mas não os tipos de blocos o que torna incorreto você declarar uma varivel fora do começo de uma função e o que é pior, seu programa pode dar pau...
Então inicialize todas as suas variavéis no inicio das funções use o firebug para debugar, o closure compiler do google para otimizar seu código, o jslint para achar vários erros e o jsbeautifier pra deixar seu código javascript mais legivel.
Vou passar por essas ferramentas no próximo post com mais tempo.
Abraço.