Få sprekker med ryggraden

I årevis har utviklere benyttet seg av PHP-rammer som CakePHP, CodeIgniter og til og med Ruby-rammer basert på MVC-mønsteret. Men hvis du tenker på det, har det ikke vært mange JavaScript-rammer for å hjelpe oss ut på samme måte.

Kanskje det skyldes at JavaScript ofte settes ned av "ekte" programmerere, men JavaScript-rammer har alltid ligget litt etter litt. Backbone endret det, og som du vil se i denne introduksjonen, bruker den MVC-mønsteret til å skille JavaScript-kode og hjelpe oss med å lage strukturerte applikasjoner. Faktisk leverer det MVC-mønsteret til front-end-utvikling.

Hva er ryggrad?

Backbone er et lett JavaScript-bibliotek fra samme skaperen som CoffeeScript. Men ikke la det faktum at det er et bibliotek få deg til å forvirre det med jQuery, Backbone er ligaer unna jQuery når det gjelder funksjonalitet. Ryggraden håndterer ikke DOM-elementer, og det er derfor mange utviklere bruker den hånd i hånd med jQuery; Ryggrad organisering struktur og jQuery manipulere DOM.

Hva Ryggraden gjør veldig bra, er å levere strukturen til JavaScript-applikasjonene, og fordi det fungerer med JSON, er det enkelt å sette inn i nesten hvilket som helst front-end templating system.

MVC-mønsteret i ryggraden

MVC står for modeller, synspunkter og samlinger; og i ryggraden, med også router.

modeller

I Backbone representerer en modell og enhet, for eksempel hvis vi har å gjøre med brukere, vil hver bruker være en modell; Det er som en rad i en database.

For å lage en enkel modell ved hjelp av Ryggraden, ville vi skrive:

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

Denne koden er teknisk riktig, men den modellen ville ikke ha noen funksjonalitet, så vi må legge til noe for denne modellen å gjøre når det er instantiated og å gjøre det, ville vi bruke litt mer komplisert kode:

User = Backbone.Model.extend({initialize: function(){alert('Welcome to {$lang_domain}  ');}, standard: {navn:' John Doe ', alder: 30,}}); var user = ny bruker; 

I den ovennevnte koden blir initieringsfunksjonen utløst hver gang vi lager en ny forekomst av denne modellen. Etter initialiseringen er alt vi har gjort, legg til noen standardverdier hvis ingen data sendes inn for modellen. Med det gjort, for å lage en forekomst av modellen, ville vi bruke kode som:

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

For å hente et attributt for en bestemt forekomst, bruker vi:

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

Og for å endre en attributt vi ville bruke:

dave.set({age:31});

Dette er grunnleggende om hvordan Modeller jobber i Backbone, det er mye mer de kan oppnå, men forhåpentligvis kan du se potensialet for å strukturere kode allerede.

samlinger

Husk jeg sa at en modell var som en bruker? Vel, etter den analogien er en samling alle brukerne vi har. Samlinger er i hovedsak sett med Modeller, og siden vi allerede har vår brukermodell, bygger vi en samling derfra:

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

For øyeblikket er denne samlingen tom, men det er enkelt å lage noen brukere og legge dem til 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]);

Nå, hvis vi console.log himym.models får vi verdiene fra barney, ted og lily.

Visninger

Visninger er knyttet til en del av DOM, de er utformet for å være knyttet til modellene som egentlig er dataene i søknaden, og de tjener til å presentere disse dataene til sluttbrukeren.

Å lage en visning er enkel:

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

Dette er grunnstrukturen til en visning. Tagnavnet er elementet som skal brukes til å vikle visningen, klassen er satt ved hjelp av klassenavnet, og til slutt legger vi til en gjengivelsesfunksjon, selv om funksjonen i dette siste tilfelle var tom. Det er gjengivelsesfunksjonen som vi bruker til å legge til scenen, slik som:

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

El-elementet i gjengivelsesfunksjonen refererer til omslaget vi opprettet og bruker innerHTML-funksjonen, som vi plasserte brukerens alder inne i div.

Dette eksemplet har ikke brukt noe templeringssystem, men hvis du vil, kan du dra nytte av Underscore.js som leveres med Backbone.

Vi kan også høre på hendelser ved å knytte en hendelselytter til vårt syn, og i dette eksempelet vil vi opprette en enkel klikklytter for vår div (denne koden går straks etter vår gjengivelsesfunksjon):

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

rutere

Ryggradsledere brukes til å dirigere nettadressene i programmet når du bruker hashtags (#). For å definere en ruter bør du alltid legge til minst én rute og minst en funksjon som vil løpe når den ønskede nettadressen er nådd, slik som:

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

Dette er en ekstremt enkel ruter som vil utføre en handling når / # brukerens hash nås. Metoden Backbone.history.start () -metoden spør Ryggraden for å overvåke hashtags slik at de ulike tilstandene til nettstedet er bokmerket og kan navigeres med nettleseren.

Konklusjon

Denne artikkelen dekker bare selve grunnleggende for Backbone, som kan brukes til å bygge strukturerte applikasjoner i JavaScript. Jeg vil råde deg til å sjekke ut templeringssystemet for bruk sammen med Backbone for å se det fulle potensialet i dette biblioteket. Jeg håper at disse korte introduksjonene har vist deg hvor nyttig MVC kan være på forsiden.

Har du bygget applikasjoner med Backbone? Hvilke typer applikasjoner vil du bygge? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde, stillasbilde via Shutterstock.