Backbone.js und jQuery

Lesezeit: 10 Minuten

Benutzer-Avatar
Kopenhagen

Es wird gesagt, dass Backbone alle Abstraktionen auf höherer Ebene verarbeitet, während jQuery oder ähnliche Bibliotheken mit dem DOM arbeiten, Ereignisse normalisieren und so weiter.

Könnte mir bitte jemand helfen, diese Aussage mit einem einfachen praktischen Beispiel zu verstehen.

Ein weiteres wichtiges Merkmal von MVC-Frameworks wie Backbone, Knockout ist, dass es das Modell (Daten) und die Ansicht synchron hält. Dies scheint jedoch auf Seitenebene und nicht über die gesamte Anwendung hinweg spezifisch zu sein. Können wir also das Modell / die Daten und die Ansicht über mehrere Seiten synchronisieren … (irgendwie global)

  • Sie müssen “Backbone AND jQuery” sagen

    – Neoasket

    15. März 2012 um 7:10 Uhr

  • Von Noobs – Für Noobs. thomasdavis.github.com/2011/02/01/backbone-introduction.html. Beide zielen darauf ab, benutzerfreundliche und skalierbare Lösungen für alltägliche Probleme bereitzustellen. Eine (jQuery) konzentriert sich stark darauf, Ihnen die Arbeit mit vorhandenen Elementen und die Bearbeitung der Daten nach dem Laden des DOM zu erleichtern. Mit dem anderen (Backbone) können Sie eine „MV(VM/C/CR)“-Anwendung erstellen, die das Modell (unsere Daten, die wir anzeigen möchten), unsere Ansicht (wie wir unsere Daten anzeigen möchten) und unseren Controller ( Backbone unterteilt dies in zwei Methoden – Sammlungen/Routing) Datentransport/-manipulation VOR dem Laden.

    – Oh Gott warum

    15. März 2012 um 7:41 Uhr

  • Thx dafür … Ich habe die Frage aktualisiert …

    – Kopenhagen

    15. März 2012 um 8:25 Uhr

Benutzer-Avatar
Josh Earl

Ihr Eröffnungssatz war eigentlich eine sehr gute Darstellung der Unterschiede zwischen Backbone.js und jQuery, also packen wir ihn ein wenig aus.

Zum einen stehen die beiden Bibliotheken überhaupt nicht im Wettbewerb – sie ergänzen sich.

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

  • Animierte Diashows
  • Verbesserungen bei der Formularsteuerung, wie z. B. ein Nummerndreher im iOS-Stil
  • Umschalten der Sichtbarkeit von Elementen basierend auf einem Klassennamen

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

  • Erstellen Sie ein Fotoalbum, in dem der Benutzer auf ein Miniaturbild klickt und eine größere Version des Fotos zusammen mit einigen Daten wie der verwendeten Kamera, dem Standort und dem Namen des Fotografen anzeigen kann
  • Erstellen Sie eine Master-/Detailseite, die ein Datenraster darstellt und es dem Benutzer ermöglicht, auf einzelne Elemente zu klicken und sie in einem Formular zu aktualisieren.

jQuery zeichnet sich auf der Mikroebene aus – es wählt Seitenelemente aus und glättet die Unterschiede in der Behandlung von Ereignissen durch Browser.

Backbone.js ist mehr im Gesamtbild. Es hilft Ihnen, Daten und Anwendungslogik zu verwalten. Im obigen Fotoalbum-Beispiel bietet Backbone mehrere nützliche Strukturen: Sie hätten etwas, das alle Daten zu Fotos enthält (ein Modell), eine Liste aller Fotos im Album (eine Sammlung) und einen Platz zum Ablegen Logik, die bestimmt, was passiert, wenn ein Benutzer auf eine Miniaturansicht (die Ansicht) klickt. Dies sind die Hauptbestandteile einer Backbone-Steuerung oder -Anwendung.

Backbone.js profitiert jedoch von jQuery oder etwas Ähnlichem, um die Ergebnisse der Daten und Logik Ihrer Anwendung in das DOM zu rendern. Es ist beispielsweise üblich, jQuery zu verwenden, um das Element auf der Seite auszuwählen, das als Container für Ihre Backbone-App dienen soll. Es ist auch üblich, jQuery zu verwenden $(function () {}); um die Teile Ihrer Backbone-Steuerung anzuzünden. Sie würden wahrscheinlich auch mit jQuery Fehlermeldungen zur Formularfeldvalidierung anzeigen.

