Holen Sie sich Cracking mit Backbone

Seit Jahren nutzen Entwickler PHP-Frameworks wie CakePHP, CodeIgniter und sogar Ruby-Frameworks basierend auf dem MVC-Pattern. Aber wenn Sie darüber nachdenken, gab es nicht viele JavaScript-Frameworks, um uns auf die gleiche Weise zu helfen.

Vielleicht liegt es daran, dass JavaScript oft von "echten" Programmierern abgelehnt wird, aber JavaScript-Frameworks sind immer ein wenig zurückgeblieben. Rückgrat Dies hat sich geändert, und wie Sie in dieser Einführung sehen werden, verwendet es das MVC-Muster, um JavaScript-Code zu trennen und uns bei der Erstellung strukturierter Anwendungen zu helfen. In der Tat liefert es das MVC-Muster für die Front-End-Entwicklung.

Was ist Backbone?

Backbone ist eine leichte JavaScript-Bibliothek vom selben Ersteller wie KaffeeScript. Aber lass dich nicht davon abhalten, dass es eine Bibliothek ist, die dich mit jQuery verwechselt. Backbone ist in Bezug auf Funktionalität ligaweit von jQuery entfernt. Backbone behandelt keine DOM-Elemente, weshalb viele Entwickler Hand in Hand mit jQuery arbeiten; Backbone Organisationsstruktur und jQuery Manipulation des DOM.

Was Backbone wirklich gut macht, ist die Angebotsstruktur für Ihre JavaScript-Anwendungen, und da es mit JSON funktioniert, ist es einfach, es in fast jedes Front-End-Templating-System einzufügen.

Das MVC-Muster in Backbone

MVC steht für Models, Views und Collections; und im Backbone, mit Router.

Modelle

In Backbone repräsentiert ein Modell und eine Entität. Wenn wir also beispielsweise mit Benutzern arbeiten, wäre jeder Benutzer ein Model; Es ist wie eine Zeile in einer Datenbank.

Um ein einfaches Modell mit Backbone zu erstellen, geben wir Folgendes ein:

var user = Backbone.Model.extend({});

Dieser Code ist technisch korrekt, aber Model hätte keine Funktionalität. Daher müssen wir etwas hinzufügen, damit dieses Modell instanziiert wird. Dazu würden wir etwas komplexeren Code verwenden:

User = Backbone.Model.extend({initialize: function(){alert('Welcome to {$lang_domain}  ');}, Standardwerte: {Name:' John Doe ', Alter: 30,}}); var user = new User; 

Im obigen Code wird die Initialisierungsfunktion jedes Mal ausgelöst, wenn wir eine neue Instanz dieses Modells erstellen. Nach der Initialisierung werden lediglich einige Standardwerte hinzugefügt, falls keine Daten für das Modell übergeben werden. Nachdem wir damit eine Instanz des Modells erstellt haben, verwenden wir Code wie:

var dave = new User({name:'Dave Smith', age:25});

Um ein Attribut einer bestimmten Instanz abzurufen, verwenden wir:

var name = dave.get('name');

Um ein Attribut zu ändern, verwenden wir:

dave.set({age:31});

Dies ist die Grundlage dafür, wie Models in Backbone arbeiten, es gibt noch viel mehr, was sie erreichen können, aber hoffentlich sehen Sie bereits das Potenzial für die Strukturierung von Code.

Sammlungen

Denken Sie daran, ich sagte, dass ein Modell wie ein Benutzer war? Nun, nach dieser Analogie ist eine Sammlung all die Benutzer, die wir haben. Sammlungen sind im Wesentlichen Sets von Modellen, und da wir bereits unser Benutzermodell haben, werden wir von dort aus eine Sammlung erstellen:

var Users = Backbone.Collection.extend({model: User});

Derzeit ist diese Sammlung leer, aber es ist einfach, einige Benutzer zu erstellen und sie der Sammlung hinzuzufügen:

var barney = new User({ name: 'Barney Stinson', age: 30});var ted = new User({ name: 'Ted Mosby', age:32});var lily = new User({ name: 'Lily Aldrin', age: 29});var himym = new Users([barney, ted, lily]);

Wenn wir nun himym.models console.log verwenden, erhalten wir die Werte von barney, ted und lily.

Ansichten

Ansichten sind einem Teil des DOM zugeordnet, sie sind so konzipiert, dass sie an die Modelle gebunden sind, die im Wesentlichen die Daten der Anwendung sind, und sie dienen dazu, diese Daten dem Endbenutzer zu präsentieren.

Das Erstellen einer Ansicht ist einfach:

UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){}});

Dies ist die Grundstruktur einer Ansicht. Der TagName ist das Element, das zum Umbrechen der Ansicht verwendet wird, die Klasse wird mit dem Klassennamen festgelegt, und schließlich fügen wir eine Renderfunktion hinzu, obwohl die Funktion in diesem letzten Fall leer war. Es ist die Render-Funktion, die wir verwenden, um die Bühne so zu ergänzen:

UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){this.el.innerHTML = this.model.get('age');}});

Das Element el in der Renderfunktion bezieht sich auf den von uns erstellten Wrapper und mit der Funktion innerHTML haben wir das Alter des Benutzers innerhalb des div platziert.

In diesem Beispiel wurde kein Templating-System verwendet. Wenn Sie jedoch möchten, können Sie Underscore.js nutzen, das mit Backbone ausgeliefert wird.

Wir können auch Ereignisse abhören, indem wir einen Ereignis-Listener an unsere Ansicht anhängen. In diesem Beispiel erstellen wir einen einfachen Klick-Listener für unser div (dieser Code wird direkt nach der Render-Funktion eingefügt):

events:{'click.user': 'divClicked'},divClicked: function(event){alert('You clicked the div');}

Router

Backbone-Router werden zum Routing der URLs in der Anwendung verwendet, wenn Hashtags (#) verwendet werden. Um einen Router zu definieren, sollten Sie immer mindestens eine Route und mindestens eine Funktion hinzufügen, die ausgeführt wird, wenn die gewünschte URL erreicht ist.

var appRouter = Backbone.Router.extend({routes:{'user': 'userRoute'},userRoute: function() {// the code to run when http://example.com/#user}});Backbone.history.start();

Dies ist ein extrem einfacher Router, der eine Aktion ausführt, wenn der / # Benutzer Hash erreicht ist. Der Methodenaufruf Backbone.history.start () fordert Backbone auf, die Hashtags zu überwachen, damit die verschiedenen Status der Site als Lesezeichen gespeichert werden können und mit dem Browser navigiert werden können.

Fazit

Dieser Artikel behandelt nur die Grundlagen von Backbone, mit denen strukturierte Anwendungen in JavaScript erstellt werden können. Ich rate Ihnen, das Templating-System in Verbindung mit Backbone zu testen, um das volle Potenzial dieser Bibliothek zu sehen. Ich hoffe, dass diese kurzen Einführungen Ihnen gezeigt haben, wie nützlich MVC im Frontend sein kann.

Haben Sie Anwendungen mit Backbone erstellt? Welche Art von Anwendung möchten Sie erstellen? Lassen Sie es uns in den Kommentaren wissen.

Ausgewähltes Bild / Vorschaubild, Gerüstbild über Shutterstock.