Ich habe versucht, den Nutzen von backbone.js auf der 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 beim Schreiben von besserem JavaScript hilfreich sein kann?

Backbone.js ist im Grunde ein überaus leichtes Framework, mit dem Sie Ihren Javascript-Code in MVC- Form (Model, View, Controller) strukturieren können , wobei ...

Das 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:

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

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

• Ereignisbindung funktioniert einfach

• äußerst nützliche Unterstreichungsprogramm-Bibliothek

• Der Code von backbone.js ist gut dokumentiert und gut gelesen. Öffnete mir die Augen für eine Reihe von JS-Codetechniken.

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 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 Sammlungsklasse , mit der Sie sich mit Sammlungen von Modellen befassen und verschachtelte Modelle imitieren können, aber ich möchte Sie nicht von Anfang an verwirren.

Wenn Sie komplexe Benutzeroberflächen im Browser erstellen, werden Sie wahrscheinlich irgendwann 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 das Gleiche erfinden).

Wenn Sie planen, etwas zu erstellen, bei dem die Benutzeroberfläche regelmäßig die Anzeige ändert, aber nicht zum Server geht, um ganz neue Seiten abzurufen, benötigen Sie wahrscheinlich etwas wie Backbone.js oder Sammy.js. Das Hauptbeispiel dafür ist Googles 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 dem Rendern einer ganz neuen Seite zu fragen.

Es ist diese Art von App, die diese Frameworks besonders einfach machen. Ohne sie werden Sie entweder eine Vielzahl einzelner 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 dies mit etwas wie Backbone.js, bei dem Tausende von Menschen es auf Github sehen, Hunderte von Gabeln, an denen möglicherweise Leute daran arbeiten, und Hunderte von Fragen, die hier bei Stack Overflow bereits gestellt und beantwortet wurden.

Nichts davon ist jedoch von Bedeutung, wenn das, was Sie erstellen möchten, nicht kompliziert genug ist, um die mit einem Framework verbundene Lernkurve wert zu sein. Wenn Sie immer noch PHP, Java oder andere Websites erstellen, auf denen der Back-End-Server auf Anfrage des Benutzers immer noch die Webseiten erstellt, und JavaScript / jQuery nur das i-Tüpfelchen auf diesem Prozess ist, sind Sie nicht Ich brauche oder bin noch nicht bereit für Backbone.js.

Rückgrat ist ...

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

Wenn Sie über eine API verfügen, verfügt Backbone über einige hilfreiche Funktionen, mit denen Sie mit ihr sprechen können. Sie können jedoch Backbone verwenden, um jeder statischen HTML-Seite Interaktivität hinzuzufü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 erstellt hat, wird wahrscheinlich auf Fragen stoßen wie:

1. Wo werde ich meine Daten speichern?
2. Wo werde ich meine Funktionen platzieren?
3. Wie werde ich meine Funktionen miteinander verbinden, damit sie sinnvoll aufgerufen werden und sich nicht Spaghetti zuwenden?
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, damit Komponenten einander zuhören können. Dies hält Ihre Komponenten entkoppelt und verhindert eine Spaghettifizierung.
• Eine minimale Anzahl sinnvoller Konventionen, damit Entwickler an derselben Codebasis zusammenarbeiten können.

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

Das Rückgrat ist leicht

Trotz anfänglicher Erscheinungen ist Backbone fantastisch leicht und macht kaum etwas. Was es tut, ist sehr hilfreich.

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

Diese Art des Zusammenstellens von Code verhindert, dass Sie sich verheddern, 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 stehen und sind im Allgemeinen schlecht. Im DOM gespeicherte Datenattribute können nur Zeichenfolgen sein. Sie müssen sie ein- und erneut analysieren. Es ist schwierig, 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>

Das Backbone löst dieses Problem, indem es ein Modellobjekt zur Darstellung Ihrer Daten und der zugehörigen Methoden bereitstellt . Angenommen, Sie haben eine Aufgabenliste, dann hätten Sie ein Modell, das jedes Element in dieser Liste darstellt.

Wenn Ihr Modell aktualisiert wird, wird ein Ereignis ausgelöst. Möglicherweise ist eine Ansicht an dieses bestimmte Objekt gebunden. Die Ansicht wartet auf Modelländerungsereignisse 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 besteht 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 normalerweise auch an bestimmte Modelle oder Sammlungen gebunden. Wenn das Modell aktualisiert wird, wird ein Ereignis ausgelöst, das die Ansicht abhört. Die Ansicht könnte sie Rendern nennen, um sich selbst neu zu zeichnen.

