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 de enlace para analizar las respuestas y enlazar los valores apropiados al formulario. Esta es una pregunta de dos partes.

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

2. ¿Hay alguna "mejores prácticas" con la creación de código jQuery repetitivo o cualquier otro tipo de estructura recomendada además de simplemente lanzar un conjunto de funciones en un archivo js?

Answer 1

No es 100% seguro de ejemplo lo que están pidiendo, pero personalmente, y lo uso MochiKit, puedo crear "clases" de JavaScript (o widgets, si lo prefiere) para cada estructura significativa interfaz de usuario del lado del cliente. Estos saben, por supuesto, cómo poblarse con datos.

No sé qué más hay para decir, escribir código de IU para el navegador en JavaScript no es diferente de escribir el código de IU para otros tipos de aplicaciones, en lo que a mí respecta. Cree clases y ejemplínelas según sea necesario, rellene con datos, haga que emitan eventos, etc. etc.

¿Estoy despierto en la noche con esto? :)

---

EDITAR: En otras palabras, sí, haz lo que estás haciendo, en su mayor parte. Veo demasiados hackers de JavaScript novatos que escriben un conjunto de funciones poco cohesivas que no parecen ser parte de nada más específico que no sean todas en un solo archivo. Espero que tenga sentido.

Answer 2

Creo que hay muchos desafíos para usted. La primera pregunta es cómo estructurar el código Javascript, es decir, cómo construir espacios de nombres para que no luchar contra las colisiones de nombres o tienen que nombrar sus funciones como

form1validate 
form1aftersubmit 
form2validate 
form2aftersubmit 

Uno de los patrones probados para los módulos en Javascript es utilizar una función anónima para construir un nuevo ámbito de denominación. La idea básica es Shon en el siguiente código

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

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

Creo que este blog entry es una buena introducción.

La segunda pregunta que enfrenta es cómo evitar toda la repetición en el código de javascript. Tienes un par de armas en contra de esto.

1. funciones - esto se hace obvio, pero a menudo se olvida volver a configurar el código común en las funciones donde se puede hacer. En su caso, esto servirá para copiar los 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, ya que a menudo se llaman en javascript. Estas son las armas más poderosas en javascript. En caso de manejo de formularios y ajax, puede utilizar la devolución de llamada para evitar la repetición en el flujo de control de sus formularios.

Déjame construyo un ejemplo de la cabeza (usando jQuery para convinence)

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

Answer 3

Probablemente debe buscar en un marco como knockout.js De esta manera usted puede actualizar sus modelos y las formas se actualizará automáticamente.