javascript - Was ist der Zweck von backbone.js?




8 Answers

Backbone.js ist im Grunde ein super-light-Framework, mit dem Sie Ihren Javascript-Code in einer MVC (Model, View, Controller) Mode, wo ...

Model ist ein Teil Ihres Codes, der die Daten abruft und füllt,

Ansicht ist die HTML-Darstellung dieses Modells (Ansichten ändern sich, wenn sich Modelle ändern usw.)

und optionaler Controller , der es in diesem Fall ermöglicht, den Status Ihrer Javascript-Anwendung über eine Hashbang-URL zu speichern, zum Beispiel: http://twitter.com/#search?q=backbone.js

Einige Profis, die ich mit Backbone entdeckt habe:

  • Keine Javascript-Spaghetti mehr: Code ist organisiert und in semantisch bedeutsame .js-Dateien unterteilt, die später mit JAMMIT kombiniert werden

  • Keine jQuery.data(bla, bla) mehr jQuery.data(bla, bla) : Sie müssen keine Daten im DOM speichern, sondern Daten in Modellen speichern

  • Ereignisbindung funktioniert einfach

  • extrem nützliche Underscore-Utility-Bibliothek

  • Der Code von backbone.js ist gut dokumentiert und eine gute Lektüre. Öffnete meine Augen für eine Reihe von JS-Code-Techniken.

Nachteile:

  • Nahm mich eine Weile, um meinen Kopf darum zu wickeln und herauszufinden, wie man es auf meinen Code anwendet, aber ich bin ein Javascript-Neuling.

Hier finden Sie eine Reihe toller Tutorials zur Verwendung von Backbone mit Rails als Back-End:

CloudEdit: Ein Backbone.js Tutorial mit Rails:

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/

PS: Es gibt auch diese wunderbare Collection- Klasse, mit der Sie mit Sammlungen von Modellen umgehen und verschachtelte Modelle nachahmen können, aber ich möchte Sie nicht von Anfang an verwirren.

Ich habe versucht, den Nutzen von backbone.js von seiner Website http://documentcloud.github.com/backbone zu verstehen, aber ich konnte immer noch nicht viel herausfinden.

Kann mir jemand helfen, indem ich ihm erläutere, wie es funktioniert und wie es beim Schreiben von besserem JavaScript hilfreich sein könnte?




Rückgrat ist ...

... eine sehr kleine Bibliothek mit Komponenten, mit denen Sie Ihren Code organisieren können. Es kommt als eine einzelne JavaScript-Datei verpackt. Mit Ausnahme von Kommentaren verfügt es über weniger als 1000 JavaScript-Zeilen. Es ist vernünftig geschrieben und Sie können das Ganze in ein paar Stunden lesen.

Es ist eine Front-End-Bibliothek, die Sie mit einem Skript-Tag in Ihre Webseite integrieren. Es betrifft nur den Browser und sagt wenig über Ihren Server aus, außer dass es idealerweise eine erholsame API bereitstellen sollte.

Wenn Sie über eine API verfügen, verfügt Backbone über einige hilfreiche Funktionen, mit denen Sie darüber sprechen können. Sie können jedoch Backbone verwenden, um jeder statischen HTML-Seite Interaktivität hinzuzufügen.

Backbone ist für ...

... Struktur zu JavaScript hinzufügen.

Da JavaScript keine bestimmten Muster erzwingt, können JavaScript-Anwendungen sehr schnell sehr unordentlich werden. Jeder, der in JavaScript etwas über das Triviale hinausgebaut hat, wird wahrscheinlich mit Fragen konfrontiert werden wie:

  1. Wo werde ich meine Daten speichern?
  2. Wo werde ich meine Funktionen einstellen?
  3. Wie verbinde ich meine Funktionen miteinander, damit sie vernünftig genannt werden und nicht zu Spaghetti werden?
  4. Wie kann ich diesen Code von verschiedenen Entwicklern pflegen lassen?

Backbone versucht, diese Fragen zu beantworten, indem es Ihnen Folgendes gibt:

  • Modelle und Sammlungen, die Ihnen bei der Darstellung von Daten und Datensammlungen helfen.
  • Ansichten, um Ihnen zu helfen, Ihr DOM zu aktualisieren, wenn sich Ihre Daten ändern.
  • Ein Ereignissystem, damit Komponenten aufeinander hören können. Dies hält Ihre Komponenten entkoppelt und verhindert Spaghettierung.
  • Ein Minimum an sinnvollen Konventionen, damit Entwickler auf der gleichen Codebasis zusammenarbeiten können.

Wir nennen das ein MV * -Muster. Modelle, Ansichten und optionale Extras.

Rückgrat ist Licht

Trotz anfänglicher Auftritte ist Backbone phantastisch leicht, es macht kaum etwas. Was es tut, ist sehr hilfreich.

