mardi 8 juin 2021

In JS There is any pattern or Class style to follow when primarily manipulating DOM Elements?

I'm trying to improve and clean a bit my code that often have this bunch of "querySelectors" and global variables, so I want to know, there is any pattern or use of Classes in this cases? or just break it in a lot of functions and separate the files is the 'right' thing to do?

this code is just a example of what I mean by "bunch of querySelectors"

    //variables
    const form = document.querySelector("#form_contrato");
    const btnRespAluno = document.querySelector("#label_checkbox_resp_aluno");
    const btnCombo = document.querySelector("#label_check_combo");
    const checkCombo = document.querySelector("#check_combo");
    const cursoSelect = document.querySelector("#curso_nome");
    const select = document.getElementById("curso_nome");
    const comboCurso1 = document.querySelector("#combo_curso_1");
    const comboCurso2 = document.querySelector("#combo_curso_2");
    const valor = document.querySelector("#curso_valor");
    const desconto = document.querySelector("#curso_desconto");
    const total = document.querySelector("#curso_total");
    const comboTextarea = document.querySelector("#combo_textarea");
    const modulos = document.querySelector("#curso_modulos");
    const duracao = document.querySelector("#curso_duracao");
    const parcelas = document.querySelector("#curso_parcelas");
    const vencimento = document.querySelector("#curso_vencimento");
    const fieldsetAluno = document.querySelector("#fieldset_aluno");
    const loadinContrato = document.querySelector("#loading_contrato");
    
    //Listeners
    form.addEventListener("submit", sendForm);
    btnRespAluno.addEventListener("input", checkboxRespAluno);
    btnCombo.addEventListener("input", inputComboCheckbox);
    cursoSelect.addEventListener("change", insertCursoInfo);
    comboCurso2.addEventListener("input", insertComboTextarea);
    valor.addEventListener("input", insertInputValorTotal);
    desconto.addEventListener("input", insertInputValorTotal);
    desconto.addEventListener("change", insertComboTextarea);
    
    //Masks
    VMasker(document.querySelector("#curso_valor")).maskMoney();
    VMasker(document.querySelector("#curso_desconto")).maskMoney();
    VMasker(document.querySelector("#resp_cep")).maskPattern("99999-999");
    VMasker(document.querySelector("#resp_cpf")).maskPattern("999.999.999-99");
    VMasker(document.querySelector("#resp_rg")).maskPattern("99.999.999-S");
    VMasker(document.querySelector("#aluno_rg")).maskPattern("99.999.999-S");
    VMasker(document.querySelector("#aluno_cep")).maskPattern("99999-999");
    
    function insertInputValue(value, target) {
      document.querySelector(target).value = value;
    }

    function insertInputDateValue(...) {
     ...
    }

    
    function replaceToNonBreakSpaceHifen(...) {
     ...
    }

   //and alot of other functions and function calls bellow....

Aucun commentaire:

Enregistrer un commentaire