Hanki halkeilua selkärangalla

Jo vuosien ajan kehittäjät ovat hyödyntäneet PHP-kehyksiä, kuten CakePHP-, CodeIgniter- ja jopa Ruby-kehyksiä, jotka perustuvat MVC-kuvioon. Mutta jos ajattelet sitä, ei ole ollut paljon JavaScript-kehyksiä auttaaksemme meitä samalla tavalla.

Ehkä se johtuu siitä, että "todelliset" ohjelmoijat ovat usein katsoneet JavaScriptä, mutta JavaScript-kehykset ovat aina jääneet hieman jäljelle. Selkäranka muutti tämän, ja kuten tässä esityksessä näet, se käyttää MVC-mallia erillisen JavaScript-koodin erottamiseen ja auttaa luomaan jäsennellyt sovellukset. Itse asiassa se tuottaa MVC-mallin etupään kehitykselle.

Mikä on selkäranka?

Selkäranka on kevyt JavaScript-kirjasto samasta luoja-aineesta CoffeeScript. Mutta älä anna sen, että se kirjasto tekee sinusta sekaannuksen jQueryn kanssa, Backbone on liigat pois jQueryltä, kun se tulee toimivuusominaisuuksiin. Selkäreja ei käsittele DOM-elementtejä, minkä vuoksi monet kehittäjät käyttävät sitä jQueryn kanssa; Selkärangan järjestävä rakenne ja jQuery manipuloivat DOM: ia.

Mikä selkäranka todella toimii toimitussisältösi JavaScript-sovelluksillesi, ja koska se toimii JSONin kanssa, se on helppo lisätä lähes mihin tahansa etupään mallinnusjärjestelmään.

MVC-kuvio selkäpuolella

MVC tarkoittaa mallia, näkemyksiä ja kokoelmia; ja Backbone, joilla on myös reitittimet.

mallit

Runkoverkossa malli edustaa ja muodostaa kokonaisuuden, joten esimerkiksi käyttäjien kanssa, jokainen käyttäjä olisi malli; se on kuin rivillä tietokannassa.

Yksinkertaisen mallin luominen runkoverkon avulla kirjoita:

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

Tämä koodi on teknisesti oikea, mutta mallilla ei ole mitään toimintoja, joten meidän on lisättävä jotain, jotta tämä malli voisi tehdä, kun se instantioituu ja tehdä niin, käytämme hieman monimutkaisempaa koodia:

User = Backbone.Model.extend({initialize: function(){alert('Welcome to {$lang_domain}  ');}, oletusasetukset: {nimi:' John Doe ', ikä: 30,}}); var user = uusi käyttäjä; 

Edellä olevassa koodissa alustustoiminto käynnistyy joka kerta, kun luodaan uusi mallinnus tämän mallin alustuksen jälkeen, kaikki, mitä olemme tehneet, lisää muutamia oletusasetuksia, jos mallia ei siirretä. Kun tämä on tehty, mallin esimerkin luomiseen käytämme koodia, kuten:

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

Jos haluat hakea jonkin tietyn attribuutin, käytämme:

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

Ja muuttamaan määritettä, jota käytämme:

dave.set({age:31});

Tämä on perusteet siitä, miten mallit toimivat runkoverkossa, on paljon enemmän he voivat saavuttaa, mutta toivottavasti näet mahdollisuuden jäsentää koodia jo.

kokoelmat

Muista sanoin, että malli oli kuin käyttäjä? No, tämän analogian jälkeen kokoelma on kaikki käyttäjät, joita meillä on. Kokoelmat ovat pohjimmiltaan mallikokonaisuuksia, ja koska meillä on jo käyttäjämalli, rakennamme kokoelmasta sieltä:

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

Tämä kokoelma on tällä hetkellä tyhjä, mutta on helppo luoda joitain käyttäjiä ja lisätä ne kokoelmaan:

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]);

Nyt, jos konsole.log himym.models saamme arvot barney, ted ja lily.

Luettu

Näkymät on yhdistetty DOM: n osaan, ne on suunniteltu sidottaviksi Mallit, jotka ovat olennaisilta osiltaan sovelluksen tietoja ja jotka palvelevat näiden tietojen esittämistä loppukäyttäjälle.

Näkymän luominen on yksinkertaista:

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

Tämä on näkökulman perusrakenne. TunnisteNimi on elementti, jota käytetään käsittelemään näkymää, luokka asetetaan luokkunimeä käyttäen ja lopuksi lisätään renderointitoiminto, vaikka viimeisessä tapauksessa funktio oli tyhjä. Se on renderointitoiminto, jota käytämme lisätäksesi lavalle, kuten:

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

Renderointitoiminnon el-elementti viittaa kääreeseen, jonka luotiimme ja käyttämällä innerHTML-funktiota, sijoitimme käyttäjän ikä divin sisällä.

Tämä esimerkki ei ole käyttänyt mitään mallinnusjärjestelmää, mutta jos haluat, voit hyödyntää Underscore.js: ää, joka toimitetaan Backbone-laitteella.

Voimme myös kuunnella tapahtumia kiinnittämällä tapahtuman kuuntelijan näkymäänmme ja tässä esimerkissä luomme yksinkertaisen klikkausluettelon divamme (tämä koodi menee välittömästi renderointitoiminnon jälkeen):

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

reitittimet

Selkäreitittimiä käytetään URL-osoitteiden reitittämiseen sovelluksessa, kun käytetään hashtagia (#). Reitittimen määrittämiseksi sinun on aina lisättävä vähintään yksi reitti ja ainakin toiminto, joka suoritetaan, kun haluttu URL-osoite on saavutettu, kuten:

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

Tämä on äärimmäisen yksinkertainen reititin, joka suorittaa toiminnon, kun / # käyttäjän hash on saavutettu. Backbone.history.start () -menetelmäpuhelu pyytää Backbonea tarkistamaan hashtagit, jotta sivuston eri osavaltiot ovat kirjanmerkittavissa ja niitä voidaan käyttää selaimen avulla.

johtopäätös

Tämä artikkeli kattaa vain Backbone-periaatteet, joita voidaan käyttää jäsenneltyjen JavaScript-sovellusten rakentamiseen. Suosittelen, että tutustu mallipohjaiseen järjestelmään käytettäväksi yhdessä runkoverkon kanssa nähdäksesi tämän kirjaston koko potentiaalin. Toivon, että tämä lyhyt esittely on osoittanut, kuinka hyödyllinen MVC voi olla etupäässä.

Oletko rakentanut sovelluksia Backbone-laitteella? Millaisia ​​sovelluksia haluat rakentaa? Kerro meille kommentit.

Esitetty kuva / pikkukuva, rakennusteline kautta Shutterstock.