Es gibt Ihnen eine Reihe von kleinen Objekten, die Sie erstellen können und die Ereignisse ausstrahlen und aufeinander hören können. Sie könnten beispielsweise ein kleines Objekt erstellen, um einen Kommentar darzustellen, und dann ein kleines commentView-Objekt, um die Anzeige des Kommentars an einer bestimmten Stelle im Browser darzustellen.

Sie können commentView anweisen, den Kommentar anzuhören und sich neu zu zeichnen, wenn sich der Kommentar ändert. Auch wenn Sie denselben Kommentar an mehreren Stellen auf Ihrer Seite anzeigen, können alle diese Ansichten dasselbe Kommentarmodell anhören und synchron bleiben.

Diese Art der Code-Erstellung hilft Ihnen, sich nicht zu verwickeln, selbst wenn Ihre Codebase mit vielen Interaktionen sehr groß wird.

Modelle

Zu Beginn ist es üblich, Ihre Daten entweder in einer globalen Variablen oder im DOM als Datenattribute zu speichern . Beide haben Probleme. Globale Variablen können miteinander in Konflikt stehen und sind in der Regel schlechte Form. Datenattribute, die im DOM gespeichert sind, können nur Zeichenfolgen sein, Sie müssen sie erneut analysieren und analysieren. Es ist schwierig, Dinge wie Arrays, Daten oder Objekte zu speichern und Ihre Daten in einer strukturierten Form zu analysieren.

Datenattribute sehen so aus:

<p data-username="derek" data-age="42"></p>

Backbone löst dies, indem es ein Model-Objekt zur Verfügung stellt, um Ihre Daten und zugehörigen Methoden darzustellen . Angenommen, Sie haben eine Todo-Liste, dann hätten Sie ein Modell, das jeden Punkt auf dieser Liste darstellt.

Wenn Ihr Modell aktualisiert wird, wird ein Ereignis ausgelöst. Möglicherweise haben Sie eine Ansicht, die an dieses bestimmte Objekt gebunden ist. Die Ansicht wartet auf Modellwechselereignisse und rendert sich selbst neu.

Ansichten

Backbone bietet Ihnen View-Objekte, die mit dem DOM kommunizieren. Alle Funktionen, die das DOM manipulieren oder auf DOM-Ereignisse warten, finden Sie hier.

Eine Ansicht implementiert normalerweise eine Renderfunktion, die die gesamte Ansicht oder möglicherweise einen Teil der Ansicht neu zeichnet. Es gibt keine Verpflichtung, eine Renderfunktion zu implementieren, aber es ist eine allgemeine Konvention.

Jede Ansicht ist an einen bestimmten Teil des DOM gebunden. Daher haben Sie möglicherweise eine searchFormView, die nur das Suchformular überwacht, und eine shoppingCartView, die nur den Einkaufswagen anzeigt.

Ansichten sind normalerweise auch an bestimmte Modelle oder Sammlungen gebunden. Wenn das Modell aktualisiert wird, wird ein Ereignis ausgelöst, auf das die Ansicht reagiert. Die Ansicht könnte sie aufrufen, um sich neu zu zeichnen.

Wenn Sie ein Formular eingeben, kann Ihre Ansicht ein Modellobjekt ebenfalls aktualisieren. Jede andere Ansicht, die dieses Modell hört, ruft dann ihre eigene Renderfunktion auf.

Dies gibt uns eine saubere Trennung von Bedenken, die unseren Code sauber und ordentlich hält.

Die Renderfunktion

Sie können Ihre Renderfunktion auf jede beliebige Weise implementieren. Sie können hier einfach jQuery eingeben, um das DOM manuell zu aktualisieren.

Sie könnten auch eine Vorlage kompilieren und diese verwenden. Eine Vorlage ist nur eine Zeichenfolge mit Einfügepunkten. Sie übergeben es zusammen mit einem JSON-Objekt an eine Kompilierungsfunktion und erhalten eine kompilierte Zeichenfolge zurück, die Sie in Ihr DOM einfügen können.

Sammlungen

Sie haben auch Zugriff auf Sammlungen, in denen Modelllisten gespeichert sind. Eine TodoCollection wäre also eine Liste von Todo-Modellen. Wenn eine Sammlung ein Modell gewinnt oder verliert, ihre Reihenfolge ändert oder ein Modell in einer Sammlung aktualisiert wird, löst die gesamte Sammlung ein Ereignis aus.

Eine Ansicht kann eine Sammlung anhören und sich selbst aktualisieren, wenn die Sammlung aktualisiert wird.

Sie können Ihrer Sammlung Sortier- und Filtermethoden hinzufügen und sie zum Beispiel automatisch sortieren lassen.

