Lisibilité des fonctions de rappel AJAX imbriquées

Question

Aidez-moi à refacturer ce code Javascript. Il y a une grande forme pour l'envoi programmé de message (date d'envoi, type de reccurence, date de fin/capacité, système de crédits - besoin de compter le coût total du plan d'envoi planifié dans l'exécution). J'écris un validateur de Javascript pour cette forme.

Il y a un algorithme de validation 1) vérifier si le temps de la date envoyer est pas dans un moment passé 2) vérifier si le temps de champ « fin par date » est supérieure à la première date d'envoi du temps 3) valider le coût total du plan de calendrier

(il environ 6 étapes, mais je viens d'écrire ici 3 d'entre eux - je pense que ce sera suffisant pour saisir le problème)

bouton « Enregistrer le plan prévu » a un javascript auditeur sur l'événement « clic ». Cet écouteur appelle cette fonction:

ScheduledValidator.checkIfSendDateTimeIsNotInPast(params, form); 

est-il ici sa déclaration:

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); 
      } 
     } 
    }); 
} 

Nous avons demande emboîtés plus tard:

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); 
     } 
    } 
}); 
} 

et un plus ici:

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

Je n'aime pas approche de chapeau, qu'il est assez difficile de comprendre l'algorithme à première vue. Peut-être que ce n'est pas bon, de faire beaucoup (environ 6) de requêtes AJAX imbriquées pour la validation de formulaire unique? Peut-être qu'il devrait être fusionné à la demande unique et après que nous ferons toutes les activités de validation sur le côté serveur? Comment refactoriser ce code?

Answer 1

Je vous suggère effectuer un zoom arrière et d'évaluer la façon dont le processus de forme et l'expérience utilisateur fonctionne avant de refactorisation votre code.

Par exemple, est-il nécessaire de donner un retour à l'utilisateur immédiatement lors de la saisie des dates? Peut-elle attendre qu'elle ait rempli le formulaire? Si tel est le cas, vous pouvez simplement utiliser un post de formulaire ordinaire, valider le serveur de soumission et renvoyer des commentaires.

Dans le cas contraire, et l'expérience exige une rétroaction immédiate, vous pouvez regarder dans la création d'un emballage générique autour de votre mise en œuvre pour gérer la validation du formulaire. Cela peut être fait manuellement, ou vous pouvez chercher sur Google des mécanismes de validation de formulaire qui vous permettent de définir des URL et des rappels spécifiques, selon vos besoins.

Une troisième option pourrait être de faire le côté client de validation sans contacter le serveur. Déterminez si votre logique peut être faite en Javascript (le plus probable, si cela implique des calculs de date, cela ne devrait pas être trop dur) et essayez d'ajouter une couche qui fait cela pour vous afin que vous n'ayez pas besoin de contacter le serveur. première place. Bonus: en fonction de la rapidité avec laquelle votre serveur réagit, cela pourrait améliorer l'expérience de l'utilisateur (cependant, n'oubliez pas que la validation côté serveur est toujours un must!). De l'exemple de cas d'utilisation que vous avez donné à votre question, il semble que ma suggestion précédente s'applique, à savoir qu'il n'est pas absolument nécessaire d'être aussi immédiat dans vos commentaires pour savoir si le formulaire est rempli correctement. Si ma compréhension de votre situation est correcte, je vous conseille de commencer le processus de refactoring en supprimant les appels AJAX et en le faisant fonctionner comme un formulaire normal, puis en ajoutant la validation côté client une fois que cela fonctionne.