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 = "";
}
}
Nenhum comentário:
Postar um comentário