wake-up-neo.com

Was ist der Zweck von backbone.js?

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

Kann mir jemand helfen, indem er erklärt, wie es funktioniert und wie es hilfreich sein kann, besseres JavaScript zu schreiben?

433
sushil bharwani

Backbone.js ist im Grunde ein Uber-Light-Framework, mit dem Sie Ihren Javascript-Code in einem [~ # ~] mvc [~ # ~] ( Model, View, Controller) Mode, bei der ...

Modell ist Teil Ihres Codes, der die Daten abruft und auffüllt.

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

und optionaler Controller , mit dem Sie in diesem Fall den Status Ihrer Javascript-Anwendung über eine Hashbang-URL speichern können, zum Beispiel: http://Twitter.com/#search?q=backbone.js

Einige Profis, die ich mit Backbone entdeckt habe:

  • Kein Javascript mehr Spaghetti: Code wird organisiert und in semantisch aussagekräftige .js-Dateien zerlegt, die später mit JAMMIT kombiniert werden

  • No more jQuery.data(bla, bla): Daten müssen nicht mehr im DOM gespeichert werden, sondern in Modellen

  • eventbindung funktioniert einfach

  • äußerst nützliche Underscore-Utility-Bibliothek

  • der Code von backbone.js ist gut dokumentiert und kann sehr gut gelesen werden. Öffnete mir die Augen für eine Reihe von JS-Code-Techniken.

Nachteile:

  • Ich habe eine Weile gebraucht, um meinen Kopf darum zu wickeln und herauszufinden, wie ich ihn auf meinen Code anwenden kann, aber ich bin ein Javascript-Neuling.

Hier finden Sie eine Reihe großartiger Tutorials zur Verwendung von Backbone mit Rails als Backend:

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/

p.s. Es gibt auch diese wunderbare Klasse Collection , mit der Sie sich mit Sammlungen von Modellen befassen und verschachtelte Modelle nachahmen können, aber ich möchte Sie nicht von Anfang an verwirren .

390

Wenn Sie komplexe Benutzeroberflächen im Browser erstellen, werden Sie wahrscheinlich die meisten Teile erfinden, aus denen Frameworks wie Backbone.js und Sammy.js bestehen. Die Frage ist also, ob Sie im Browser etwas erstellen, das kompliziert genug ist, um es zu verwenden (damit Sie nicht selbst dasselbe erfinden).

Wenn Sie etwas erstellen möchten, bei dem die Benutzeroberfläche regelmäßig ändert, wie es angezeigt wird aber nicht zum Server, um vollständige neue Seiten abzurufen, benötigen Sie wahrscheinlich etwas wie Backbone.js oder Sammy.js. Das Paradebeispiel für so etwas ist Google's GMail. Wenn Sie es jemals verwendet haben, werden Sie feststellen, dass es einen großen Teil von HTML, CSS und JavaScript herunterlädt, wenn Sie sich zum ersten Mal anmelden und danach alles im Hintergrund geschieht. Es kann zwischen dem Lesen einer E-Mail und dem Verarbeiten des Posteingangs und dem Durchsuchen und erneuten Durchsuchen aller E-Mails wechseln, ohne jemals nach einer neuen Seite zu fragen, die wiedergegeben werden soll.

Es ist diese Art von App, die diese Frameworks Excel einfacher zu entwickeln macht. Ohne sie werden Sie entweder eine Vielzahl von einzelnen Bibliotheken zusammenstellen, um Teile der Funktionalität zu erhalten (z. B. jQuery BBQ für die Verlaufsverwaltung, Events.js für Ereignisse usw.), oder Sie werden am Ende alles selbst erstellen und alles selbst warten und testen zu müssen. Vergleichen Sie das mit Backbone.js, in dem Tausende von Leuten es auf Github beobachten, Hunderten von Gabeln, an denen möglicherweise gearbeitet wird, und Hunderten von Fragen, die bereits hier bei Stack Overflow gestellt und beantwortet wurden.

Aber nichts davon ist von Bedeutung, wenn das, was Sie planen, nicht kompliziert genug ist, um die mit einem Framework verbundene Lernkurve wert zu sein. Wenn Sie immer noch PHP, Java oder andere Sites erstellen, bei denen der Back-End-Server immer noch die Arbeit am Erstellen der Webseiten auf Anforderung des Benutzers leistet und JavaScript/jQuery nur das i-Tüpfelchen auf diesem Prozess ist, sind Sie nicht Sie werden Backbone.js nicht brauchen oder sind noch nicht bereit.

250
John Munsch

Rückgrat ist ...

... eine sehr kleine Bibliothek von Komponenten, mit deren Hilfe Sie Ihren Code organisieren können. Es wird als einzelne JavaScript-Datei geliefert. Ohne Kommentare enthält es weniger als 1000 Zeilen JavaScript. 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 einfügen. Es wirkt sich nur auf den Browser aus und sagt nur wenig über Ihren Server aus, außer dass es im Idealfall eine erholsame API verfügbar machen sollte.

Wenn Sie über eine API verfügen, bietet Backbone einige hilfreiche Funktionen, mit denen Sie mit der API kommunizieren können. Mit Backbone können Sie jedoch jeder statischen HTML-Seite Interaktivität hinzufügen.

Backbone ist für ...

... JavaScript strukturieren.

Da JavaScript keine bestimmten Muster erzwingt, können JavaScript-Anwendungen sehr schnell sehr unübersichtlich werden. Jeder, der etwas anderes als Triviales in JavaScript entwickelt hat, wird wahrscheinlich auf folgende Fragen stoßen:

  1. Wo werde ich meine Daten speichern?
  2. Wo werde ich meine Funktionen setzen?
  3. Wie verbinde ich meine Funktionen, damit sie sinnvoll heißen und sich nicht in Spaghetti verwandeln?
  4. Wie kann ich diesen Code für verschiedene Entwickler wartbar machen?

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

  • Modelle und Sammlungen zur Darstellung von Daten und Datensammlungen.
  • Ansichten, damit Sie Ihr DOM aktualisieren können, wenn sich Ihre Daten ändern.
  • Ein Ereignissystem, mit dem Komponenten aufeinander hören können. Dies hält Ihre Komponenten entkoppelt und verhindert eine Spaghettifizierung.
  • Ein Minimum an sinnvollen Konventionen, damit Entwickler auf derselben Codebasis zusammenarbeiten können.

Wir nennen dies ein MV * -Muster. Modelle, Ansichten und Sonderausstattungen.

Das Rückgrat ist leicht

Backbone ist trotz des anfänglichen Auftritts fantastisch leicht und macht kaum etwas. Was es tut, ist sehr hilfreich.

Sie erhalten eine Reihe kleiner Objekte, die Sie erstellen und die Ereignisse ausstrahlen und sich gegenseitig zuhören können. Sie können 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 der commentView anweisen, den Kommentar abzuhören und sich selbst neu zu zeichnen, wenn sich der Kommentar ändert. Selbst wenn derselbe Kommentar an mehreren Stellen auf Ihrer Seite angezeigt wird, können alle diese Ansichten dasselbe Kommentarmodell wiedergeben und synchron bleiben.

Diese Art der Codekomposition verhindert, dass Sie sich verwickeln, selbst wenn Ihre Codebasis bei 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 geraten und weisen im Allgemeinen eine schlechte Form auf. Datenattribute, die im DOM gespeichert sind, können nur Zeichenfolgen sein. Sie müssen sie ein- und wieder auslesen. Es ist schwierig, Elemente wie Arrays, Daten oder Objekte zu speichern und Ihre Daten in strukturierter Form zu analysieren.

Datenattribute sehen folgendermaßen aus:

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

Backbone löst dieses Problem, indem ein Model-Objekt zur Darstellung Ihrer Daten und der zugehörigen Methoden bereitgestellt wird . Angenommen, Sie haben eine Aufgabenliste, 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 Modelländerungsereignisse und rendert sich selbst neu.

Ansichten

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

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 übliche Konvention.

Jede Ansicht ist an einen bestimmten Teil des DOM gebunden, sodass Sie möglicherweise eine searchFormView haben, die nur das Suchformular abhört, und eine shoppingCartView, die nur den Warenkorb anzeigt.

Ansichten sind in der Regel auch an bestimmte Modelle oder Sammlungen gebunden. Wenn das Modell aktualisiert wird, wird ein Ereignis ausgelöst, das von der Ansicht abgehört wird. Die Ansicht, die sie aufrufen könnten, wird gerendert, um sich selbst neu zu zeichnen.

Ebenso kann Ihre Ansicht beim Eingeben in ein Formular ein Modellobjekt aktualisieren. Jede andere Ansicht, die dieses Modell abhört, ruft dann eine eigene Renderfunktion auf.

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

Die Render-Funktion

Sie können Ihre Render-Funktion nach Belieben implementieren. Sie können hier einfach eine jQuery eingeben, um das DOM manuell zu aktualisieren.

Sie können auch eine Vorlage kompilieren und diese verwenden. Eine Vorlage ist nur eine Zeichenfolge mit Einfügemarken. 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 Listen von Modellen gespeichert sind. Eine todoCollection ist also eine Liste von todo-Modellen. Wenn eine Sammlung ein Modell gewinnt oder verliert, die Reihenfolge ändert oder ein Modell in einer Sammlung aktualisiert wird, wird von der gesamten Sammlung ein Ereignis ausgelöst.

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

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

Und Veranstaltungen, die alles zusammenbringen

Anwendungskomponenten werden so weit wie möglich voneinander entkoppelt. Sie kommunizieren über Ereignisse, sodass eine shoppingCartView möglicherweise eine shoppingCart-Sammlung abhört und sich selbst neu zeichnet, wenn der Einkaufswagen hinzugefügt wird.

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

Natürlich können auch andere Objekte den shoppingCart abhören und andere Aktionen ausführen, z. B. die Aktualisierung einer Gesamtsumme oder das Speichern des Status im lokalen Speicher.

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

Wenn Sie Ihre Objekte auf diese Weise entkoppeln und mithilfe von Ereignissen kommunizieren, werden Sie sich nie in Knoten verfangen, und das Hinzufügen neuer Komponenten und Verhalten ist einfach. Ihre neuen Komponenten müssen nur die anderen Objekte abhören, die sich bereits im System befinden.

Konventionen

Code, der für Backbone geschrieben wurde, folgt einer Reihe von Konventionen. DOM-Code gehört in eine Ansicht. Der Sammlungscode gehört zu einer Sammlung. Geschäftslogik geht in ein Modell. Ein anderer Entwickler, der Ihre Codebasis aufnimmt, kann sofort loslegen.

Um zusammenzufassen

Backbone ist eine kompakte Bibliothek, die Ihrem Code Struktur verleiht. Komponenten sind entkoppelt und kommunizieren über Ereignisse, sodass Sie nicht in Unordnung geraten. Sie können Ihre Codebasis einfach erweitern, indem Sie ein neues Objekt erstellen und Ihre vorhandenen Objekte entsprechend anhören. Ihr Code wird sauberer, ansprechender und wartungsfreundlicher.

Mein kleines Buch

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

Ich habe das Material auch in einen kurzen Online-Kurs unterteilt, den Sie hier finden: http://www.forwardadvance.com/course/backbone . Sie können den Kurs in ungefähr einem Tag abschließen.

94
superluminary

Hier ist eine interessante Präsentation:

Ein Intro zu Backbone.js

Hinweis (von den Folien):

  • Schienen im Browser? Nein .
  • Ein MVC-Framework für JavaScript? Sorta .
  • Eine große Fettmaschine? [~ # ~] ja [~ # ~] !
32
dpan

JQuery und Mootools sind nur eine Toolbox mit vielen Werkzeugen Ihres Projekts. Backbone verhält sich wie eine Architektur oder ein Backbone für Ihr Projekt, auf dem Sie eine Anwendung mit JQuery oder Mootools erstellen können.

14
sv_in

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. Widgets wie jQuery UI oder Dojo werden nicht bereitgestellt.

Sie erhalten eine coole Reihe von Basisklassen, die Sie erweitern können, um sauberen JavaScript-Code zu erstellen, der mit REST-fähigen Endpunkten auf Ihrem Server kommuniziert.

14
Andrew Hare

Ich muss zugeben, dass all die "Vorteile" von MVC meine Arbeit nie einfacher, schneller oder besser gemacht haben. Dadurch wird das gesamte Codeerlebnis abstrakter und zeitaufwändiger. Wartung ist ein Albtraum, wenn man versucht, eine andere Vorstellung davon zu debuggen, was Trennung bedeutet. Sie wissen nicht, wie viele von Ihnen jemals versucht haben, eine FLEX-Site zu aktualisieren, auf der Cairngorm als MVC-Modell verwendet wurde. Was jedoch 30 Sekunden dauern sollte, kann oft mehr als 2 Stunden dauern (Suchen/Aufspüren/Debuggen, nur um ein einzelnes Ereignis zu finden) ). MVC war und ist für mich ein "Vorteil", den man stopfen kann.

11
user1415445

Dies ist ein ziemlich gutes Einführungsvideo: http://vimeo.com/22685608

Wenn Sie mehr über Rails und Backbone suchen, hat Thoughtbot dieses ziemlich gute Buch (nicht kostenlos): https://workshops.thoughtbot.com/backbone-js-on -Rails

11
Vince

Hier ist ein kurzer Einstiegsposten, den ich auf BackboneJS geschrieben habe. Ich hoffe es hilft! http://www.infragistics.com/community/blogs/nanil/archive/2013/04/01/exploring-javascript-mv-frameworks-part-1-hello-backbonejs.aspx

4
Nish

Backbone wurde von Jeremy Ashkenas erstellt, der auch CoffeeScript geschrieben hat. Als JavaScript-schwere 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 unterstützt Entwickler bei der Verwaltung eines Datenmodells in ihrer clientseitigen Webanwendung mit so viel Disziplin und Struktur wie in der herkömmlichen serverseitigen Anwendungslogik.

Zusätzliche Vorteile der Verwendung von Backbone.js

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

backbone.js ist Model-View-Controller (MVC) mit JavaScript aber Extjs besser als backbone für MVC Pattern durch Java= script

Mit Backbone haben Sie die Freiheit, fast alles zu tun, was Sie sich wünschen. Anstatt zu versuchen, die API zu durchforsten und anzupassen, würde ich Backbonejs verwenden, um die Implementierung zu vereinfachen und zu vereinfachen. Auch hier ist es schwer zu sagen, was Sie von den beiden benötigen, ist eine Bibliothek, eine andere eine Komponente

3
zandi

Außerdem wird das Routing mithilfe von Controllern und Ansichten mit KVO hinzugefügt. Sie können damit "AJAXy" -Anwendungen entwickeln.

Sehen Sie es als leichtes Sproutcore- oder Cappuccino-Framework.

2
benvds

Ist ein MVC-Entwurfsmuster auf der Client-Seite, glauben Sie mir. Es wird Ihnen Tonnen von Code ersparen, ganz zu schweigen von einem saubereren und klareren Code, einem einfacher zu pflegenden Code. Könnte anfangs etwas knifflig sein, aber glauben Sie mir, es ist eine großartige Bibliothek.

1
flaalf

So viele gute Antworten schon. Backbone js hilft dabei, den Code organisiert zu halten. Das Ändern des Modells/der Sammlung sorgt für die automatische Darstellung der Ansicht, wodurch sich der Entwicklungsaufwand verringert.

Obwohl dies maximale Flexibilität für die Entwicklung bietet, sollten Entwickler darauf achten, die Modelle zu zerstören und die Ansichten ordnungsgemäß zu entfernen. Andernfalls ist möglicherweise ein Speicherverlust in der Anwendung aufgetreten.

0
FlintOff