Clean Code Javascript

[soloplayer 0]

Pessoal estou lendo aquele livro clean code e me deparei com um problemas, mas em javascript, segue codigo para entendimento

 function iniciarValidadoresTextArea() {

                 if ($("#form\\:corpo-email-venda-gerencial").val() !== undefined) {
                    limitaTextareaCorpoEmailVendaGerencial($("#form\\:corpo-email-venda-gerencial").val());
                }

                if ($("#form\\:corpo-email-nota-gerencial").val() !== undefined) {
                    limitaTextareaCorpoEmailNotaGerencial($("#form\\:corpo-email-nota-gerencial").val());
                }

                if ($("#form\\:corpo-email-nota-fiscal").val() !== undefined) {
                    limitaTextareaCorpoEmailNotaFiscal($("#form\\:corpo-email-nota-fiscal").val());
                }
}

Eu sei que tem como fazer apenas um IF e passar o nome, eu tentei desta forma:

 

Com dois arrays:

               var camposTextArea = ["#form\\:corpo-email-venda-gerencial", "#form\\:corpo-email-nota-gerencial", "#form\\:corpo-email-nota-fiscal", "#form\\:corpo-email", "#form\\:corpo-email-consignacao", "#form\\:corpo-email-pedido-venda", "#form\\:corpo-email-orcamento", "#form\\:corpo-email-cancelamento", "#form\\:corpo-email-financeiro-recibo"];
                var metodosTextArea = ["limitaTextareaCorpoEmailVendaGerencial", "limitaTextareaCorpoEmailNotaGerencial", "limitaTextareaCorpoEmailNotaFiscal", "limitaTextareaEmail", "limitaTextareaEmailConsignacao", "limitaTextareaEmailPedidoVenda", "limitaTextareaEmailOrcamento", "limitaTextareaEmailCancelamento", "limitaTextareaEmailFinanceiroRecibo"];

for (var chave = 0, valor; valor = camposTextArea[chave], chave < camposTextArea.length; chave++) {
                    nomeMetodo = metodosTextArea[chave];
                    nomeMetodo = nomeMetodo.replace('"', "");
                    if ($(valor).val() !== undefined) {
                        nomeMetodo($(valor).val());
                    }
                    console.log(chave, valor, nomeMetodo); // chave é o índice, valor é o valor
                    
                }

Mas sei que a linguagem nao permite isso, o que sugeriam, até mesmo os metodos gostaria de dar um CLEAN, segue

function limitaTextareaCorpoEmailVendaGerencial(valor) {
                var quantidade = 700;
                var total = valor.length;

                if (total <= quantidade) {
                    resto = quantidade - total;
                    document.getElementById('corpo-email-venda-gerencial-span').innerHTML = resto;
                } else {
                    document.getElementById('form:corpo-email-venda-gerencial').value = valor.substr(0, quantidade);
                }
            }

            function limitaTextareaCorpoEmailNotaGerencial(valor) {
                var quantidade = 700;
                var total = valor.length;

                if (total <= quantidade) {
                    resto = quantidade - total;
                    document.getElementById('corpo-email-nota-gerencial-span').innerHTML = resto;
                } else {
                    document.getElementById('form:corpo-email-nota-gerencial').value = valor.substr(0, quantidade);
                }
            }

entro na mesma questão, sei que tem como, mas por não conseguir ver a solução gostaria que se possivel me ajudassem, grato.

 

[William Bruno 1501]

A primeira coisa a ser feita é não duplicar código nessa função. Isole o que varia e envie como parâmetro:

 

function limitaTextarea($span, $input) {
    var quantidade = 700;
    var total = $input.value.length;
    var resto = 0;

    if (total <= quantidade) {
        resto = quantidade - total;
        $span.innerHTML = resto;
    } else {
        $input.value = $input.value.substr(0, quantidade);
    }
}

Dai em diante, vc pode fazer o loop. Eu sugiro algo como:

var fields = [
    {
        span: document.getElementById('corpo-email-nota-gerencial-span')
        input: document.getElementById('form:corpo-email-nota-gerencial')
    },
    {
        span: document.getElementById('corpo-email-venda-gerencial-span')
        input: document.getElementById('form:corpo-email-venda-gerencial')
    }
];

Além disso:

-> Escreva tudo em inglês sempre.

