1
resposta

Refatoração - Criar Table Row

Minha refatoração referente as funções do formulário após esta aula, adicionei alguns laços de iterações percorrendo alguns objetos para evitar código desnecessário, com cada função possuindo uma única responsabilidade e até mesmo na função criarPacienteTableRow está recebendo outras funções contendo campos da Table Row como Table Cells ou Table Data, e ainda uma função para adicionar Table Cells na Table Row. Na minha visão achei bem legível, pois os nomes das funções indicam como o JavaScript está interagindo com o HTML e com quais elementos.

Enfim, fica aqui a dica para quem quiser ideias de separação de responsibilidade:

table

var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click", function(event) {
    event.preventDefault();

    const form = document.querySelector("#form-adiciona");

    let pacienteValues = pegarValoresDoInput(form);
    pacienteTableRow = criarPacienteTableRow(pacienteValues);
    adicionarTableRowEmTableBody(pacienteTableRow);

    form.reset();
});

function pegarValoresDoInput(form) {
    let paciente = {
        nome: form.nome.value,
        peso: form.peso.value,
        altura: form.altura.value,
        gordura: form.gordura.value,
        imc: calculaIMC(this.peso.value, this.altura.value)
    }
    return paciente;
}

function criarPacienteTableRow(pacienteValues) {
    let pacienteTableRow = document.createElement("tr");
    pacienteTableRow.classList.add("paciente");
    var pacienteTableCells = criarPacienteTableCells();
    atribuirValoresAsTableCells(pacienteTableCells, pacienteValues);
    adicionarTableCellsNaTableRow(pacienteTableRow, pacienteTableCells);
    return pacienteTableRow;
}

function criarPacienteTableCells() { // Ou table data
    pacienteTableCells = {
        nome: document.createElement("td"),
        peso: document.createElement("td"),
        altura: document.createElement("td"),
        gordura: document.createElement("td"),
        imc: document.createElement("td")
    }
    return pacienteTableCells;
}

classArray = [
    'info-nome',
    'info-peso',
    'info-altura',
    'info-gordura',
    'info-imc'
]

function atribuirValoresAsTableCells(objetoTableCells, pacienteValues) {
    let i = 0;
    for (propriedade in pacienteValues) {
        objetoTableCells[propriedade].textContent = pacienteValues[propriedade];
        objetoTableCells[propriedade].classList.add(classArray[i]);
        i++;
    }
}

function adicionarTableCellsNaTableRow(pacienteTableRow, pacienteTableCells) { 
    for (propriedade in pacienteTableCells) {
        pacienteTableRow.appendChild(pacienteTableCells[propriedade]);
    }
}

function adicionarTableRowEmTableBody(TableRow) { // Ao corpo da tabela de pacientes
    let tableBody = document.querySelector("#tabela-pacientes");
    tableBody.appendChild(TableRow);
}
1 resposta

Olá, Gabriel, tudo bem?

Que bacana compartilhar seu código! Está bastante legível mesmo, parabéns!

É muito legal esse exercício de refatoração, criar funções para diferentes funcionalidades. É importante refletir sobre como seu código estava antes e depois, comparar as diferentes abordagens, e até pensar se alguma decisão vale a pena ou não, por conta de tempo gasto, manutenção de código, etc.

Refletir sobre todos esses fatores estimula nosso senso crítico. Também não deixe de continuar fazendo nossos cursos para conhecer novas abordagens e comparar com as suas próprias.

Abraços e bons estudos :)