Saturs
- Sāksim tad
- Mūsu pirmais modelis
- Attēlu kolekcija
- FlickrBombImage
- Skata slānis
- FlickrBombImageView
- Mājas stiept
- Lieliski darbojas arī ar lielām tīmekļa lietotnēm
- Papildu resursi
Ja vēlaties ātri izveidot nelielu JavaScript rīku, iespējams, nedomājat par ietvara izmantošanu. Vieglāk uzlauzt kādu jQuery kodu, nevis instalēt un iemācīties jaunu ietvaru, vai ne? Nepareizs, Backbone.js ir ļoti viegls līmes ietvars, kas izskatās gluži kā parasts vecais JavaScript, kuru esat pieradis rakstīt.
Šeit, ZURB, mēs darām daudz statisku prototipu, jo mums patīk, ja mēs varam klikšķināt pa lapām, nerakstot aizmugures kodu. Bieži vien mēs samazinājāmies pelēkos viettura attēlos, vai dažreiz mēs meklējām Flickr attēlu paraugus, lai palīdzētu mums vizualizēt, kas varētu ietilpt galīgajā melnrakstā. Tas ir līdz vienai maģiskai piektdienai, kad mēs nolēmām, ka būtu lieliski uzrakstīt JavaScript, lai atrisinātu mūsu problēmas. Mēs vēlējāmies, lai Flickr varētu meklēt un atlasīt fotoattēlus tieši no pašiem viettura attēliem. Mēs to sauktu par FlickrBomb, un tas ir stāsts par to, kā mēs to uzbūvējām, izmantojot Backbone.js.
Pirms lasīšanas ir ļoti ieteicams ātri apskatīt FlickrBomb. Tas ir viens no šiem “klikšķis ir vērts tūkstoš vārdu” veida piedāvājumiem. Uz priekšu, mēs gaidīsim.
Mūsdienās blokā ir daudz JavaScript ietvaru, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Bet Backbone.js mums patika šim konkrētajam projektam dažu dažādu iemeslu dēļ:
1. Tas ir viegls (faktiski bez taukiem)
- svarā, un jaunākā iesaiņotā versija ir aptuveni 4,6 KB
- kodā, kas ir nedaudz virs 1000 koda rindiņām, nav ļoti grūti sekot kaudzes izsekošanai iekšpusē, nezaudējot prātu
2. Tas izskatās kā JavaScript
- jo tas ir JavaScript, tas ir viss, un tas ir viss
- tajā tiek izmantots jQuery, kuru mūsdienās zina pat tava vecmāmiņa
3. Ļoti vienkārša neatlaidība
- no kastes tas saglabā datus aizmugurē (izmantojot REST), bet, nometot vienu spraudni, tas tiks saglabāts vietējā atmiņā
- tāpēc, ka tas abstrahē noturības API, mēs varētu to saglabāt REST aizmugurē, vienkārši noņemot vietējās krātuves spraudni
Sāksim tad
Tā kā Backbone.js ir tikai JavaScript, viss, kas mums jādara, ir to iekļaut lapā kopā ar Underscore.js. jQuery pati par sevi nav atkarīga no mugurkaula, taču mēs to izmantosim, tāpēc to iekļausim šeit. Mēs saistīsim arī vietējās krātuves spraudni, jo mēs nevēlamies apgrūtināt aizmugures iestatīšanu. Ņemiet vērā, ka vienkāršības labad šeit tika tieši sasaistīti faili, taču ražošanas procesā vienmēr vajadzētu mitināt savus resursus.
skripts src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> / skripts> skripts src = "http://documentcloud.github.com/backbone/ mugurkauls-min.js "> / skripts> skripts src =" http://documentcloud.github.com/underscore/underscore-min.js "> / skripts> skripts src =" https://raw.github.com/ jeromegn / Backbone.localStorage / master / backbone.localStorage-min.js "> / skripts>
Viss nākamais šī raksta kods ir specifisks mūsu lietojumprogrammai, tāpēc mēs varam to iekļaut failā app.js vai vienkārši ievietot, ja tā ir jūsu lieta. Vienkārši atcerieties to iekļaut pēc mugurkaula. Mugurkauls ļauj abstrahēt mūsu lietojumprogrammas daļas, lai padarītu tās gan modulāras, lai tās varētu viegli izmantot atkārtoti, gan citiem. Lai vislabāk ilustrētu šo abstrakciju, mēs izskaidrojām FlickrBomb dizainu no apakšas uz augšu, sākot ar modeļiem un beidzot ar skatiem.
Mūsu pirmais modelis
Pirmais uzdevums bija ķerties pie fotogrāfiju atvilkšanas no Flickr. FlickrImage modelēšana mugurkaulā ir pietiekami vienkārša, mēs izveidosim jaunu modeli ar nosaukumu FlickrImage un pievienosim dažas metodes, kas palīdzēs mums iegūt dažāda lieluma īkšķus.
var FlickrImage = Backbone.Model.extend ({fullsize_url: function () {return this.image_url ('medium');}, thumb_url: function () {return this.image_url ('square');}, image_url: function ( size) {var size_code; switch (size) {case 'square': size_code = '_s'; break; // 75x75 case 'medium': size_code = '_z'; break; // 640 uz garākā sānu korpusa 'liels ': size_code =' _b '; break; // 1024 uz garākās malas noklusējuma: size_code =' ';} return "http: // farm" + this.get (' farm ') + ".static.flickr.com / "+ this.get ('serveris') +" / "+ this.get ('id') +" _ "+ this.get ('slepenais') + size_code +" .webp ";}})
Mugurkaula modeļi ir objekti, kurus var saglabāt, un ar tiem ir saistītas dažas funkcijas, līdzīgi kā citu MVC ietvaru modeļi. Mugurkaula modeļu maģiskā daļa ir tā, ka mēs varam saistīt notikumus ar atribūtiem, lai, mainoties šim atribūtam, mēs varētu atjaunināt savus uzskatus, lai to atspoguļotu. Bet mēs esam mazliet priekšā sev.
Izvelkot fotoattēlus no Flickr, mēs iegūsim pietiekami daudz informācijas, lai izveidotu vietrāžus URL visiem izmēriem. Tomēr šī montāža ir atstāta mūsu ziņā, tāpēc mēs ieviesām funkciju .image_url (), kas ņem parametru lielums un atgriež publisko saiti. Tā kā tas ir mugurkaula modelis, mēs varam izmantot šo.get (), lai piekļūtu modeļa atribūtiem. Tātad, izmantojot šo modeli, citur kodā mēs varam rīkoties šādi, lai iegūtu Flickr attēla URL.
flickrImage.image_url (’liels’)
Diezgan kodolīgi, vai ne? Tā kā šis modelis ir specifisks mūsu lietojumprogrammai, mēs pievienosim dažas iesaiņošanas funkcijas pilna izmēra un īkšķa attēlu izmēriem.
Attēlu kolekcija
FlickrBomb nodarbojas ar attēlu kolekcijām, nevis atsevišķiem attēliem, un mugurkaulam ir ērts veids, kā to modelēt. Pareizi nosaukta kolekcija ir tas, ko mēs izmantosim, lai grupētu Flickr attēlus vienam vietturim.
var FlickrImages = Backbone.Collection.extend ({modelis: FlickrImage, atslēga: flickrbombAPIkey, lapa: 1, fetch: funkcija (atslēgvārdi, panākumi) {var self = this; success = success || $ .noop; this.keywords = keywords || this.keywords; $ .ajax ({url: 'http://api.flickr.com/services/rest/', data: {api_key: self.key, format: 'json', method: 'flickr. photos.search ', tagi: this.keywords, per_page: 9, page: this.page, licence: flickrbombLicenseTypes}, dataType:' jsonp ', jsonp:' jsoncallback ', veiksme: funkcija (atbilde) {self.add (atbilde .photos.photo); success ();}});}, nextPage: function (callback) {this.page + = 1; this.remove (this.models); this.fetch (null, callback);}, prevPage: function (callback) {if (this.page> 1) {this.page - = 1;} this.remove (this.models); this.fetch (null, atzvanīšana);}});
Šeit ir jāatzīmē pāris lietas. Pirmkārt, modeli atribūts norāda kolekcijām, kāda veida modeli tā kolekcionē. Mums ir arī daži atribūti, kurus mēs inicializējām izmantošanai vēlāk: atslēga ir mūsu Flickr API atslēga. Jūs vēlaties aizstāt flickrbombAPIkey ar savas Flickr API atslēgas virkni. Flickr API atslēgas iegūšana ir bezmaksas un vienkārša, vienkārši sekojiet šai saitei: www.flickr.com/services/api/misc.api_keys.html. Lapas atribūts ir pašreizējā Flickr fotoattēlu lapa, kurā atrodamies.
Lielā metode šeit ir .fetch (), kas attēlo fotoattēlu izvilkšanas detaļas no Flickr API. Lai izvairītos no starpdomēnu pieprasījumu problēmām, mēs izmantojam JSONP, kuru atbalsta gan Flickr API, gan jQuery. Pārējiem parametriem, kurus mēs nododam API, jābūt pašsaprotamiem. Īpašu interesi šeit izsauc mugurkaula funkcijas. Veiksmes atzvanā mēs izmantojam funkciju .add (), kas ņem modeļa atribūtu masīvu, no šiem atribūtiem izveido modeļa gadījumus un pēc tam tos pievieno kolekcijai.
Funkcijas .nextPage () un .prevPage () vispirms maina lapu, kuru vēlamies parādīt,
izmantojiet kolekcijas funkciju .remove (), lai no programmas noņemtu visus esošos modeļus
kolekciju un pēc tam piezvaniet, lai iegūtu fotoattēlus pašreizējai lapai (ko mēs vienkārši
mainīts).
FlickrBombImage
Dodoties atpakaļ uz augšu, mums ir nepieciešams vēl viens modelis, lai attēlotu viettura attēlu, kas sastāvēs no FlickrImages kolekcijas un pašreizējā FlickrImage, kas ir izvēlēts. Mēs šo modeli sauksim par FlickrBombImage.
var localStorage = (atbalsta_local_storage ())? jauns veikals ("flickrBombImages"): null; var FlickrBombImage = Backbone.Model.extend ({localStorage: localStorage, inicializēt: function () {_.bindAll (this, 'loadFirstImage'); this.flickrImages = new FlickrImages (); this.flickrImages.fetch (this.get ('atslēgvārdi'), this.loadFirstImage); this.set (id: this.get ("id")); this.bind ('change: src', this.changeSrc) ;}, changeSrc: function () {this.save ();}, loadFirstImage: function () {if (this.get ('src') === undefined) {this.set ({src: this.flickrImages. pirmais (). image_url ()});}}});
Tā kā šis modelis ir atbildīgs par pašreiz izvēlētā attēla izsekošanu starp lapas ielādēm, tam jāzina, kādu vietējo veikalu veikalu izmantot.Pirmā rinda nodrošinās atbalstu vietējai uzglabāšanai, un pēc tam izveidojiet veikalu, kuru izmantosim, lai saglabātu atlasīto attēlu.
Mugurkauls ļauj mums definēt .initialize () funkciju, kas tiks izsaukta, kad tiks izveidots modeļa gadījums. Mēs izmantojam šo funkciju FlickrBombImage, lai izveidotu jaunu FlickrImages kolekcijas gadījumu, nodotu garām atslēgvārdus, kas tiks izmantoti šim attēlam, un pēc tam atnest attēlus no Flickr.
Funkcija .loadFirstImage () ir nodota kā atzvanīšana, lai palaistu, kad attēli ir ielādēti no Flickr. Kā jūs droši vien varat nojaust, šī funkcija pašreizējo attēlu iestata kā pirmo Flickr kolekcijas attēlu. Tas to nedara, ja pašreizējais attēls jau ir iestatīts.
Mēs izmantosim arī Backbone atribūtu atzvanus, lai aktivizētu mūsu .changeSrc () funkciju, kad mainās šī modeļa src atribūts. Viss šis atzvanīšanas veids ir izsaukt .save (), mugurkaula modeļa funkciju, kas saglabā modeļa atribūtus neatkarīgi no tā, kāds veikala slānis ir ieviests (mūsu gadījumā localstore). Tādā veidā ikreiz, kad tiek mainīts atlasītais attēls, tas tiek nekavējoties saglabāts.
Skata slānis
Tagad, kad esam uzrakstījuši visu aizmugures (labi, priekšējās aizmugures) kodu, mēs varam salikt skatus. Skati mugurkaulā ir nedaudz atšķirīgi no citiem tradicionālajiem MVC ietvariem. Lai gan skats parasti attiecas tikai uz prezentāciju, mugurkaula skats ir atbildīgs arī par uzvedību. Tas nozīmē, ka jūsu skats ne tikai nosaka to, kā kaut kas izskatās, bet arī to, kas tam jādara, ja ar to mijiedarbojas.
Skats parasti (bet ne vienmēr) ir saistīts ar dažiem datiem, un tam ir trīs fāzes, lai no šiem datiem ģenerētu prezentācijas marķējumu:
1. Tiek inicializēts skata objekts un izveidots tukšs elements.
2. Tiek izsaukta renderēšanas funkcija, ģenerējot skata marķējumu, ievietojot to iepriekšējā solī izveidotajā elementā.
3. Elements ir pievienots DOM.
Tas var šķist liels darbs, lai radītu nelielu uzcenojumu, un mēs vēl neesam pievērsušies skata uzvedības daļai, taču tas ir svarīgi, un šeit ir iemesls. Katru reizi, kad modificējat elementus, kas atrodas DOM, tiek aktivizēts kaut kas tāds, ko sauc par pārlūkprogrammas atjaunošanu. Pārmaiņa ir pārlūkprogramma, kas pārrēķina, kā tiek novietotas visas lapas lietas. Pārlūkprogrammas pārskatīšana var būt slikta veiktspējai, ja tā tiek izsaukta vilkšanas vai lieluma mainīšanas pasākumā, kas tiek aktivizēts ļoti īsā laikā, bet vēl sliktāk - tie izskatās pavirši. Veicot sarežģītas manipulācijas ar lapu, jūs faktiski varat redzēt, kā elementi tiek pievienoti lapai un kā tiek veikti elementu pārvietošana. Pēc mugurkaula inicializācijas, renderēšanas un pievienošanas modeļa jūs garantējat vienu atkārtotu plūsmu, un lapas izmaiņas būs uztveres acumirklīgas neatkarīgi no elementu manipulācijas sarežģītības.
FlickrBombImageView
var FlickrBombImageView = Backbone.View.extend ({tagName: "div", className: "flickrbombContainer", lock: false, template: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), inicializēt: funkcija (opcijas) {_.bindAll (šī,' addImage ',' updateSrc ',' setDimentions ',' updateDimentions '); var keywords = opcijas. img.attr ('src') .replace ('flickr: //', ''); this. $ el = $ (this.el); this.image = new FlickrBombImage ({atslēgvārdi: atslēgvārdi, id: opcijas. img.attr ('id')}); this.image.flickrImages.bind ('add', this.addImage); this.image.bind ('change: src', this.updateSrc);}, notikumi: { "click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos"}, renderēt: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); return this;}, ...});
Šī skata funkcijas ir izlaistas īsuma dēļ, avota kods kopumā ir pieejams vietnē GitHub: github.com/zurb/flickrbomb
Skata augšdaļā mums ir pāris specifiski mugurkaula atribūti. tagName un className tiek izmantoti, lai definētu tagu un klasi, kas tiks lietota šī skata elementam. Atcerieties, ka skata izveides pirmais solis ir objekta izveide, un tā kā šo izveidi apstrādā Mugurkauls, mums jānorāda elements un klase. Ņemiet vērā, ka mugurkaulam ir saprātīgi noklusējumi; ja mēs izlaižam šos atribūtus, pēc noklusējuma tiek izmantota div, un klase netiks lietota, ja vien jūs to nenorādīsit.
Veidnes atribūts ir konvencija, bet nav obligāts. Mēs to šeit izmantojam, lai norādītu JavaScript veidnes funkciju, kuru izmantosim, lai ģenerētu mūsu marķējumu šim skatam. Mēs izmantojam funkciju _.template (), kas iekļauta apakšsadaļā.js, taču jūs varat izmantot jebkuru izvēlēto veidņu motoru, mēs jūs parasti nenosodīsim.
Funkcijā .initialize () mēs no attēla taga izvelkam atslēgvārdu virkni un pēc tam izveidojam FlickrBombImage modeli, izmantojot šos atslēgvārdus. Mēs saistām arī funkciju .addImage (), kas jāizpilda, kad FlickrImage tiek pievienota kolekcijai FlickrImages. Šī funkcija pievienos tikko pievienoto FlickrImage mūsu attēlu selektora izlādei. Pēdējā un vissvarīgākā rinda ir saistoša .updateSrc () funkcijas aktivizēšanai, kad tiek mainīts pašlaik atlasītais FlickrImage. Kad modelī tiek mainīts pašreizējais attēls, šī funkcija darbosies, atjauninās attēla elementa atribūtu src, un CSS mainīs izmēru un apgrieztu attēlu, lai tas atbilstu lietotāja norādītajiem attēla izmēriem.
notikumi: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos "}
Pēc .initialize () mums ir skata uzvedības daļa. Mugurkauls nodrošina ērtu veidu, kā sasaistīt notikumus, izmantojot notikumu objektu. Notikumu objekts izmanto metodi jQuery .delegate (), lai veiktu faktisko saistīšanu ar skata elementu, lai neatkarīgi no tā, kādas manipulācijas jūs veicat ar skata iekšējo elementu, visi saistītie notikumi joprojām darbosies. Tas darbojas tāpat kā jQuery .live (), izņemot to, ka notikumu saistīšanas vietā ar visu dokumentu jūs varat tos saistīt jebkura elementa darbības jomā. Katra notikuma objekta ieraksta atslēga sastāv no notikuma un atlasītāja, vērtība norāda to funkciju, kurai jābūt saistītai ar šo notikumu. Ņemiet vērā, ka .delegate () nedarbojas ar dažiem notikumiem, piemēram, Iesniegt. Pilnu atbalstīto notikumu sarakstu skatiet jQuery .live () dokumentācijā.
renderēt: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); atgriezt šo;}
Visbeidzot, mums ir funkcija .render (), kas ir atbildīga par mūsu marķējuma izveidi un jebkādu papildu darbu veikšanu, kurus nevar veikt, kamēr View marķējums nav pievienots elementam View. Pēc veidnes atveidošanas mums FlickrBombImage ir jāizsauc .fetch (). .fetch () ir mugurkaula funkcija, kas iegūst modeļa jaunāko kopiju no noturības slāņa. Ja mēs iepriekš būtu saglabājuši šo modeli, .fetch () šos datus izgūtu tagad. Pēc attēla ielādes mums ir jāzvana, lai mainītu izmēru, lai to pareizi novietotu.
Mājas stiept
Kad visi gabali ir uz vietas, viss, kas mums jādara, tagad ir jāatrod viettura attēli lapā un jāaizstāj ar atveidotajiem FlickrBombImage skatiem.
$ ("img [src ^ = 'flickr: //']") .each (function () {var img = $ (this), flickrBombImageView = new FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView. renderēt (). el);});
Šis mazais fragments ir jāpalaiž lapas apakšdaļā vai dokumentā, kas ir gatavs atzvanīšanai, lai nodrošinātu, ka tas var atrast viettura attēlus, kurus tas aizstās. Mēs izmantojam flickr: // [KEYWORD] norādīšanas kārtību attēla taga src atribūtā, lai norādītu, ka tas būtu jāaizpilda ar attēliem no Flickr. Mēs atrodam attēla elementus ar atbilstošu src atribūtu, izveidojam jaunu FlickrBombImageView un pēc tam attēlu aizstājam ar mūsu. Mēs paķeram oriģināla attēla kopiju un nododam to savam FlickrBombView, lai mēs varētu izvilkt dažas papildu konfigurācijas opcijas, kuras, iespējams, bija norādītas elementā.
Visu to smago darbu gala rezultāts ir ļoti vienkāršs API cilvēkiem, kuri izmanto bibliotēku. Viņi var vienkārši definēt attēlu tagus, izmantojot flickr: // konvenciju, nomest FlickrBomb kodu savas lapas apakšdaļā un bam, viņi ieguvuši viettura attēlus no Flickr.
Lieliski darbojas arī ar lielām tīmekļa lietotnēm
Mums ir liela tīmekļa lietotne ar nosaukumu Notable, kas tika uzrakstīta bez bažām par satura ģenerēšanu klienta pusē. Kad mēs vēlējāmies, lai lietotnes sadaļas būtu uzlādētas, ģenerējot satura klienta pusi, mēs izvēlējāmies Mugurkauls. Iemesli bija tādi paši: mēs vēlējāmies vieglu ietvaru, kas palīdzētu uzturēt kodu sakārtotu, bet nelika mums pārdomāt visu lietojumprogrammu.
Mēs ar lieliem panākumiem sākām izmaiņas šī gada sākumā, un kopš tā laika mēs dziedam slavas mugurkaulu.
Papildu resursi
Backbone ir daudz vairāk nekā tas, ko es aplūkoju šajā rakstā, MVC (modeļa skata kontrolieris) C (kontrolieris) daļa iesācējiem, kas faktiski ir R (maršrutētājs) jaunākajā versijā. Un tas viss ir iekļauts mugurkaula dokumentācijā, gaišā sestdienas rītā lasot:
documentcloud.github.com/backbone/
Ja jūsu rīcībā ir tradicionālākas apmācības, pārbaudiet šīs lietojumprogrammas ļoti labi dokumentēto kodu, kas rakstīts mugurkaulā:
documentcloud.github.com/backbone/docs/todos.html
