Få knæk med rygraden

I årevis har udviklere udnyttet PHP-rammer som CakePHP, CodeIgniter og endda Ruby-rammer baseret på MVC-mønstret. Men hvis du tænker på det, har der ikke været mange JavaScript-rammer til at hjælpe os ud på samme måde.

Måske skyldes det, at JavaScript ofte ses ned af "rigtige" programmører, men JavaScript-rammer har altid slået bag lidt. Rygrad ændret det, og som du vil se i denne introduktion, bruger den MVC-mønstret til at adskille JavaScript-kode og hjælpe os med at oprette strukturerede applikationer. Faktisk leverer det MVC-mønstret til front-end-udvikling.

Hvad er rygraden?

Backbone er et letvægts JavaScript-bibliotek fra samme skaber som CoffeeScript. Men lad ikke det faktum, at det er et bibliotek gør dig forvirre det med jQuery, Backbone er ligaer væk fra jQuery, når det kommer til funktionalitet. Backbone håndterer ikke DOM-elementer, hvorfor mange udviklere bruger det hånd i hånd med jQuery; Backbone organisering struktur og jQuery manipulere DOM.

Hvad Backbone gør rigtig godt, er leveringsstruktur til dine JavaScript-applikationer, og fordi det virker sammen med JSON, er det nemt at indsætte i næsten ethvert front-end templating system.

MVC mønsteret i rygraden

MVC står for modeller, visninger og samlinger; og i Backbone, med også router.

modeller

I Backbone repræsenterer en model og enhed, for eksempel, hvis vi beskæftiger os med brugere, vil hver bruger være en model; Det er som en række i en database.

For at oprette en simpel model ved hjælp af Backbone, ville vi skrive:

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

Denne kode er teknisk korrekt, men den model ville ikke have nogen funktionalitet, så vi skal tilføje noget til denne model at gøre, når det er instantiated, og for at gøre det, ville vi bruge lidt mere kompleks kode:

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

I ovenstående kode udløses initialiseringsfunktionen hver gang vi opretter en ny forekomst af denne model. Efter initialisering er alt, hvad vi har lavet, tilføjet nogle standardværdier, hvis der ikke sendes data til Model. Med det gjort, for at skabe et eksempel på modellen, ville vi bruge kode som:

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

For at hente en egenskab af en bestemt forekomst, ville vi bruge:

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

Og for at ændre en attribut vi ville bruge:

dave.set({age:31});

Dette er grunden til, hvordan Modeller arbejder i Backbone, der er meget mere, de kan opnå, men forhåbentlig kan du se muligheden for at strukturere kode allerede.

Samlinger

Husk jeg sagde, at en model var som en bruger? Nå, efter denne analogi er en samling alle de brugere, vi har. Samlinger er i det væsentlige sæt af modeller, og da vi allerede har vores brugermodel, opbygger vi en samling derfra:

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

I øjeblikket er denne samling tom, men det er nemt at oprette nogle brugere og føje 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]);

Nu, hvis vi console.log himym.models får vi værdierne fra barney, ted og lily.

visninger

Visninger er forbundet med en del af DOM, de er designet til at være knyttet til de modeller, der i det væsentlige er dataene i applikationen, og de tjener til at præsentere disse data til slutbrugeren.

Oprettelse af en visning er enkel:

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

Dette er den grundlæggende struktur for en visning. Tagnavnet er det element, der vil blive brugt til at pakke visningen, klassen er indstillet ved hjælp af klassenavnet og endelig tilføjer vi en gengivelsesfunktion, selvom funktionen i dette sidste tilfælde var tom. Det er den renderfunktion, som vi bruger til at føje til scenen, som sådan:

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

El-elementet i render-funktionen refererer til den indpakning, vi skabte, og ved hjælp af innerhTML-funktionen placerede vi brugerens alder inden for div.

Dette eksempel har ikke brugt nogen templating system, men hvis du vil kan du drage fordel af Underscore.js, der sendes med Backbone.

Vi kan også lytte til begivenheder ved at vedhæfte en begivenhedslytter til vores synspunkt og i dette eksempel opretter vi et enkelt klik lytter til vores div (denne kode går straks efter vores render funktion):

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

Routere

Backbone Routers bruges til at routere webadresserne i applikationen, når der bruges hashtags (#). For at definere en router skal du altid tilføje mindst én rute og mindst en funktion, der vil køre, når den ønskede URL er nået, som sådan:

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 router, der vil udføre en handling, når / # bruger hash er nået. Backbone.history.start () metodeopkaldet spørger Backbone for at overvåge hashtags, så de forskellige tilstande på webstedet er bogmærke og kan navigeres med browseren.

Konklusion

Denne artikel dækker kun de grundlæggende grunde til Backbone, som kan bruges til at opbygge strukturerede applikationer i JavaScript. Jeg vil råde dig til at tjekke det templerende system til brug sammen med Backbone for at se det fulde potentiale i dette bibliotek. Jeg håber, at disse korte introduktioner har vist dig, hvor nyttigt MVC kan være på forsiden.

Har du bygget applikationer med Backbone? Hvilke typer applikationer vil du gerne bygge? Lad os vide i kommentarerne.

Fremhævet billede / miniaturebillede, stilladsbillede via Shutterstock.