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