Sie können sicherlich große, komplexe Benutzeroberflächen in jQuery erstellen. Wir haben ein paar in der App, die ich bei der Arbeit pflege. Aber es ist schwierig, mit ihnen zu arbeiten, da jQuery nicht darauf ausgelegt ist, einer Anwendung Struktur zu verleihen. Insbesondere die API von jQuery, die darauf basiert, Gruppen von Elementen auszuwählen und dann Rückruffunktionen zu übergeben, die diese Elemente manipulieren, ist kein gutes Muster für die Verwendung in einem großen, komplexen Steuerelement oder einer App. Am Ende haben Sie viele verschachtelte Funktionen und es ist sehr schwer zu sehen, was los ist.

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

In jQuery mache ich mir Sorgen um:

  • Verwende ich den richtigen Selektor, um die Gruppe von zu greifen? li Elemente, die ich will?
  • Muss ich diese Liste mit Werten neu auffüllen, wenn dieser Ajax-Aufruf abgeschlossen ist?
  • Wie kann ich diese Array-Werte wieder in die input Elemente auf der Seite?

Bei Backbone konzentriere ich mich mehr auf:

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

jQuery kümmert sich um die wesentlichen Details, und Backbone ist eher auf hoher Ebene.

Beachten Sie abschließend, dass ich die Wörter „control“ und „app“ verwendet habe, wenn ich die Beispiele von Backbone.js besprochen habe. Es stimmt nicht, dass Backbone.js nur für Single-Page-Apps gedacht ist. Es stimmt jedoch, dass Backbone.js gut zum Erstellen komplexer Anwendungen geeignet ist, die Daten manipulieren und viel Logik verarbeiten. Es wäre dumm, es für kleine UI-Elemente zu verwenden – die zusätzliche Struktur, die es auferlegt, wird nicht benötigt.

Aktualisieren: In Bezug auf mehrere Seiten, ja, Backbone bietet einen leistungsstarken Mechanismus zum Persistieren Ihrer Daten. Jedes Modell hat eine save -Methode, die einen AJAX-Aufruf ausführt, um die Änderungen auf dem Server zu speichern. Solange Sie also Ihre Daten unterwegs speichern, können Sie eine mehrseitige App haben. Es ist ein sehr flexibles Modell, und so werden wir Backbone wahrscheinlich bei der Arbeit verwenden. Während ich gerne eine einseitige App erstellen würde, haben wir 10 Jahre Arbeit in unserer bestehenden mehrseitigen Anwendung. Wir möchten einige unserer intensiveren UI-Komponenten in Backbone neu erstellen und dann die Änderungen mit dem Server synchronisieren, bevor der Benutzer zu einer anderen Seite wechselt.

  • Danke vielmals … Überwältigende Antwort, um es gelinde auszudrücken … Während Sie fast alle Teile erklärt haben, hatte ich nur eine Frage … Sie haben erwähnt, dass Backbone nicht nur für Single-Page-Apps ist … Könnte es also Können Sie mir ein Beispiel geben, wie ich meine Daten über mehrere Seiten in meiner App speichern kann? Außerdem verwende ich Java auf der Serverseite, das die eigentlichen dynamischen Daten bringt … Also sollte ich das auch aktualisieren, um mir Daten im richtigen Format zurückzugeben, und dann eine Kopie davon als Backbone-Modell behalten …

    – Kopenhagen

    16. März 2012 um 4:12 Uhr

  • @testndtv Jedes Mal, wenn Sie die Seite aktualisieren, gehen alle Ihre Modelle verloren … warum also die Seite aktualisieren? Mit Backbone können Sie Ihre Ansichten ändern, während Sie sich noch auf derselben Seite befinden, also verwenden Sie einfach 1 Seite.

    – Markieren

    16. März 2012 um 4:28 Uhr


  • Ok. Hat Backbone keinen Mechanismus, um die Daten seitenübergreifend zu speichern? Wie das Persistieren der Daten durch einen AJAX-Aufruf oder so etwas …

    – Kopenhagen

    16. März 2012 um 7:30 Uhr

  • Einige Informationen zu persistenten Daten hinzugefügt, die Backbone recht gut handhabt.

    – Josh Earl

    16. März 2012 um 11:12 Uhr

  • Gut gesagt, Josh, du hast es besser erklärt als ich. Testndtv, da Sie ein Anfänger in Javascript zu sein scheinen, möchte ich die Warnung hinzufügen, dass Backbone wirklich kein sehr anfängerfreundliches Framework ist – es ist sehr nützlich und hilft sehr beim Erstellen komplexer Apps, aber die zusätzlichen Konzepte machen den Beginn der Entwicklung schwieriger als einfach weg hacken. Ich würde empfehlen, dass Sie die Beispiele aus der Backbone-Dokumentation sorgfältig studieren, damit Sie in die richtige Richtung gehen.

    – OlliM

    16. März 2012 um 14:36 ​​Uhr

Benutzer-Avatar
OlliM

