Leggibilità delle funzioni di callback AJAX nidificate

Question

Aiutatemi a refactore questo codice Javascript. Esiste una grande forma per l'invio di messaggi programmati (data di invio, tipo di reccurence, data di scadenza / quantità, sistema di crediti - è necessario contare il costo totale del piano di invio programmato in fase di esecuzione). Sto scrivendo validatore Javascript per questo modulo.

Esiste un algoritmo di validazione 1) controlla se l'ora della data di invio non è nel momento passato 2) controlla se "fine per data" l'ora del campo è maggiore dell'ora della data del primo invio 3) convalidare il costo totale del piano di pianificazione

(Ci sono circa 6 passaggi, ma ne scrivo solo 3 - penso che basterà capire il problema)

" Salva piano pianificato " Il pulsante ha un listener javascript su " fai clic " evento. Questo ascoltatore chiama questa funzione:

ScheduledValidator.checkIfSendDateTimeIsNotInPast(params, form);

Ecco la sua dichiarazione:

ScheduledValidator.checkIfSendDateTimeIsNotInPast = function (params, form) {
    var conn = new Ext.data.Connection();

    conn.request({
        url: CONST.BASE_URL + 'url',
        params: params,
        callback: function (options, success, response) {
            response = Ext.util.JSON.decode(response.responseText);
            if (response.success == false) {
                // display error messages
            } else { 
                ScheduledValidator.checkIfEndDateIsGreaterThatSendDate(params, form);
            }
        }
    });
}

Abbiamo una richiesta nidificata in seguito:

ScheduledValidator.checkIfEndDateIsGreaterThatSendDate = function (params, form) {
var conn = new Ext.data.Connection();

conn.request({
    url: CONST.BASE_URL + 'url2',
    params: params,
    messageForm: form,
    callback: function (options, success, response) {
        response = Ext.util.JSON.decode(response.responseText);
        if (response.success == false) {
            // display error messages
        } else {
            ScheduledValidator.validateTotalCost(params, form);
        }
    }
});
}

e un altro qui:

ScheduledValidator.validateTotalCost = function (params, form) {
...

In questo approccio non mi piace il fatto che sia abbastanza difficile capire l'algoritmo a prima vista. Forse non va bene fare molte (circa 6) query AJAX nidificate per la convalida di un singolo modulo? Forse dovrebbe essere unito alla singola richiesta e successivamente faremo tutte le attività di validazione sul lato server? Come devo refactificare questo codice?

Answer 1

Ti suggerisco di rimpicciolire e valutare come funzionano il processo del modulo e l'esperienza utente prima di refactoring il tuo codice.

Ad esempio, è necessario fornire un feedback all'utente immediatamente quando si inseriscono le date? Può aspettare fino a quando non ha completato la compilazione del modulo? In tal caso, puoi semplicemente utilizzare un normale modulo post, convalidare l'invio sul lato server e restituire feedback.

In caso contrario, e l'esperienza richiede un feedback immediato, potresti voler esaminare la creazione di un wrapper generico intorno all'implementazione per gestire la convalida del modulo. Questo può essere fatto manualmente o puoi cercare su Google meccanismi di convalida dei moduli che ti consentono di definire URL e callback specifici, in base alle tue esigenze.

Una terza opzione potrebbe essere quella di eseguire la convalida lato client senza contattare il server. Determina se la tua logica può essere eseguita in Javascript (molto probabilmente, se si tratta di calcoli della data, questo non dovrebbe essere troppo difficile) e prova ad aggiungere un livello che lo fa per te, quindi non è necessario contattare il server nel primo posto. Bonus: a seconda della velocità con cui il tuo codice lato server risponde, questo potrebbe effettivamente migliorare l'esperienza dell'utente (tuttavia, ricorda che la convalida lato server è ancora un must!).

Dal caso d'uso di esempio che hai fornito nella tua domanda, sembra che si applichi il mio precedente suggerimento, vale a dire che non è del tutto necessario essere così immediato nel tuo feedback sulla corretta compilazione del modulo. Se la mia comprensione della tua situazione è corretta, consiglierei di avviare il processo di refactoring rimuovendo le chiamate AJAX e facendolo funzionare come un normale modulo, quindi aggiungendo una convalida solo sul lato client una volta che funziona.