Melhores práticas com código de vinculação de formulário jQuery em um aplicativo

Question

Temos um aplicativo com uma boa quantidade de chamadas jQuery JSON para código do lado do servidor.Por causa disso, temos uma grande quantidade de código de ligação para analisar as respostas e vincular os valores apropriados ao formulário.Esta é uma questão de duas partes.

1. Qual é a abordagem recomendada para lidar com um grande número de formulários, todos com dados diferentes.No momento, estamos tentando adotar uma abordagem estruturada na criação de uma "classe" js para cada página, com um init, wireClickEvents etc.para tentar ter tudo conforme.

2. Existe alguma "prática recomendada" para a criação de código jQuery repetitivo ou qualquer tipo de estrutura recomendada além de apenas lançar um monte de funções em um arquivo js?

Answer 1

Não tenho 100% de certeza do que você está perguntando, mas pessoalmente, e eu uso o MochiKit, crio "classes" JavaScript (ou widgets, se preferir) para cada estrutura significativa de UI do lado do cliente.Estes sabem, é claro, como preencher-se com dados.

Não sei o que mais há a dizer - escrever código de UI para o navegador em JavaScript não é diferente de escrever código de UI para outros tipos de aplicativos, no que me diz respeito.Crie classes e instancie-as conforme necessário, preencha-as com dados, faça com que lancem eventos, etc.etc.

Estou acordado durante a noite com isso?:)

---

EDITAR:Em outras palavras, sim – faça o que você está fazendo, na maior parte.Vejo muitos hackers novatos em JavaScript escreverem um monte de funções pouco coesas que não parecem fazer parte de nada específico, a não ser que estejam todas em um único arquivo.Espero que isso faça sentido.

Answer 2

Você provavelmente deveria procurar uma estrutura como nocaute.js Desta forma você pode simplesmente atualizar seus modelos e os formulários serão atualizados automaticamente.

Answer 3

Acho que existem vários desafios para você.A primeira questão é como estruturar o código javascript, ou seja,como construir namespaces para que você não lute contra conflitos de nomes ou tenha que nomear suas funções como

form1validate
form1aftersubmit
form2validate
form2aftersubmit

Um dos padrões comprovados para módulos em javascript é usar uma função anônima para construir um novo escopo de nomenclatura.A ideia básica é mostrada no código a seguir

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

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

eu acho isto entrada do blog é uma boa introdução.

A segunda questão que você enfrenta é como evitar todas as repetições no código javascript.Você tem algumas armas contra isso.

1. funções - isso parece óbvio, mas muitas vezes é esquecido de refatorar o código comum em funções onde isso possa ser feito.No seu caso, serão funções para copiar valores da resposta json para os formulários e assim por diante
2. função de ordem superior - ou funções como dados - ou retorno de chamada, como são frequentemente chamadas em javascript.Estas são as armas mais poderosas em javascript.No caso de manipulação de formulários e ajax você pode usar callback para evitar repetição no fluxo de controle de seus formulários.

Deixe-me construir um exemplo da minha cabeça (usando jquery por conveniência)

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