Backbone/Knockout wird typischerweise für Einzelseitenanwendungen verwendet. Während jQuery also eine Toolbox ist, die mit jeder Webseite verwendet werden kann, ist Backbone für eine bestimmte Art von Anwendung gedacht und hilft Ihnen, Ihren Code dafür zu organisieren. Zumindest meiner Erfahrung nach besteht eine der größten Herausforderungen beim Erstellen einer Single-Page-App darin, den Code sauber und modular zu halten, und Backbone hilft dabei sehr.

Die Merkmale einer typischen Backbone-App sind:

  • Im Wesentlichen statische HTML-Seite, bei der nichts auf dem Server generiert wird
  • Der Server fungiert als JSON-REST-API, die den Inhalt für die App bereitstellt
  • Die Dom-Elemente zum Anzeigen der Daten werden mit Javascript in Backbone-Ansichten erstellt, wobei jQuery und verschiedene Templating-Bibliotheken zur Unterstützung verwendet werden
  • Die Kommunikation mit dem Server sowie zwischen verschiedenen Teilen der App erfolgt über die Backbone-Modelle

In Bezug auf Ihre Frage, ob Sie die Daten über mehrere Seiten hinweg synchron halten möchten, lautet meine instinktive Antwort, dass Sie nicht mehrere Seiten benötigen: Der Benutzer kann feststellen, dass sich die Seite ändert, die Adresse in der URL-Leiste ändert sich dank der PushState-Funktionalität, aber technisch gesehen das Die gesamte App ist eine Seite.

Die größten Vorteile dieser Art von Ansatz sind eine reibungslose Benutzererfahrung (kein Neuladen von Seiten), gute Caching-Unterstützung, da alles außer den JSON-Daten statischer Inhalt ist, für mobile Ziele die Möglichkeit, die Web-App mit phoneGap in eine mobile App umzuwandeln (weil alles außer json ist statisch).

  • Hmmm … vielen Dank … ich bin etwas verwirrt, wenn Sie sagen, dass Backbone hauptsächlich nur für Single-Page-Apps verwendet wird … nicht sicher, wie viele Apps wirklich nur Single-Page-Apps sind … die meisten haben mehrere Seiten … Auch wenn ich eine mehrseitige App habe … kann ich Backbone.js nicht verwenden?

    – Kopenhagen

    15. März 2012 um 18:05 Uhr

  • Die Single-Page-App bedeutet, dass es sich technisch gesehen um eine HTML-Seite handelt – aus Benutzersicht hat sie normalerweise mehrere Ansichten (“Seiten”) und Funktionen. Als Beispiel kann ich die mobilen Linkedin-Seiten nennen touch.www.linkedin.com das tatsächlich mit Backbone oder sogar Google Mail entwickelt wird.

    – OlliM

    16. März 2012 um 14:27 Uhr

  • Ja, natürlich können Sie Backbone für mehrseitige Apps verwenden, und in diesem Fall würden Sie wahrscheinlich so viele Backbone-Router verwenden, wie Sie unabhängige neu geladene Seiten haben

    – Alexander Mills

    27. Juni 2015 um 20:47 Uhr

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 Zustände haben und kann zu einer vollständigen, leistungsstarken App führen.

Wenn Sie bereits serverseitiges Template/View-Rendering in Java haben, dann ist backbone.js NICHT für Sie. Um Backbone.js optimal nutzen zu können, müssen Sie einen Teil dieses Codes im Front-End-Javascript verschieben oder duplizieren.

Wenn Sie keine Single-Page-App erstellen möchten (dies bedeutet nur eine App ohne Seitenaktualisierungen oder -änderungen, aber die URL kann sich dennoch ändern und für den Benutzer wie mehrere Seiten aussehen), können Sie Ihr gesamtes MVC eingeschaltet lassen dem Server und Sie brauchen kein Backbone.

Bearbeiten:

Was Backbone tut, ist, einige der MVC-Sachen zu verschieben, die normalerweise auf dem Server gehandhabt werden, und sie auf den Client zu verschieben. Für viele Leute bedeutet dies, den Server zu vergessen und Ihre App einfach als Single-Page-Javascript-App zu schreiben. Der Server wird nur noch zu einer Quelle von JSON/REST-Daten. Wenn Sie dazu nicht bereit sind, ist backbone.js nicht so nützlich.

Benutzer-Avatar
antonjs

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. Backbone könnte teilweise von jQuery abhängen.

jQuery ist eine solide API zum Abfragen des DOM mit umfassender Browserunterstützung und einer lebendigen Community. Es enthält Ereignisbehandlung, zurückgestellte Objekte und Animationen.

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" );
});

1130610cookie-checkBackbone.js und jQuery

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy