Metodo migliore per aggiungere molte opzioni in una funzione

Naviga le tue risposte
2

Ho una funzione JS che prende i dati JSON e crea una tabella HTML. Mentre il mio progetto si sviluppava, avevo bisogno di una tabella specifica da creare con un pulsante - così ho aggiunto un'opzione alla funzione e un'appropriata dichiarazione if . Poi ho deciso che volevo aggiungere un'opzione per il colore della tabella: un'altra opzione; un'altra dichiarazione if .

Infine, desidero ora aggiungere un'altra opzione per colorare le righe a seconda del contenuto del parametro in ogni riga di dati. Ma questo è SOLO per un set specifico di dati JSON che invierò, quindi ora devo aggiungere un'altra opzione e un'istruzione if molto specifica per catturare questo tipo di tabella.

Cosa mi piacerebbe sapere: c'è un modo migliore per farlo? La maggior parte del codice per creare la tabella è generica quindi non si desidera creare nuove funzioni per ogni caso d'uso. Ma ora la funzione sta diventando piena di opzioni e if s e non è sicuro se questa sia considerata una cattiva pratica.

Modifica: dopo alcune ricerche ulteriori, penso di chiedere informazioni sull'overload delle best practice. Ma, da quello che capisco, l'overloading in JS riguarda il fatto di avere un sacco di if s o switch...case che essenzialmente non sono sicuro del modo migliore di fare o se è addirittura appropriato.

Qualche codice con domande nei commenti (modificato per tenerlo breve): 

    function CreateTableFromJSON(jData, colour, addBtnToCol) {

table.className = "ui collapsing striped table unstackable " + colour; // Adds the colour option.


// Add JSON data to the table as rows.
for (var i = 0; i < jData.length; i++) {
    var tr = tbody.insertRow(-1);

    for (var j = 0; j < col.length; j++) {
        var tabCell = tr.insertCell(-1);

// This 'option' adds a button if the column is a particular value
// Is better practice to keep the main function (create table) generic and then call another (sub?) function to add the button to the created table?

        if(col[j] === addBtnToCol){
            var btnAdd = document.createElement('button');
            btnAdd.type = "button";
            tabCell.appendChild(btnAdd);
        }
        else
            tabCell.innerHTML = jData[i][col[j]];
    }
}
}
    
posta SimpleOne 25.04.2018 - 09:02
fonte

2 risposte

4

Aggiunta alla risposta di Thomas Junk: una volta che i tuoi parametri sono gestiti un po 'meglio, puoi dividere le tue funzioni in questo modo: 

function makeMyTableThing(data, options) {

    var workup = generateBaseTable(data);

    if (options.option1 === 1) {
        workup = addOption1(workup, data);
    }

    if (options.option2 === 2) {
        workup = addOption2(workup, data);
    }

    return workup;  
}

function generateBaseTable(data) {
    return stuff;
}

function addOption1(workup, data) {
    return stuff;
}

function addOption2(workup, data) {
    return stuff;
}

Questo ti dà una "funzione di entrata" la cui sola responsabilità è di coreografare il resto delle funzioni a seconda della richiesta (ovviamente il tuo flusso di lavoro potrebbe sembrare molto diverso, ma a scopo dimostrativo generale. ..)

Prendendo un po 'di più, si può racchiudere questo in qualcosa che nasconde l'implementazione utilizzando un oggetto che restituisce la funzione di ingresso principale, o classi, o un modulo, o un numero qualsiasi di altri metodi.

    
risposta data 25.04.2018 - 11:32
fonte
2

Da quello che scrivi, il tuo codice inizialmente sembrava tipo 

function(data, withButton){ 
    //logic
}

E col tempo ha qualcosa di simile 

function(data, withButton, option2, option3 /*and so on*/){ 
    //logic
}

Potresti migliorare, se ti rifatti il codice per prendere solo due parametri: 

function(data, options){ 
    //logic
}

E con ES6 hai il simpatico incarico descrittivo , che ti aiuta a estrarre le opzioni

{option1, option2, option3} = {option1: "1",option2: "2", option3: "3"}

Questo dovrebbe migliorare il tuo codice.

Inoltre, se noti che la tua funzione diventa difficile da mantenere, perché non dividerla in più funzioni, che coprono solo una parte di ciò che vuoi fare?

    
risposta data 25.04.2018 - 10:01
fonte

Leggi altre domande sui tag

come ripristinare l'arresto di alimentazione mentre si aggiorna automaticamente la mia applicazione Come impedire che gli overflow dello stack si verifichino in questa struttura di comando con callback?