Share
Im Gegensatz zu seinen Webentwicklern hatte JavaScript noch nie wirklich viel mit Frameworks zu tun, um Struktur zu schaffen. Zum Glück ändert sich das in den letzten Jahren.
Heute möchte ich Ihnen Backbone.JS vorstellen, eine süße kleine Bibliothek, die die Erstellung komplexer, interaktiver und datengesteuerter Apps so viel einfacher macht. Es bietet eine saubere Möglichkeit, Ihre Daten operativ von Ihrer Präsentation zu trennen.
Backbone wurde von Jeremy Ashkenas, dem JS-Ninja, entwickelt, der CoffeeScript entwickelt hat. Es ist Backend-agnostisch und funktioniert gut mit allen modernen JavaScript-Bibliotheken, die Sie bereits verwenden.
Das Rückgrat ist eine Sammlung zusammenhängender Objekte, die in einem Schatten darunter wiegen 4 kb, Diese Struktur verleiht Ihrem Code eine Struktur und hilft Ihnen beim Erstellen einer richtigen MVC-App im Browser. Die offizielle Seite beschreibt ihren Zweck so:
Backbone bietet Struktur für JavaScript-starke Anwendungen, indem es Modelle mit Schlüsselwertbindung und benutzerdefinierten Ereignissen, Sammlungen mit einer umfangreichen API mit zahlbaren Funktionen, Ansichten mit deklarativer Ereignisbehandlung und über eine RESTful-JSON-Schnittstelle mit Ihrer vorhandenen Anwendung verbindet.
Seien wir ehrlich: Das Obige ist etwas schwer zu analysieren und zu verstehen. Also lasst uns den Jargon mit Hilfe von Jeremy ein wenig dekonstruieren.
Wenn der Inhalt oder Zustand eines Modells geändert wird, werden andere Objekte, die das Modell abonniert haben, benachrichtigt, damit sie entsprechend fortfahren können. Hier hören die Ansichten Änderungen im Modell und aktualisieren sich entsprechend, anstatt dass das Modell manuell mit den Ansichten umgehen muss.
Backbone wird mit einer Reihe sehr nützlicher Funktionen für den Umgang mit Ihren Daten geliefert. Im Gegensatz zu anderen Implementierungen sind Arrays in JavaScript ziemlich kastriert, was beim Umgang mit Daten ein hinderliches Problem darstellt.
Ihre Tage, an denen Sie Spaghetti-Bindungen schreiben, sind vorbei. Sie können programmgesteuert deklarieren, welcher Callback bestimmten Elementen zugeordnet werden muss.
Auch wenn die Standardmethode die Verwendung eines Standard-AJAX-Anrufs ist, wenn Sie mit dem Server kommunizieren möchten, können Sie ihn ganz einfach auf alles, was Sie benötigen, umstellen. Eine Reihe von Adaptern sind aufgetaucht, die die meisten Favoriten abdecken, einschließlich Websockets und lokaler Speicher.
Um es noch einfacher zu fassen:
Das Backbone bietet eine saubere Möglichkeit, Ihre Daten operativ von Ihrer Präsentation zu trennen. Das Modell, das mit den Daten arbeitet, beschäftigt sich nur mit der Synchronisierung mit einem Server, während die Hauptaufgabe der Ansicht das Abhören von Änderungen am abonnierten Modell und das Rendern des HTML-Codes ist.
Ich vermute, Sie sind an diesem Punkt wahrscheinlich etwas irritiert, also lassen Sie uns ein paar Dinge klarstellen:
Nein. Sie sind in ihrem Umfang ziemlich komplementär und haben fast keine Überschneidungen in der Funktionalität. Das Backbone behandelt alle Abstraktionen auf höherer Ebene, während jQuery - oder ähnliche Bibliotheken - mit dem DOM arbeiten, Ereignisse normalisieren und so weiter.
Ihre Anwendungsbereiche und Anwendungsbereiche sind ziemlich unterschiedlich, und weil Sie wissen, dass einer nicht bedeutet, dass Sie den anderen nicht lernen sollten. Als JavaScript-Entwickler sollten Sie wissen, wie Sie mit beiden effektiv arbeiten können.
Da der Front-End-Code meistens in einen dampfenden, schmutzigen Haufen verschachtelter Callbacks, DOM-Manipulationen und HTML-Code für die Präsentation inmitten anderer unsaybarer Vorgänge umgewandelt wird.
Backbone bietet eine wesentlich saubere und elegante Art, dieses Chaos zu bewältigen.
Backbone eignet sich ideal für die Erstellung von datengesteuerten Frontend-Anwendungen. Denken Sie an das GMail-Interface, an neues Twitter oder an eine andere Offenbarung der letzten Jahre. Es macht das Erstellen komplexer Apps einfacher.
Während Sie es für mehr Mainstream-Web verwenden können Seiten, Dies ist wirklich eine Bibliothek, die auf Web-Apps zugeschnitten ist.
Ja und nein.
Ja, denn wie die oben genannten Frameworks ist dies vor allem für die Erstellung komplexer Frontends für Webanwendungen gedacht.
Es ist unähnlich, dass Backbone ziemlich schlank ist und kein Widget enthält, mit dem die anderen ausgeliefert werden.
Das Rückgrat ist mit unter 4 kb unglaublich leicht.
Es ist auch die Tatsache, dass Cappuccino Sie zwingt, Ihren Code in Objective-J zu schreiben, während Sproutcores Ansichten in JS programmgesteuert deklariert werden müssen. Obwohl keine dieser Methoden falsch ist, wird bei Backbone normales JavaScript von Ihrem HTML- und CSS-Lauf verwendet, um die Dinge zu erledigen, was zu einer sanfteren Lernkurve führt.
Absolut. Nicht nur der typische DOM-Zugriff, AJAX-Wrapping-Art, sondern auch der Rest Ihrer Templating- und Script-Loading-Art. Es ist sehr, sehr lose gekoppelt, was bedeutet, dass Sie fast alle Werkzeuge in Verbindung mit Backbone verwenden können.
Nein Entschuldigung. Aber hier ist etwas, was dich aufmuntert.
Ok, jetzt mit dem aus dem Weg, lass uns eintauchen!
Die MVC im Backbone stand ursprünglich für Models, Views und Collections, da es im Controller keine Controller gab. Das hat sich seitdem geändert.
Backbones Kern besteht aus vier Hauptklassen:
Da wir ein wenig Zeit haben, schauen wir uns nur die Kernklassen von heute an. Wir werden ein Follow-up-Tut mit einer super einfachen App durchführen, um die hier gelehrten Konzepte zu demonstrieren, da es zu viel wäre, alles in einen einzigen Artikel zu stecken und zu erwarten, dass der Leser alles analysiert.
Halten Sie Ihre Augen in den nächsten Wochen offen!
Modelle können in verschiedenen Implementierungen von MVC unterschiedliche Bedeutungen haben. In Backbone stellt ein Modell eine einzelne Entität dar - einen Datensatz in einer Datenbank, wenn Sie möchten. Es gibt jedoch keine harten Regeln. Von der Backbone-Website:
Modelle sind das Herzstück jeder JavaScript-Anwendung. Sie enthalten die interaktiven Daten sowie einen Großteil der Logik, die sie umgibt: Konvertierungen, Validierungen, berechnete Eigenschaften und Zugriffskontrolle.
Das Modell bietet Ihnen lediglich die Möglichkeit, beliebige Eigenschaften oder Attribute eines Datensatzes zu lesen und zu schreiben. In diesem Sinne ist der einzelne Liner unten voll funktionsfähig:
var Game = Backbone.Model.extend ();
Lassen Sie uns ein bisschen darauf aufbauen.
Accentsconagua
var Game = Backbone.Model.extend (initialize: function () alert ("Oh hey!");), Standardeinstellungen: Name: 'Default title', releaseDate: 2011,); initialisieren wird ausgelöst, wenn ein Objekt instanziiert wird. Hier mache ich nur Unachtsamkeiten aus - in Ihrer App sollten Sie wahrscheinlich Ihre Daten bootstrapping oder andere Verwaltungsaufgaben ausführen. Ich definiere auch eine Reihe von Standardwerten, falls keine Daten übergeben werden.
Lassen Sie uns einen Blick auf das Lesen und Schreiben von Attributen werfen. Aber zuerst erstellen wir eine neue Instanz.
// Erstelle ein neues Spiel var portal = new Game (name: "Portal 2", releaseDate: 2011); // release wird den releaseDate-Wert enthalten - 2011 hier var release = portal.get ('releaseDate'); // Ändert das Namensattribut portal.set (name: "Portal 2 by Valve"); Wenn du die get / set Mutators bemerkt hast, nimm einen Cookie! Die Attribute eines Modells können nicht durch Ihr typisches object.attribute-Format gelesen werden. Sie müssen den Getter / Setter durchlaufen, da die Wahrscheinlichkeit geringer ist, dass Sie versehentlich Daten ändern.
An dieser Stelle bleiben alle Änderungen nur im Speicher erhalten. Nehmen Sie diese Änderungen dauerhaft vor, indem Sie mit dem Server sprechen.
portal.save ();
Das ist es. Hast du mehr erwartet? Der Einzeiler oben sendet nun eine Anfrage an Ihren Server. Beachten Sie, dass sich die Art der Anforderung auf intelligente Weise ändert. Da dies ein neues Objekt ist, wird POST verwendet. Ansonsten wird PUT verwendet.
Backbone-Modelle bieten viele weitere Funktionen, die Sie jedoch standardmäßig verwenden können. Weitere Informationen erhalten Sie in der Dokumentation.
Sammlungen in Backbone sind im Wesentlichen nur eine Sammlung von Modellen. In Anlehnung an unsere Datenbankanalogie aus früheren Versionen sind Sammlungen die Ergebnisse einer Abfrage, bei der die Ergebnisse aus mehreren Datensätzen [Modellen] bestehen. Sie können eine Sammlung wie folgt definieren:
var GamesCollection = Backbone.Collection.extend (model: Game,);
Das erste, was wir beachten sollten, ist, dass wir definieren, für welches Modell dies eine Sammlung ist. Um unser Beispiel zu erweitern, mache ich aus dieser Sammlung eine Sammlung von Spielen.
Jetzt können Sie mit Ihren Daten nach Herzenslust spielen. Lassen Sie uns beispielsweise die Sammlung erweitern, um eine Methode hinzuzufügen, die nur bestimmte Spiele zurückgibt.
var GamesCollection = Backbone.Collection.extend (model: Game, old: function () return this.filter (function (game) return game.get ('releaseDate')) < 2009; ); ); Das war einfach, nicht wahr? Wir prüfen lediglich, ob ein Spiel vor 2009 veröffentlicht wurde, und wenn ja, geben Sie das Spiel zurück.
Sie können den Inhalt einer Sammlung auch direkt wie folgt bearbeiten:
var games = new GamesCollection games.get (0);
Das obige Snippet instanziiert eine neue Sammlung und ruft das Modell mit der ID 0 ab. Sie können ein Element an einer bestimmten Position finden, indem Sie den Index auf den Index setzen beim Methode wie folgt: games.at (0);
Und schließlich können Sie Ihre Sammlung dynamisch so füllen:
var GamesCollection = Backbone.Collection.extend (model: Game, url: '/ games'); var games = new GamesCollection games.fetch ();
Wir lassen Backbone lediglich, woher die Daten durch das Internet kommen url Eigentum. Damit erstellen wir lediglich ein neues Objekt und rufen das holen Methode, die einen asynchronen Aufruf an den Server auslöst und die Sammlung mit den Ergebnissen auffüllt.
Dies sollte die Grundlagen von Sammlungen mit Backbone abdecken. Wie ich bereits erwähnt habe, gibt es hier eine Menge Goodies, die mit Backbone viele nützliche Hilfsprogramme aus der Underscore-Bibliothek als Aliasing verwenden. Ein kurzes Durchlesen der offiziellen Dokumentation sollte Ihnen den Einstieg erleichtern.
Ansichten im Backbone können auf den ersten Blick etwas verwirrend sein. Für MVC-Puristen ähneln sie eher einem Controller als einer Ansicht selbst.
Eine Ansicht behandelt grundsätzlich zwei Aufgaben:
Lassen Sie uns fortfahren und eine sehr einfache Ansicht erstellen.
GameView = Backbone.View.extend (tagName: "div", className: "game", render: function () // Code zum Rendern des HTML für die Ansicht);
Ziemlich einfach, wenn Sie dieses Tutorial bisher befolgt haben. Ich möchte lediglich angeben, welches HTML-Element verwendet werden soll, um die Ansicht durch das Element zu schließen Verlinke den Namen Attribut sowie die ID dafür durch Klassenname.
Gehen wir weiter zum Rendering-Bereich.
render: function () this.el.innerHTML = this.model.get ('name'); // Oder der jQuery-Weg $ (this.el) .html (this.model.get ('name')); el verweist auf das DOM-Element, auf das die Ansicht verweist. Wir greifen einfach auf den Namen des Spiels zu den Elementen des Elements zu innerHTML Eigentum. Einfach gesagt: die div Element enthält jetzt den Namen unseres Spiels. Natürlich ist der jQuery-Weg einfacher, wenn Sie die Bibliothek zuvor verwendet haben.
Bei komplizierteren Layouts ist der Umgang mit HTML in JavaScript nicht nur langweilig, sondern auch tollkühn. In diesen Szenarien ist das Schablonen der Weg.
Backbone wird mit einer minimalen Vorlagenlösung von Underscore.JS ausgeliefert. Sie können jedoch gerne eine der ausgezeichneten Vorlagenlösungen verwenden.
Abschließend wollen wir uns ansehen, wie Ansichten Ereignisse zuhören. DOM-Ereignisse zuerst.
Ereignisse: 'click .name': 'handleClick', handleClick: function () alert ('Im Namen der Wissenschaft? du Monster'); // Weitere Aktionen nach Bedarf Sollte einfach genug sein, wenn Sie bereits mit Ereignissen gearbeitet haben. Wir definieren und verbinden uns im Grunde Veranstaltungen durch das Ereignisobjekt. Wie Sie oben sehen können, bezieht sich der erste Teil auf das Ereignis, der nächste auf die auslösenden Elemente, während sich der letzte Teil auf die Funktion bezieht, die ausgelöst werden soll.
Und nun zur Bindung von Modellen und Kollektionen. Ich werde hier die Bindung an Modelle behandeln.
GameView = Backbone.View.extend (initialize: function (args) _.bindAll (this, 'changeName'); this.model.bind ('change: name', this.changeName);,; Als Erstes ist zu beachten, wie wir den verbindlichen Code in die initialisieren Funktionen. Natürlich ist es am besten, dies von Anfang an zu tun.
bindAll ist ein von Underscore bereitgestelltes Dienstprogramm, das den Wert einer Funktion beibehält diese Wert. Dies ist besonders nützlich, da wir eine Reihe von Funktionen übergeben und bei Callbacks angegebenen Funktionen dieser Wert gelöscht wird.
Nun, wann immer ein Modell ist Name Attribut wird geändert, das Namen ändern Funktion wird aufgerufen. Sie können auch das nutzen hinzufügen und Löschen Verben, die auf Änderungen abgefragt werden.
Das Abhören von Änderungen in einer Sammlung ist so einfach wie das Ersetzen Modell- mit Sammlung während der Handler an den Rückruf gebunden wird.
Mit Controllern in Backbone können Sie im Wesentlichen bookmarken- und zustandsorientierte Apps erstellen, indem Sie Hashbangs verwenden.
var Hashbangs = Backbone.Controller.extend (routes: "! /": "root", "! / games": "games",, root: function () // Vorbereitung der Startseite und Rendern von Daten , games: function () // Erneutes Rendern von Ansichten, um eine Sammlung von Büchern anzuzeigen,);
Dies ist dem Routing in herkömmlichen MVC-Frameworks auf Servern sehr vertraut. Zum Beispiel, !/ Spiele wird auf die Karte Spiele Funktion, während die URL im Browser selbst ist Domain / #! / Spiele.
Durch die intelligente Verwendung von Hashbangs können Sie Apps erstellen, die stark auf JS basieren, aber auch mit einem Lesezeichen versehen werden können.
Wenn Sie sich Sorgen machen, den Back-Button zu brechen, hat Backbone Sie auch abgedeckt.
// Initiere den Controller wie folgt var ApplicationController = neuer Controller; Backbone.history.start ();
Mit dem obigen Snippet kann Backbone Ihre Hashbangs überwachen und in Verbindung mit den zuvor angegebenen Routen Ihre App bookmarken.
Insgesamt habe ich hier einige Lektionen aus der Backbone-Methode zum Erstellen von Anwendungen gelernt:
Es genügt zu sagen, dass Backbone zumindest für mich einen Paradigmenwechsel bei der Gestaltung von Frontends bewirkt hat. Ich bin mir sicher, dass Sie angesichts des sehr breiten Umfangs des heutigen Artikels eine Menge Fragen haben. Schlagen Sie den Kommentarbereich unten an, um zu läuten. Vielen Dank für das Lesen und erwarten Sie in Zukunft weitere Backbone-Tutorials!
