Í mörg ár hafa verktaki nýtt sér PHP ramma eins og CakePHP, CodeIgniter og jafnvel Ruby ramma byggt á MVC mynstur. En ef þú hugsar um það, hefur ekki verið mikið af JavaScript ramma til að hjálpa okkur út á sama hátt.
Kannski er það vegna þess að JavaScript er oft litið niður af "alvöru" forriturum, en JavaScript ramma hefur alltaf dregið að baki litlu. Burðarás breytt því og eins og þú munt sjá í þessari kynningu notar það MVC mynstur til að aðskilja JavaScript kóða og hjálpa okkur að búa til skipulögð forrit. Í raun skilar það MVC mynstur til framþróunar.
Bakgrunnur er léttur JavaScript bókasafn frá sömu höfund og CoffeeScript. En ekki láta þá staðreynd að það er bókasafn gera þér að rugla því með jQuery, Backbone er rasta í burtu frá jQuery þegar það kemur að virkni. Burðarás hjartarskinn ekki meðhöndla DOM þætti, þess vegna eru margir forritarar að nota það hand í hönd með jQuery; Hringlaga skipulagi og jQuery meðhöndla DOM.
Hvaða Rifbein er mjög vel er að veita uppbyggingu á JavaScript forritunum þínum og vegna þess að það virkar með JSON er það einfalt að setja inn í næstum hvaða framhliðarsnið sem er að framan.
MVC stendur fyrir módel, skoðanir og söfn; og í burðarás, með einnig leiðum.
Í burðarás er líkan táknað og eining, til dæmis, ef við erum að fást við notendur, hver notandi væri líkan; það er eins og röð í gagnagrunni.
Til að búa til einfaldan líkan með því að nota burðarás við myndum:
var user = Backbone.Model.extend({});Þessi kóða er tæknilega rétt en þessi tegund myndi ekki hafa neina virkni, þannig að við þurfum að bæta við eitthvað fyrir þessa gerð til að gera þegar það er komið í stað og við gerum það, þá ættum við að nota aðeins flóknari kóða:
User = Backbone.Model.extend({initialize: function(){alert('Welcome to {$lang_domain} ');}, sjálfgefið: {nafn:' John Doe ', aldur: 30,}}); var notandi = nýr notandi; Í ofangreindum kóðanum verður upphafsstaðinn virkur hvert skipti sem við búum til nýtt dæmi af þessu líkani. Eftir að frumstilla allt sem við höfum gert er að bæta við einhverjum vanskilum ef engar upplýsingar eru sendar fyrir fyrirmyndina. Með því gert, til að búa til dæmi af líkaninu sem við viljum nota kóða eins og:
var dave = new User({name:'Dave Smith', age:25});Til að sækja eigindi tiltekins dæmi viljum við nota:
var name = dave.get('name');Og til að breyta eiginleikum sem við viljum nota:
dave.set({age:31});Þetta er grundvallaratriði hvernig Models vinna í burðarás, það er margt fleira sem þeir geta náð en vonandi geturðu séð möguleika á uppbyggingu kóða þegar.
Mundu að ég sagði að líkan væri eins og notandi? Jæja, eftir þessa hliðstæðu er Safn alla notendur sem við höfum. Söfnin eru í grundvallaratriðum sett af módelum og þar sem við höfum nú þegar notendahópinn okkar, munum við byggja safn þarna:
var Users = Backbone.Collection.extend({model: User});Núna er þetta safn tómt, en það er einfalt að búa til nokkra notendur og bæta þeim við safnið:
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ú, ef við console.log himym.models við munum fá gildi frá Barney, Ted og Lily.
Skoðanir eru tengdir hluta DOM, þau eru hönnuð til að vera bundin við líkönin sem eru í grundvallaratriðum gögnum umsóknarinnar og þau þjóna til að kynna þessar upplýsingar fyrir notandann.
Að búa til skoðun er einfalt:
UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){}});Þetta er grunnur uppbyggingar skoðunar. The tagName er þátturinn sem verður notaður til að vefja sýnina, bekknum er stillt með className og lokum við bættum viðgerðaraðgerð, en í þessu síðasta tilviki var aðgerðin tóm. Það er að gera virka sem við notum til að bæta við sviðið, eins og svo:
UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){this.el.innerHTML = this.model.get('age');}});El þátturinn í aðgerða virka vísar til umbúðirnar sem við bjuggum til og notuðu innriHTML virknina sem við settum aldur notandans inn í div.
Þetta dæmi hefur ekki notað nein templating kerfi, en ef þú vilt getur þú nýtt þér Underscore.js sem skipar með burðarás.
Við getum líka hlustað á atburði með því að tengja viðburðarhlustanda við sýn okkar og í þessu dæmi munum við búa til einfalda smelli sem hlustar á div okkar (þessi kóði fer strax eftir endurheimtanleika okkar):
events:{'click.user': 'divClicked'},divClicked: function(event){alert('You clicked the div');}Beinagrindarleiðir eru notaðir til að beina vefslóðum í forritinu þegar notkunarhættir (#) eru notaðar. Til að skilgreina leið ætti þú alltaf að bæta við að minnsta kosti einum leið og að minnsta kosti aðgerð sem mun birtast þegar viðkomandi URL er náð, eins og svo:
var appRouter = Backbone.Router.extend({routes:{'user': 'userRoute'},userRoute: function() {// the code to run when http://example.com/#user}});Backbone.history.start();Þetta er afar einfalt leið sem mun framkvæma aðgerð þegar / # notandi hefur náð. The Backbone.history.start () aðferð símtalið spyr Bakgrunnur til að fylgjast með hashtags þannig að hin ýmsu ríki vefsvæðisins séu bókamerkin og hægt að fletta með vafranum.
Þessi grein fjallar aðeins um grundvallaratriði í burðarás, sem hægt er að nota til að byggja upp skipulögð forrit í JavaScript. Ég myndi ráðleggja þér að kíkja á templating kerfi til notkunar í tengslum við burðarás til að sjá fullan möguleika þessa bókasafns. Ég vona að þessi stutta kynningar hafi sýnt þér hversu gagnlegt MVC er á framhliðinni.
Hefur þú byggt upp forrit með burðarás? Hvaða tegund af umsókn viltu byggja? Láttu okkur vita í athugasemdunum.