Best practice con il codice di associazione del modulo jQuery in un'applicazione

Question

Abbiamo un'applicazione con una buona quantità di chiamate jQuery JSON al codice lato server.Per questo motivo disponiamo di una grande quantità di codice di associazione per analizzare le risposte e associare i valori appropriati al modulo.Questa è una domanda in due parti.

1. Qual è l'approccio consigliato per gestire un gran numero di moduli che contengono tutti dati diversi?In questo momento stiamo cercando di adottare un approccio strutturato per impostare una "classe" js per ogni pagina, con un init, wireClickEvents ecc.per cercare di rendere tutto conforme.

2. Esistono "migliori pratiche" con la creazione di codice jQuery ripetitivo o qualsiasi tipo di struttura consigliata oltre al semplice lancio di una serie di funzioni in un file js?

Answer 1

Non sono sicuro al 100% di quello che stai chiedendo, ma personalmente, e utilizzo MochiKit, creo "classi" JavaScript (o widget, se preferisci) per ogni struttura significativa dell'interfaccia utente lato client.Questi sanno, ovviamente, come riempirsi di dati.

Non so cos'altro ci sia da dire: scrivere il codice dell'interfaccia utente per il browser in JavaScript non è diverso dalla scrittura del codice dell'interfaccia utente per altri tipi di app, per quanto mi riguarda.Costruisci classi e istanziale secondo necessità, popolale con dati, chiedi loro di lanciare eventi, ecc.eccetera.

Sono sveglio la notte per questa cosa?:)

---

MODIFICARE:In altre parole, sì: fai quello che stai facendo, per la maggior parte.Vedo troppi hacker JavaScript alle prime armi scrivere un mucchio di funzioni scarsamente coese che non sembrano far parte di qualcosa di specifico oltre al fatto che sono tutte in un singolo file.Spero che abbia senso.

Answer 2

Probabilmente dovresti esaminare un framework simile knockout.js In questo modo puoi semplicemente aggiornare i tuoi modelli e i moduli si aggiorneranno automaticamente.

Answer 3

Penso che ci siano molteplici sfide per te.La prima domanda è come strutturare il codice JavaScript, ad es.come creare spazi dei nomi in modo da non combattere conflitti di nomi o dover nominare le tue funzioni come

form1validate
form1aftersubmit
form2validate
form2aftersubmit

Uno dei modelli collaudati per i moduli in Javascript consiste nell'utilizzare una funzione anonima per creare un nuovo ambito di denominazione.L'idea di base è racchiusa nel codice seguente

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

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

io penso questo voce del blog è una buona introduzione.

La seconda domanda che devi affrontare è come evitare tutte le ripetizioni nel codice JavaScript.Hai un paio di armi contro questo.

1. funzioni: sembra ovvio, ma spesso ci si dimentica di rifattorizzare il codice comune in funzioni in cui è possibile farlo.Nel tuo caso si tratterà di funzioni per copiare valori dalla risposta json nei moduli e cose del genere
2. funzione di ordine superiore - o funzioni come dati - o callback, come vengono spesso chiamate in Javascript.Queste sono le armi più potenti in Javascript.Nel caso della gestione di moduli e Ajax è possibile utilizzare il callback per evitare ripetizioni nel flusso di controllo dei moduli.

Vorrei costruire un esempio che mi viene in mente (usando jquery per convenienza)

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