Mejores prácticas con código de enlace de formulario jQuery en una aplicación

Question

Tenemos una aplicación con una buena cantidad de llamadas jQuery JSON al código del lado del servidor.Debido a esto, tenemos una gran cantidad de código vinculante para analizar respuestas y vincular los valores apropiados al formulario.Esta es una pregunta de dos partes.

1. ¿Cuál es el enfoque recomendado para tratar con una gran cantidad de formularios que tienen datos diferentes?En este momento estamos intentando adoptar un enfoque estructurado al configurar una "clase" js para cada página, con un init, wireClickEvents, etc.para intentar que todo esté conforme.

2. ¿Existe alguna "mejor práctica" para crear código jQuery repetitivo o cualquier tipo de estructura recomendada además de simplemente incluir un montón de funciones en un archivo js?

Answer 1

No estoy 100% seguro de lo que estás preguntando, pero personalmente, y uso MochiKit, creo "clases" de JavaScript (o widgets, si lo prefieres) para cada estructura importante de UI del lado del cliente.Estos saben, por supuesto, cómo poblarse de datos.

No sé qué más hay que decir: escribir código UI para el navegador en JavaScript no es diferente a escribir código UI para otros tipos de aplicaciones, en lo que a mí respecta.Cree clases y cree instancias de ellas según sea necesario, complételas con datos, haga que lancen eventos, etc.etc.

¿Estoy despierto por la noche con esto?:)

---

EDITAR:En otras palabras, sí: haz lo que estás haciendo, en su mayor parte.Veo que muchos hackers novatos de JavaScript escriben un montón de funciones poco coherentes que no parecen ser parte de nada específico, excepto que están todas en un solo archivo.Espero que tenga sentido.

Answer 2

Probablemente deberías buscar en un marco como knockout.js De esta manera puedes actualizar tus modelos y los formularios se actualizarán automáticamente.

Answer 3

Creo que hay múltiples desafíos para ti.La primera pregunta es cómo estructurar el código javascript, es decircómo crear espacios de nombres para que no tengas que luchar contra conflictos de nombres o tener que nombrar tus funciones como

form1validate
form1aftersubmit
form2validate
form2aftersubmit

Uno de los patrones probados para módulos en javascript es utilizar una función anónima para crear un nuevo ámbito de nomenclatura.La idea básica se muestra en el siguiente código.

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

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

pienso esto Entrada de blog es una buena introducción.

La segunda pregunta que enfrenta es cómo evitar todas las repeticiones en el código javascript.Tienes un par de armas contra esto.

1. funciones: esto parece obvio, pero a menudo se olvida refactorizar el código común en funciones donde se pueda hacer.En su caso, estas serán funciones para copiar valores de la respuesta json en los formularios y así
2. función de orden superior, o funciones como datos, o devolución de llamada, como a menudo se les llama en javascript.Estas son el arma más poderosa en javascript.En el caso del manejo de formularios y ajax, puede utilizar la devolución de llamada para evitar repeticiones en el flujo de control de sus formularios.

Permítanme construir un ejemplo fuera de mi cabeza (usando jquery para convencerse)

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