Backbone.js und jQuery

Ihr Anfangssatz war eigentlich eine sehr gute Aussage über die Unterschiede zwischen Backbone.js und jQuery, also lassen Sie es uns ein bisschen auspacken.

Zum einen stehen die beiden Bibliotheken überhaupt nicht im Wettbewerb - sie sind kostenlos.

Als Beispiel hier sind einige Dinge, die ich mit jQuery machen würde:

• Animierte Diashows
• Verbesserungen der Formularsteuerung, z. B. "Spinner" im iOS-Stil
• Sichtbarkeit von Elementen basierend auf einem Klassennamen umschalten

Und einige Dinge, die ich in Backbone.js machen könnte:

• Erstellen Sie ein Fotoalbum, in dem der Benutzer auf ein Miniaturbild klickt und eine größere Version des Fotos sowie einige Daten wie die verwendete Kamera, den Standort und den Namen des Fotografen anzeigen kann
• Erstellen Sie einen Master/Detail-Seitentyp, der ein Datenraster darstellt und es dem Benutzer ermöglicht, auf einzelne Elemente zu klicken und diese in einem Formular zu aktualisieren.

jQuery zeichnet sich auf Mikroebene durch die Auswahl von Seitenelementen aus, wodurch die Unterschiede bei der Verarbeitung von Ereignissen durch Browser ausgeglichen werden.

Backbone.js ist ein größeres Bild. Es hilft Ihnen beim Verwalten von Daten und Anwendungslogik. Im obigen Beispiel für ein Fotoalbum bietet Backbone mehrere nützliche Strukturen: Sie müssen alle Daten zu Fotos (ein Modell), eine Liste aller Fotos im Album (eine Sammlung) und irgendwo platzieren Logik, die festlegt, was passiert, wenn ein Benutzer auf ein Miniaturbild (die Ansicht) klickt. Dies sind die Hauptelemente eines Backbone-Steuerelements oder einer Backbone-Anwendung.

Backbone.js profitiert jedoch von jQuery oder ähnlichem, um die Ergebnisse der Daten und der Logik Ihrer Anwendung in das DOM zu übertragen. Es ist beispielsweise üblich, jQuery zu verwenden, um das Element auf der Seite auszuwählen, das als Container für Ihre Backbone-App dient. Es ist auch üblich, jQueries $(function () {}); zu verwenden, um die Teile Ihres Backbone-Steuerelements zu starten. Möglicherweise würden Sie auch mit jQuery Fehlermeldungen zur Überprüfung von Formularfeldern anzeigen.

Sie können in jQuery sicherlich große, komplexe Benutzeroberflächen erstellen. Wir haben ein paar in der App, die ich bei der Arbeit pflege. Es ist jedoch schwierig, mit ihnen zu arbeiten, da jQuery nicht dafür ausgelegt ist, einer Anwendung Struktur zu verleihen. Insbesondere ist die API von jQuery, die auf der Auswahl von Elementgruppen und der Übergabe von Rückruffunktionen zur Bearbeitung dieser Elemente basiert, kein gutes Muster für die Verwendung in großen, komplexen Steuerelementen oder Anwendungen. Sie haben am Ende eine Menge verschachtelter Funktionen und es ist sehr schwer zu sehen, was los ist.

Momentan überarbeite ich eines dieser Steuerelemente in Backbone.js. Als letztes Beispiel folgt eine kurze Zusammenfassung, wie sich mein Denkprozess unterscheidet, wenn ich in beiden verschiedenen Bibliotheken an demselben Steuerelement arbeite.

In jQuery mache ich mir Sorgen um:

• Benutze ich den richtigen Selektor, um die gewünschte Gruppe von li Elementen zu erfassen?
• Muss ich diese Werteliste erneut ausfüllen, wenn dieser Ajax-Aufruf abgeschlossen ist?
• Wie kann ich diese Array-Werte wieder in die input -Elemente auf der Seite einfügen?

In Backbone konzentriere ich mich mehr auf:

