Meilleures pratiques avec le code de liaison de formulaire jQuery dans une application

Question

Nous avons une application avec une bonne quantité d'appels jQuery JSON au code côté serveur.Pour cette raison, nous disposons d’une grande quantité de code de liaison pour analyser les réponses et lier les valeurs appropriées au formulaire.C'est une question en deux parties.

1. Quelle est l'approche recommandée pour traiter un grand nombre de formulaires contenant tous des données différentes.À l'heure actuelle, nous essayons d'adopter une approche structurée en mettant en place une "classe" js pour chaque page, avec un init, wireClickEvents etc.pour essayer de tout rendre conforme.

2. Existe-t-il des « meilleures pratiques » pour la création de code jQuery répétitif ou tout type de structure recommandée autre que le simple lancement d'un tas de fonctions dans un fichier js ?

Answer 1

Je ne suis pas sûr à 100% de ce que vous demandez, mais personnellement, et j'utilise MochiKit, je crée des "classes" JavaScript (ou des widgets, si vous préférez) pour chaque structure d'interface utilisateur importante côté client.Ceux-ci savent bien sûr se nourrir de données.

Je ne sais pas ce qu'il y a à dire de plus - écrire du code d'interface utilisateur pour le navigateur en JavaScript n'est pas différent de l'écriture de code d'interface utilisateur pour d'autres types d'applications, en ce qui me concerne.Créez des classes et instanciez-les selon vos besoins, remplissez-les de données, demandez-leur de lancer des événements, etc.etc.

Est-ce que je veille la nuit à ce sujet ?:)

---

MODIFIER:En d’autres termes, oui – faites ce que vous faites, pour l’essentiel.Je vois trop de pirates JavaScript novices écrire un tas de fonctions peu cohérentes qui ne semblent pas faire partie de quelque chose de spécifique, sauf qu'elles sont toutes dans un seul fichier.J'espère que cela a du sens.

Answer 2

Vous devriez probablement vous pencher sur un cadre comme knockout.js De cette façon, vous pouvez simplement mettre à jour vos modèles et les formulaires seront mis à jour automatiquement.

Answer 3

Je pense que les défis sont multiples pour vous.La première question est de savoir comment structurer le code javascript, c'est-à-direcomment créer des espaces de noms afin de ne pas lutter contre les conflits de noms ou de devoir nommer vos fonctions comme

form1validate
form1aftersubmit
form2validate
form2aftersubmit

L'un des modèles éprouvés pour les modules en javascript consiste à utiliser une fonction anonyme pour créer une nouvelle portée de dénomination.L'idée de base est présentée dans le code suivant

(function() {
  var foo = 1;
})();

(function() {
  if(foo == 1) alert("namespace separation failed!")
})();

je pense que ce entrée de blog est une bonne introduction.

La deuxième question à laquelle vous êtes confronté est de savoir comment éviter toute répétition dans le code javascript.Vous disposez de plusieurs armes contre cela.

1. fonctions - cela semble évident, mais on oublie souvent de refactoriser le code commun en fonctions là où cela peut être fait.Dans votre cas, ce seront des fonctions pour copier les valeurs de la réponse json dans les formulaires et comme ça
2. fonction d'ordre supérieur - ou fonctions comme données - ou rappel, comme on les appelle souvent en javascript.Ce sont l’arme la plus puissante du javascript.Dans le cas de la gestion des formulaires et d'Ajax, vous pouvez utiliser le rappel pour éviter les répétitions dans le flux de contrôle de vos formulaires.

Permettez-moi de construire un exemple de ma tête (en utilisant jquery pour plus de conviction)

// this is a validator for one form
   var form1validator = function() {
     if($("input[name=name]",this).attr("value").length < 1 &&
        $("input[name=organisation]",this).attr("value").length < 1)
       return "Either name or organisation required" 
   }

   // and this for a second form
   var form2validator = function() {
     if($("input[name=age]",this).attr("value").length < 21
       return "Age of 21 required"
   }

   // and a function to display a validation result
   var displayResult = function(r) {
     $(this).prepend("<span></span>").text(r);
   }

   // we use them as higher order functions like that

   $("#form1").onSubmit(validator(form1validator, displayResult, function() {
     //on submit
     ...send some xhr request or like that
   });

   $("#form2").onSubmit(validator(form2validator, displayResult, function() {
     this.submit() // simply submit form
   });

   $("#form1b").onSubmit(validator(form1validator, function(r) {
     alert("There was an validation error " + r);
   }, function() {
     //on submit
     ...send some xhr request or like that
   });


   // the validator function itself would be defined as

   function validator(formValidator, displayResult, onSubmit) {
     var r = formValidator.apply(this)
     if(typeof(r) === 'undefined')
       onSubmit(this)
     else
       displayResult(r)
   }