terça-feira, 22 de julho de 2014

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 = "";
}
}