• Was ist die richtige Logik, um diesen Satz von Eigenschaften für mein Modellelement zu überprüfen?
• Wenn der Benutzer auf die Schaltfläche Hinzufügen klickt, sollte ich der Sammlung sofort ein neues Element hinzufügen oder warten, bis alle Daten eingegeben wurden und es "gültig" ist?
• Wie soll ein Objekt in meiner Sammlung reagieren, wenn das Objekt unmittelbar vor oder nach dem Löschen gelöscht wird?

jQuery kümmert sich um die kleinsten Details und Backbone ist anspruchsvoller.

Beachten Sie abschließend, dass ich bei der Diskussion der Beispiele für Backbone.j die Wörter "control" und "app" verwendet habe. Es ist nicht wahr, dass Backbone.js nur für einseitige Apps gedacht ist. Es ist jedoch richtig, dass Backbone.js gut zum Erstellen komplexer Anwendungen geeignet ist, die Daten manipulieren und viel Logik verarbeiten. Es wäre albern, es für kleine UI-Elemente zu verwenden - die zusätzliche Struktur, die es auferlegt, wird nicht benötigt.

pdate: Ja, bei der Ausgabe mehrerer Seiten bietet Backbone einen leistungsstarken Mechanismus zum Speichern Ihrer Daten. Jedes Modell hat eine save -Methode, die einen AJAX) - Aufruf ausführt, um die Änderungen auf dem Server zu speichern. Solange Sie Ihre Daten speichern, können Sie eine haben Mehrseitige App. Es ist ein sehr flexibles Modell, und so werden wir wahrscheinlich Backbone bei der Arbeit einsetzen. Ich würde gerne eine einseitige App erstellen, aber wir haben 10 Jahre Arbeit in unserer bestehenden mehrseitigen Anwendung Wir möchten einige unserer intensiveren UI-Komponenten in Backbone neu erstellen und dann die Änderungen auf dem Server synchronisieren, bevor der Benutzer auf eine andere Seite wechselt.

Ich habe noch nie von Leuten gehört, die backbone.js auf mehreren Seiten verwenden. Es ist fast immer eine Art Single-Page-App.

Die einzelne Seite kann viele verschiedene Modelle, Ansichten und Status haben und zu einer vollständigen, leistungsstarken App führen.

Wenn Sie bereits ein serverseitiges Template-/View-Rendering in Java haben, ist backbone.js NICHT für Sie. Um backbone.js optimal zu nutzen, müssen Sie einen Teil dieses Codes in verschieben oder duplizieren das Frontend Javascript.

Wenn Sie keine App für eine einzelne Seite erstellen möchten (dies bedeutet nur, dass die Seite nicht aktualisiert oder geändert wird, die URL sich jedoch dennoch ändern kann und für den Benutzer mehrseitig aussehen kann), können Sie Ihre gesamte MVC eingeschaltet lassen der Server und Sie haben keine Notwendigkeit für Backbone.

Bearbeiten:

Das Backbone verschiebt einige der MVC-Elemente, die normalerweise auf dem Server verarbeitet werden, und verschiebt sie auf den Client. Für viele bedeutet dies, den Server zu vergessen und Ihre App nur als eine einzige Javascript-App zu schreiben. Der Server wird nur eine Quelle für JSON/REST-Daten. Wenn Sie dazu nicht bereit sind, ist backbone.js nicht so nützlich.

Backbone ist ein MV * -Framework, während jQuery ein DOM-Toolkit ist.

Die Hauptfunktionen einer MV * -Anwendung sind Routing, Datenbindung, Vorlagen/Ansichten, Modelle und Datenzugriff. Das Backbone kann teilweise von jQuery abhängen.

jQuery ist eine solide API zum Abfragen des DOM mit umfassender Browserunterstützung und einer lebendigen Community. Es wird mit Ereignisbehandlung, zurückgestellten Objekten und Animationen geliefert.

Einfache Ereignisbindung mit jQuery

// When any <p> tag is clicked, we expect to see '<p> was clicked' in the   console.
$( "p" ).on( "click", function() {
console.log( "<p> was clicked" );
});