Best Practices mit jQuery-Formularbindungscode in einer Anwendung

Question

Wir haben eine Anwendung mit einer guten Anzahl von jQuery-JSON-Aufrufen an serverseitigen Code.Aus diesem Grund verfügen wir über eine große Menge an Bindungscode, um Antworten zu analysieren und die entsprechenden Werte an das Formular zu binden.Dies ist eine zweiteilige Frage.

1. Welche Vorgehensweise wird für den Umgang mit einer großen Anzahl von Formularen empfohlen, die alle unterschiedliche Daten enthalten?Im Moment versuchen wir, einen strukturierten Ansatz beim Einrichten einer js-„Klasse“ für jede Seite zu verfolgen, mit einem Init, WireClickEvents usw.versuchen, alles in Einklang zu bringen.

2. Gibt es „Best Practices“ beim Erstellen von sich wiederholendem jQuery-Code oder einer anderen empfohlenen Struktur, als nur eine Reihe von Funktionen in eine js-Datei zu werfen?

Answer 1

Ich bin mir nicht hundertprozentig sicher, was Sie fragen, aber persönlich, und ich verwende MochiKit, erstelle ich JavaScript-„Klassen“ (oder Widgets, wenn Sie es vorziehen) für jede wichtige clientseitige UI-Struktur.Diese wissen natürlich, wie sie sich mit Daten bevölkern können.

Ich weiß nicht, was es noch zu sagen gibt – das Schreiben von UI-Code für den Browser in JavaScript unterscheidet sich meiner Meinung nach nicht vom Schreiben von UI-Code für andere Arten von Apps.Erstellen Sie Klassen und instanziieren Sie sie nach Bedarf, füllen Sie sie mit Daten, lassen Sie sie Ereignisse auslösen usw.usw.

Bin ich nachts wach?:) :)

---

BEARBEITEN:Mit anderen Worten: Ja – tun Sie größtenteils, was Sie tun.Ich sehe zu viele unerfahrene JavaScript-Hacker, die einen Haufen schlecht zusammenhängender Funktionen schreiben, die nicht Teil von etwas Bestimmtem zu sein scheinen, außer dass sie alle in einer einzigen Datei sind.Ich hoffe, das macht Sinn.

Answer 2

Sie sollten sich wahrscheinlich ein Framework wie knockout.js Auf diese Weise können Sie einfach Ihre Modelle aktualisieren und die Formulare werden automatisch aktualisiert.

Answer 3

Ich denke, es gibt mehrere Herausforderungen für Sie.Die erste Frage ist, wie man Javascript-Code strukturiert, d. h.wie man Namespaces erstellt, damit es nicht zu Namenskonflikten kommt oder Sie Ihre Funktionen so benennen müssen

form1validate
form1aftersubmit
form2validate
form2aftersubmit

Eines der bewährten Muster für Module in Javascript ist die Verwendung einer anonymen Funktion zum Aufbau eines neuen Benennungsbereichs.Die Grundidee wird im folgenden Code veranschaulicht

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

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

ich denke das Blog-Eintrag ist eine gute Einführung.

Die zweite Frage, mit der Sie konfrontiert sind, ist, wie Sie die Wiederholungen im Javascript-Code vermeiden können.Dagegen haben Sie ein paar Waffen.

1. Funktionen – das scheint offensichtlich, aber es wird oft vergessen, allgemeinen Code in Funktionen umzuwandeln, wo dies möglich ist.In Ihrem Fall handelt es sich dabei um Funktionen zum Kopieren von Werten aus der JSON-Antwort in die Formulare und dergleichen
2. Funktion höherer Ordnung – oder Funktionen als Daten – oder Callback, wie sie in Javascript oft genannt werden.Dies sind die mächtigsten Waffen in Javascript.Im Falle der Formular- und Ajax-Verarbeitung können Sie Rückrufe verwenden, um Wiederholungen im Kontrollfluss Ihrer Formulare zu vermeiden.

Lassen Sie mich ein Beispiel aus meinem Kopf konstruieren (mit JQuery zur Überzeugung)

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