-> Não misture javascript puro com jQuery assim... hora usa de uma forma, hora usa de outra.. tente manter uma consistência.

-> Use seletores CSS e não xpath.

-> Programe em JavaScript.

[soloplayer 0]

Amigo obrigado, e na chamada? eu fazia assim onkeyup="limitaTextareaEmailFinanceiroRecibo(this.value)" só que o span é outro id corpo-email-financeiro-recibo-span tem o -span no final. E são varios spans grato.

[William Bruno 1501]

Ai tem mais um erro então:

-> Não use eventos inline.

 

A chamada deveria ser:

 

var $notaInput = document.getElementById('corpo-email-nota-gerencial');
var $notaSpan = document.getElementById('corpo-email-nota-gerencial-span');

$notaInput.addEventListener('keyup', function(event) {
    limitaTextarea($notaSpan, $notaInput);
});

Sem misturar javascript com html.

Antes de tentar fazer o clean code, vc precisa ver alguns conceitos básicos de boas práticas javascript.

[soloplayer 0]

ótimo Bruno, vou testar aqui e retorno com o status, obrigado pela dica amigo ;)

William, mas o seguinte, este código:

var fields = [
    {
        span: document.getElementById('corpo-email-nota-gerencial-span')
        input: document.getElementById('form:corpo-email-nota-gerencial')
    },
    {
        span: document.getElementById('corpo-email-venda-gerencial-span')
        input: document.getElementById('form:corpo-email-venda-gerencial')
    }
];

Como eu percorreria ele utilizando a funcao function limitaTextarea($span, $input) {? E ele setar os campos? Grato.

[William Bruno 1501]

var fields = [

{

span: document.getElementById('corpo-email-nota-gerencial-span'),

input: document.getElementById('corpo-email-nota-gerencial')

},

{

span: document.getElementById('corpo-email-venda-gerencial-span'),

input: document.getElementById('corpo-email-venda-gerencial')

}

];

 

fields.forEach(function(field) {

limitaTextarea(field.span, field.input); //init

 

field.input.addEventListener('keyup', function(event) { //event

limitaTextarea(field.span, field.input);

});

});

E para o inicial é a mesma coisa...

[soloplayer 0]

William, vou testar, grato.

William o que voce diz inicial? Não entendi? Funcionou em partes

[Marcelo Lipienski 9]

Posso sugerir que você crie um jsfiddle, fica mais fácil perceber o contexto em que você está executando e sermos mais assertivos nos apontamentos.

[soloplayer 0]

Boa idéia amigo Marcelo, como é uma aplicação grande utilizando jsf e java, resumi em somente html e js, segue o endereco:

 

https://jsfiddle.net/soloplayer/w18s6z91/

 

E valendo ressaltar que coloquei apenas dois textarea, tenho pra mais de 10 textarea, mas não consegui pensar em nada que funcionasse em JS refatorando para uma função generica, o amigo William ainda me deu um Help mas não consegui desenvolver mais. grato.

[William Bruno 1501]

Aplicando o código do jeito que eu te passei..

 

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<textarea id="corpo-email-financeiro-recibo" rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>
<span style="color: #999999; font-size: 11px; padding: 0; margin: 0">
    Campo (caracteres restantes: <span id="corpo-email-financeiro-recibo-span">700</span>)
</span>



<textarea id="corpo-email-cancelamento" rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>
<span style="color: #999999; font-size: 11px; padding: 0; margin: 0">
    Campo (caracteres restantes: <span id="corpo-email-cancelamento-span">700</span>)
</span>


<script>
function limitaTextarea($span, $input) {
    var quantidade = 700;
    var total = $input.value.length;
    var resto = 0;

    if (total <= quantidade) {
        resto = quantidade - total;
        $span.innerHTML = resto;
    } else {
        $input.value = $input.value.substr(0, quantidade);
    }
}
var fields = [
    {
        span: document.getElementById('corpo-email-cancelamento-span'),
        input: document.getElementById('corpo-email-cancelamento')
    },
    {
        span: document.getElementById('corpo-email-financeiro-recibo-span'),
        input: document.getElementById('corpo-email-financeiro-recibo')
    }
];

fields.forEach(function(field) {
    limitaTextarea(field.span, field.input); //init

    field.input.addEventListener('keyup', function(event) { //event
        limitaTextarea(field.span, field.input);
    });
});

</script>
</body>
</html>