Under flera år har utvecklare utnyttjat PHP-ramar som CakePHP, CodeIgniter och till och med Ruby-ramar baserade på MVC-mönstret. Men om du funderar på det, har det inte funnits många JavaScript-ramar för att hjälpa oss på samma sätt.
Kanske beror det på att JavaScript ofta tittas på av "riktiga" programmerare, men JavaScript-ramar har alltid släpat efter lite. Ryggrad ändrade det, och som du ser i denna introduktion använder den MVC-mönstret för att skilja JavaScript-kod och hjälpa oss att skapa strukturerade applikationer. I själva verket levererar det MVC-mönstret till framsidans utveckling.
Backbone är ett lättvikts JavaScript-bibliotek från samma skapare som CoffeeScript. Men låt inte det faktum att det är ett bibliotek gör att du förvirrar det med jQuery. Backbone är ligor borta från jQuery när det gäller funktionalitet. Ryggraden hanterar inte DOM-element, varför många utvecklare använder den hand i hand med jQuery; Ryggradsorganisationsstruktur och jQuery manipulerar DOM.
Vilken ryggrad gör det bra är att leverera strukturen till dina JavaScript-applikationer, och eftersom det fungerar med JSON är det enkelt att infoga i nästan vilket som helst front-end templeringssystem.
MVC står för Modeller, Visningar och Samlingar; och i ryggraden, med också router.
I Backbone representerar en modell och enhet, till exempel om vi har att göra med användare, skulle varje användare vara en modell; Det är som en rad i en databas.
För att skapa en enkel modell med hjälp av Ryggraden skulle vi skriva:
var user = Backbone.Model.extend({});Den koden är tekniskt korrekt, men den modellen skulle inte ha någon funktionalitet, så vi måste lägga till något för den här modellen att göra när den är instanserad och för att göra det skulle vi använda lite mer komplex kod:
User = Backbone.Model.extend({initialize: function(){alert('Welcome to {$lang_domain} ');}, standard: {namn:' John Doe ', ålder: 30,}}); var användare = ny användare; I ovanstående kod kommer initieringsfunktionen att trigga varje gång vi skapar en ny instans av denna modell. Efter att initialisera allt vi har gjort lägger vi till några standardvärden om ingen data skickas in för modellen. Med det gjort, för att skapa en förekomst av modellen skulle vi använda kod som:
var dave = new User({name:'Dave Smith', age:25});För att hämta ett attribut av en viss instans skulle vi använda:
var name = dave.get('name');Och för att ändra ett attribut vi skulle använda:
dave.set({age:31});Det här är grunderna för hur Modeller arbetar i Backbone, det finns mycket mer de kan uppnå, men förhoppningsvis kan du se möjligheten att strukturera kod redan.
Kom ihåg att jag sa att en modell var som en användare? Tja, efter denna analogi är en samling alla användare vi har. Samlingar är i grunden uppsättningar av modeller, och eftersom vi redan har vår användarmodell bygger vi en samling därifrån:
var Users = Backbone.Collection.extend({model: User});För tillfället är den här samlingen tom, men det är enkelt att skapa några användare och lägga till dem i samlingen:
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]);Nu, om vi console.log himym.models får vi värdena från barney, ted och lily.
Visningar är förknippade med en del av DOM, de är utformade för att vara knutna till Modellerna, som i huvudsak är data i applikationen och de tjänar till att presentera dessa data för slutanvändaren.
Att skapa en vy är enkelt:
UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){}});Detta är den grundläggande strukturen i en vy. Tagnamnet är det element som ska användas för att paketera vyn, klassen är inställd med klassnamnet och till sist lägger vi till en renderfunktion, även om det i det här fallet var funktionen tom. Det är den renderfunktion som vi använder för att lägga till scenen, som så:
UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){this.el.innerHTML = this.model.get('age');}});Elelementet i renderfunktionen hänvisar till det omslag vi skapade och använder den inreHTML-funktionen som vi lade användarens ålder inuti div.
Detta exempel har inte använt något templerande system, men om du vill kan du dra nytta av Underscore.js som skickas med Backbone.
Vi kan också lyssna på händelser genom att bifoga en händelselyssnare till vår åsikt och i det här exemplet skapar vi en enkel klicklistor för vår div (den här koden går direkt efter vår renderfunktion):
events:{'click.user': 'divClicked'},divClicked: function(event){alert('You clicked the div');}Ryggradsledare används för att dirigera webbadresserna i programmet när du använder hashtags (#). För att definiera en router bör du alltid lägga till åtminstone en rutt och åtminstone en funktion som ska köras när den önskade webbadressen uppnås, så här:
var appRouter = Backbone.Router.extend({routes:{'user': 'userRoute'},userRoute: function() {// the code to run when http://example.com/#user}});Backbone.history.start();Detta är en extremt enkel router som kommer att utföra en åtgärd när / # användarens hash nås. Metodsamtalet Backbone.history.start () ber Ryggrad för att övervaka hashtags så att de olika delarna på webbplatsen är bokmärkliga och kan navigeras i webbläsaren.
Den här artikeln täcker bara de grundläggande grunderna i Backbone, som kan användas för att bygga strukturerade applikationer i JavaScript. Jag skulle råda dig att kolla in templeringssystemet för användning tillsammans med Backbone för att se hela bibliotekets potential. Jag hoppas att de här korta introduktionerna har visat dig hur användbart MVC kan vara på fronten.
Har du byggt program med Backbone? Vilken typ av ansökan vill du bygga? Låt oss veta i kommentarerna.
Utvalda bild / miniatyrbild, ställningsbild via Shutterstock.