Und Events, um alles zusammen zu binden

Soweit möglich, sind Anwendungskomponenten voneinander entkoppelt. Sie kommunizieren über Ereignisse, so dass eine shoppingCartView eine shoppingCart-Sammlung anhören und sich neu zeichnen kann, wenn der Einkaufswagen hinzugefügt wird.

shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);

Natürlich können andere Objekte auch das shoppingCart hören und andere Dinge tun, wie zum Beispiel das Aktualisieren einer Summe oder das Speichern des Status im lokalen Speicher.

  • Ansichten hören auf Modelle und rendern, wenn sich das Modell ändert.
  • Ansichten hören Sammlungen und rendern eine Liste (oder ein Raster oder eine Karte usw.), wenn sich ein Element in der Sammlung ändert.
  • Modelle hören auf Ansichten, so dass sie ihren Status ändern können, wenn ein Formular bearbeitet wird.

Das Entkoppeln Ihrer Objekte und das Kommunizieren mit Ereignissen bedeutet, dass Sie sich nicht in Knoten verstricken und das Hinzufügen neuer Komponenten und Verhaltensweisen einfach ist. Ihre neuen Komponenten müssen nur auf die anderen bereits im System vorhandenen Objekte hören.

Konventionen

Der für Backbone geschriebene Code folgt einer losen Konstellation. Der DOM-Code gehört zu einer Ansicht. Sammelcode gehört zu einer Sammlung. Geschäftslogik geht in einem Modell. Ein anderer Entwickler, der Ihre Codebasis abholt, wird in der Lage sein, den Boden zu rennen.

Um zusammenzufassen

Backbone ist eine leichtgewichtige Bibliothek, die Ihrem Code Struktur verleiht. Komponenten sind entkoppelt und kommunizieren über Ereignisse, so dass Sie nicht in Unordnung geraten. Sie können Ihre Codebasis leicht erweitern, indem Sie einfach ein neues Objekt erstellen und es Ihren vorhandenen Objekten entsprechend anhören. Ihr Code wird sauberer, netter und wartbarer.

Mein kleines Buch

Ich mochte Backbone so sehr, dass ich ein kleines Intro-Buch darüber geschrieben habe. Sie können es online hier lesen: http://nicholasjohnson.com/backbone-book/

Ich habe das Material auch in einen kurzen Online-Kurs aufgeteilt, den du hier finden kannst: http://www.forwardadvance.com/course/backbone . Sie können den Kurs in etwa einem Tag absolvieren.




Backbone.js ist ein JavaScript-Framework, mit dem Sie Ihren Code organisieren können. Es ist buchstäblich ein Rückgrat, auf dem Sie Ihre Anwendung aufbauen. Es bietet keine Widgets (wie jQuery UI oder Dojo).

Es bietet Ihnen eine Reihe cooler Basisklassen, die Sie erweitern können, um sauberen JavaScript-Code zu erstellen, der mit REST-fähigen Endpunkten auf Ihrem Server verbunden ist.










Backbone wurde von Jeremy Ashkenas erstellt, der auch CoffeeScript schrieb. Als eine JavaScript-lastige Anwendung war das, was wir heute als Backbone kennen, für die Strukturierung der Anwendung in eine kohärente Codebasis verantwortlich. Underscore.js, die einzige Abhängigkeit des Backbones, war ebenfalls Teil der DocumentCloud-Anwendung.

Backbone hilft Entwicklern bei der Verwaltung eines Datenmodells in ihrer clientseitigen Web-App mit der gleichen Disziplin und Struktur wie in der traditionellen serverseitigen Anwendungslogik.

Zusätzliche Vorteile der Verwendung von Backbone.js

  1. Siehe Backbone als Bibliothek, nicht als Framework
  2. Javascript wird nun strukturiert organisiert, das (MVVM) -Modell
  3. Große Benutzergemeinschaft



Ist ein MVC-Design-Muster auf der Client-Seite, glauben Sie mir .. Es wird Ihnen Tonnen von Code sparen, ganz zu schweigen von einem saubereren und klareren Code, ein einfacher zu wartender Code. Könnte ein wenig schwierig sein, aber glauben Sie mir, es ist eine großartige Bibliothek.




Eine Webanwendung, die viele Benutzerinteraktionen mit vielen AJAX-Anfragen umfasst, die von Zeit zu Zeit geändert werden müssen und die in Echtzeit ausgeführt werden (wie Facebook oder ), sollte ein MVC-Framework wie Backbone.js verwenden. Es ist der beste Weg, guten Code zu erstellen.

Wenn die Anwendung jedoch nur klein ist, ist Backbone.js besonders für Erstbenutzer übertrieben.

Backbone gibt Ihnen Client-Seite MVC und alle damit verbundenen Vorteile.




Related