Wenn Sie in ein Formular eingeben, kann Ihre Ansicht ebenfalls ein Modellobjekt aktualisieren. Jede andere Ansicht, die dieses Modell anhö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 nach Belieben implementieren. Sie können hier einfach jQuery einfügen, um das DOM manuell zu aktualisieren.

Sie können 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 ist also eine Liste von Aufgabenmodellen. 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 bei jeder Aktualisierung der Sammlung selbst aktualisieren.

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

Und Ereignisse, um alles zusammenzubinden

Anwendungskomponenten sind 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 Warenkorb hinzugefügt wird.

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

Natürlich können auch andere Objekte den Einkaufswagen abhören und andere Dinge tun, z. B. eine Gesamtsumme aktualisieren oder den Status im lokalen Speicher speichern.

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

Wenn Sie Ihre Objekte auf diese Weise entkoppeln und über Ereignisse kommunizieren, geraten Sie nie in Knoten, und das Hinzufügen neuer Komponenten und Verhaltensweisen ist einfach. Ihre neuen Komponenten müssen nur die anderen Objekte abhören, die sich bereits im System befinden.

Konventionen

Der für Backbone geschriebene Code folgt einer Reihe loser Konventionen. DOM-Code gehört in eine Ansicht. Sammlungscode gehört in eine Sammlung. Geschäftslogik gehört zu einem 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, damit Sie nicht in Unordnung geraten. Sie können Ihre Codebasis einfach erweitern, indem Sie einfach ein neues Objekt erstellen und Ihre vorhandenen Objekte entsprechend anhören. Ihr Code wird sauberer, schöner und wartbarer.

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.

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 fette Zustandsmaschine? JA !

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 werden keine Widgets bereitgestellt (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 RESTful-Endpunkten auf Ihrem Server verbunden ist.

JQuery und Mootools sind nur eine Toolbox mit vielen Tools Ihres Projekts. Das Backbone fungiert als Architektur oder Backbone für Ihr Projekt, auf dem Sie mit JQuery oder Mootools eine Anwendung erstellen können.

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

Ich muss zugeben, dass alle "Vorteile" von MVC meine Arbeit nie einfacher, schneller oder besser gemacht haben. Dies macht das gesamte Codeerlebnis nur abstrakter und zeitaufwändiger. Wartung ist ein Albtraum, wenn versucht wird, eine andere Vorstellung davon zu debuggen, was Trennung bedeutet. Sie wissen nicht, wie viele von Ihnen jemals versucht haben, eine FLEX-Site zu aktualisieren, die Cairngorm als MVC-Modell verwendet hat. Die Aktualisierung sollte jedoch 30 Sekunden dauern (Jagd / Ablaufverfolgung / Debugging, um nur ein einziges Ereignis zu finden) ). MVC war und ist für mich ein "Vorteil", den man stopfen kann.

Hier ist ein kurzer Beitrag, 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

backbone.js ist Model-View-Controller (MVC) mit JavaScript, aber Extjs besser als Backbone für MVC Pattern per Java-Skript

Mit Backbone haben Sie die Freiheit, fast alles zu tun, was Sie sich wünschen. Anstatt zu versuchen, die API zu durchlaufen 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

Backbone wurde von Jeremy Ashkenas erstellt, der auch CoffeeScript schrieb. Als 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.

Mit Backbone können Entwickler ein Datenmodell in ihrer clientseitigen Webanwendung mit so viel Disziplin und Struktur verwalten, wie Sie es mit herkömmlicher serverseitiger Anwendungslogik tun würden.

Zusätzliche Vorteile der Verwendung von Backbone.js

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

Außerdem wird 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.

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

So viele gute Antworten schon. Backbone js hilft dabei, den Code organisiert zu halten. Durch das Ändern des Modells / der Sammlung wird sichergestellt, dass die Ansicht automatisch gerendert wird, wodurch der Entwicklungsaufwand erheblich reduziert wird.

Obwohl es maximale Flexibilität für die Entwicklung bietet, sollten Entwickler darauf achten, die Modelle zu zerstören und die Ansichten ordnungsgemäß zu entfernen. Andernfalls kann es zu einem Speicherverlust in der Anwendung kommen.

Eine Webanwendung mit viel Benutzerinteraktion mit vielen AJAX-Anforderungen, die von Zeit zu Zeit geändert werden muss und in Echtzeit ausgeführt wird (z. B. Facebook oder StackOverflow), sollte ein MVC-Framework wie Backbone.js verwenden. Dies ist der beste Weg, um guten Code zu erstellen.

Wenn die Anwendung jedoch nur klein ist, ist Backbone.js ein Overkill, insbesondere für Erstbenutzer.

Backbone bietet Ihnen clientseitige MVC und alle damit verbundenen Vorteile.