Za pospešitev interakcij uporabite Backbone.js

Avtor: Monica Porter

Datum Ustvarjanja: 13 Pohod 2021

Datum Posodobitve: 15 Maj 2024

Za pospešitev interakcij uporabite Backbone.js - Ustvarjalno

Vsebina

Začnimo potem
Naš prvi model
Zbirka slik
Slika FlickrBombImage
Sloj pogleda
FlickrBombImageView
Domača stran
Odlično deluje tudi z velikimi spletnimi aplikacijami
Dodatni viri

Če želite na hitro zgraditi malo orodje JavaScript, verjetno ne razmišljate o uporabi ogrodja. Lažje je vdreti v kodo jQuery, namesto da bi namestili in se naučili novega ogrodja, kajne? Napačno, Backbone.js je super lahek okvir lepila, ki izgleda tako kot običajni stari JavaScript, ki ste ga bili vajeni pisati.

Tukaj na ZURB delamo veliko statičnih prototipov, ker imamo radi, da lahko kliknemo strani, ne da bi morali pisati kakršno koli zaledno kodo. Pogosto smo spustili osuple sive nadomestne slike ali pa smo včasih iskali Flickr za vzorčne slike, da bi si lažje predstavljali, kaj bi lahko šlo v končnem osnutku. To je do nekega čarobnega petka, ko smo se odločili, da bi bilo super napisati nekaj JavaScript-a, da bi rešili naše težave. Želeli smo imeti možnost iskanja in izbiranja fotografij na Flickrju neposredno na samih slikah ograd. Rekli bi mu FlickrBomb, to pa je zgodba o tem, kako smo ga zgradili z uporabo Backbone.js.

Zelo priporočljivo je, da si pred branjem na hitro ogledate FlickrBomb. To je ena izmed tistih poslov »klik je vreden tisoč besed«. Pojdi naprej, počakali bomo.

Danes je v bloku veliko okvirov JavaScript, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Toda Backbone.js nam je bil za ta projekt všeč iz nekaj različnih razlogov:

1. Je lahek (v resnici 100% brez maščob)

teža, najnovejša pakirana različica je približno 4,6 kb
v kodi, saj je nekaj več kot 1000 vrstic kode, ni strašno težko slediti skladam v notranjosti, ne da bi si pri tem izgubili razum

2. Videti je kot JavaScript

ker je JavaScript, to je to in to je vse
uporablja jQuery, ki ga danes pozna tudi vaša babica

3. Super preprosta vztrajnost

iz škatle ohrani podatke v zaledju (prek REST-a), vendar bo s spuščanjem enega vtičnika shranil v lokalno shrambo
ker abstrahira API obstojnosti, bi lahko vztrajal v REST backkend-u, tako da bi preprosto odstranil vtičnik lokalnega pomnilnika

Začnimo potem

Ker je Backbone.js le JavaScript, ga moramo na stran vključiti skupaj z Underscore.js. jQuery sam po sebi ni težko odvisen od hrbtenice, vendar ga bomo uporabili, zato ga bomo vključili sem. Povezali bomo tudi vtičnik lokalnega pomnilnika, saj ne želimo, da bi se mučili z nastavitvijo zalednega prostora. Upoštevajte, da so datoteke tukaj preprosto povezovale zaradi poenostavitve, vendar morate v produkciji vedno gostiti lastna sredstva.

script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> / script> script src = "http://documentcloud.github.com/backbone/ backbone-min.js "> / script> script src =" http://documentcloud.github.com/underscore/underscore-min.js "> / script> script src =" https://raw.github.com/ jeromegn / Backbone.localStorage / master / backbone.localStorage-min.js "> / script>

Vsa naslednja koda v tem članku je specifična za našo aplikacijo, zato jo lahko vključimo v datoteko app.js ali samo v vrstico, če je to vaša stvar. Ne pozabite ga vključiti po hrbtenici. Backbone omogoča abstraktne dele naše aplikacije, tako da so modularni za enostavno ponovno uporabo in bolj berljivi za druge. Da bi to abstrakcijo najbolje ponazorili, so razložili zasnovo FlickrBomba od spodaj navzgor, začenši z modeli in končajo s pogledi.

Naš prvi model

Prva naloga, ki so se je lotili, je vlečenje fotografij s Flickrja. Modeliranje FlickrImage v hrbtenici je dovolj preprosto, ustvarili bomo nov model, imenovan FlickrImage, in dodali nekaj metod, ki nam bodo pomagale dobiti palčke različnih velikosti.

Modeli v hrbtenici so predmeti, ki jih je mogoče ohraniti in imajo z njimi povezane nekatere funkcije, podobno kot modeli v drugih okoljih MVC. Čarobni del hrbteničnih modelov je, da lahko na atribute povežemo dogodke, tako da lahko ob spremembi tega atributa posodobimo svoje poglede, da to odražajo. Ampak že gremo malo naprej.

Ko potegnemo fotografije s Flickrja, bomo dobili dovolj informacij za ustvarjanje URL-jev za vse velikosti. Vendar je ta sestava prepuščena nam, zato smo izvedli funkcijo .image_url (), ki sprejme parameter velikosti in vrne javno povezavo. Ker je to hrbtenični model, lahko s pomočjo this.get () dostopamo do atributov na modelu. S tem modelom lahko drugje v kodi naredimo naslednje, da dobimo URL slike Flickr.

flickrImage.image_url ('velik')

Precej jedrnato, kajne? Ker je ta model specifičen za našo aplikacijo, bomo dodali nekaj funkcij zavijanja za velikost slike velikosti in palca.

Zbirka slik

FlickrBomb se ukvarja z zbirkami slik in ne z enimi slikami, Backbone pa ima primeren način za to modeliranje. Primerno imenovana zbirka je tisto, kar bomo uporabili za združevanje slik Flickr v eno rezervirano mesto.

Tu je treba opozoriti na nekaj stvari. Najprej, model atribut zbirkam pove, kakšen model zbira. Imamo tudi nekaj atributov, ki smo jih inicializirali za poznejšo uporabo: key je naš ključ Flickr API, flickrbombAPIkey boste želeli nadomestiti z nizom lastnega ključa API Flickr. Pridobivanje ključa API-ja Flickr je brezplačno in enostavno, sledite tej povezavi: www.flickr.com/services/api/misc.api_keys.html. Atribut strani je trenutna stran fotografij Flickr, na katerih smo.

Tukaj je glavna metoda .fetch (), ki povleče podrobnosti vlečenja fotografij iz API-ja Flickr. Da bi se izognili težavam z zahtevami med domenami, uporabljamo JSONP, ki ga podpirata tako Flickr API kot jQuery. Drugi parametri, ki jih posredujemo API-ju, bi morali biti samoumevni. Posebej zanimive so funkcije hrbtenice, ki se tukaj prikličejo. V povratnem klicu uporabljamo funkcijo .add (), ki zajema niz atributov modela, iz teh atributov ustvari primerke modelov in jih nato doda v zbirko.

Funkciji .nextPage () in .prevPage () najprej spremenita stran, ki jo želimo prikazati,
uporabite funkcijo zbiranja .remove (), da odstranite vse obstoječe modele iz
zbirko in nato pokličite, da dobite fotografije za trenutno stran (ki smo jo pravkar
spremenjeno).

Slika FlickrBombImage

Ko se vračamo nazaj, potrebujemo še en model, ki predstavlja sliko nadomestnega znaka, ki bo sestavljena iz zbirke FlickrImages in trenutne izbrane FlickrImage. Temu modelu bomo rekli FlickrBombImage.

Ker je ta model odgovoren za sledenje trenutno izbrani sliki med nalaganjem strani, mora vedeti, katero lokalno trgovino uporabiti.Prva vrstica bo zagotovila podporo za lokalno shranjevanje, nato pa ustvarite trgovino, v kateri bomo ohranili izbrano sliko.

Backbone nam omogoča, da definiramo funkcijo .initialize (), ki bo poklicana, ko bo ustvarjen primerek modela. To funkcijo v FlickrBombImage uporabljamo za ustvarjanje novega primerka zbirke FlickrImages, posredovanje ključnih besed, ki bodo uporabljene za to sliko, in nato pridobitev slik iz Flickr.

Funkcija .loadFirstImage () je bila posredovana kot povratni klic za zagon, ko so slike naložene s Flickr-ja. Kot verjetno verjetno ugibate, ta funkcija nastavi trenutno sliko kot prvo v zbirki s Flickr-ja. To ne stori, če je trenutna slika že nastavljena.

Prav tako bomo uporabili povratne klice atributov Backbone, da bomo sprožili funkcijo .changeSrc (), ko se spremeni atribut src tega modela. Vse, kar ta povratni klic naredi, je klic .save (), funkcije modela hrbtenice, ki ohranja atribute modela na kateri koli plastni shrambi, ki je bila implementirana (v našem primeru localstore). Na ta način se ob vsaki spremembi izbrane slike takoj vztraja.

Sloj pogleda

Zdaj, ko imamo napisano vso zaledno kodo (no, frontend backend), lahko sestavimo poglede. Pogledi v hrbtenici so nekoliko drugačni kot pogledi v drugih tradicionalnih okvirih MVC. Čeprav se pogled običajno ukvarja samo s predstavitvijo, je hrbtenični pogled odgovoren tudi za vedenje. To pomeni, da vaš pogled ne določa samo, kako nekaj izgleda, ampak tudi, kaj naj naredi pri interakciji.

Pogled je običajno (vendar ne vedno) vezan na nekatere podatke in gre skozi tri faze, da iz teh podatkov ustvari oznako predstavitve:

1. Objekt View se inicializira in ustvari se prazen element.
2. Pokliče se funkcija upodabljanja, ki ustvari oznako za pogled tako, da ga vstavi v element, ustvarjen v prejšnjem koraku.
3. Element je pritrjen na DOM.

To se morda zdi veliko dela za ustvarjanje določenih oznak in še nismo prišli do vedenjskega dela pogleda, vendar je pomembno in tukaj je razlog, zakaj. Vsakič, ko spremenite elemente v DOM-u, sprožite nekaj, kar se imenuje preoblikovanje brskalnika. Preoblikovanje je brskalnik, ki preračuna, kako je postavljena vsaka stvar na strani. Preoblikovanje brskalnika je lahko slabo za delovanje, če ga pokličete v primeru povlečenja ali spreminjanja velikosti, ki se sproži v zelo kratkem intervalu, še huje pa je videti površen. S kompleksno manipulacijo strani lahko dejansko vidite elemente, ki se dodajo na stran, in izvedene prerazporeditve elementov. Po vzoru inicializiranja, upodabljanja in pripenjanja Backboneja zagotovite en sam preoblikovanje, spremembe strani pa bodo začasno takojšnje, ne glede na zapletenost manipulacije z elementi.

FlickrBombImageView

Funkcije tega pogleda so izpuščene zaradi kratkosti, izvorna koda je v celoti na voljo na GitHub: github.com/zurb/flickrbomb

Na vrhu pogleda imamo nekaj atributov, ki so značilni za hrbtenico. tagName in className se uporabljata za določanje oznake in razreda, ki bosta uporabljena za element tega pogleda. Ne pozabite, da prvi korak ustvarjanja pogleda ustvarja predmet in ker s tem ustvarjanjem skrbi Backbone, moramo določiti element in razred. Upoštevajte, da ima Backbone privzete privzete vrednosti; če izpustimo te atribute, se privzeto uporabi div in noben razred ne bo uporabljen, če ga ne določite.

Atribut predloge je dogovor, vendar ni obvezen. Tu ga uporabljamo za določitev funkcije predloge JavaScript, ki jo bomo uporabili za ustvarjanje označb za ta pogled. Uporabljamo funkcijo _.template (), ki je vključena v Underscore.js, vendar lahko uporabite katerikoli mehanizem za predloge, ki vam je najbolj všeč, ne bomo vas obsojali.

V naši funkciji .initialize () izvlečemo niz ključnih besed iz slikovne oznake in nato z uporabo teh ključnih besed ustvarimo model FlickrBombImage. Zavezujemo tudi funkcijo .addImage (), ki se bo izvajala, ko bo zbirka FlickrImages dodana FlickrImage. Ta funkcija bo dodala novo dodani FlickrImage našemu izbirniku slik. Zadnja in najpomembnejša vrstica je vezava funkcije .updateSrc () na sprožitev, ko se spremeni trenutno izbrani FlickrImage. Ko se trenutna slika spremeni v modelu, se bo ta funkcija zagnala, posodobila atribut src elementa slike in CSS spremenila velikost in obrezala sliko tako, da bo ustrezala dimenzijam slike, ki jih je določil uporabnik.

dogodki: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos "}

Po .initialize () imamo vedenjski del pogleda. Backbone ponuja priročen način za povezovanje dogodkov z uporabo predmeta dogodkov. Objekt events uporablja metodo jQuery .delegate () za dejansko vezavo elementa View, tako da bodo vsi vaši vezani dogodki ne glede na to, kako manipulirate z elementom v pogledu, še vedno delovali. Deluje tako kot jQuery .live (), le da jih lahko namesto, da bi povezali dogodke na celoten dokument, povežete v obsegu katerega koli elementa. Ključ vsakega vnosa v predmetu dogodkov je sestavljen iz dogodka in izbirnika, vrednost označuje tisto funkcijo, ki bi morala biti vezana na ta dogodek. Upoštevajte, da .delegate () ne deluje z nekaterimi dogodki, kot je submit, glejte dokumentacijo jQuery .live () za celoten seznam podprtih dogodkov.

render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); vrni to;}

Nazadnje imamo še funkcijo .render (), ki je odgovorna za ustvarjanje našega označevanja in izvajanje kakršnega koli dodatnega dela, ki ga ni mogoče izvesti, dokler oznaka View ni dodana elementu View. Ko upodobimo našo predlogo, moramo poklicati .fetch () na naši FlickrBombImage. .fetch () je funkcija hrbtenice, ki dobi najnovejšo kopijo modela iz plasti obstojnosti. Če bi prej shranili ta model, bi .fetch () te podatke pridobil zdaj. Po pridobitvi slike moramo poklicati resize, da jo pravilno postavimo.

Domača stran

Z vsemi kosi na mestu je vse, kar moramo zdaj storiti, da na strani poiščemo slike ograd in jih nadomestimo z upodobljenimi pogledi FlickrBombImage.

$ ("img [src ^ = 'flickr: //']") .each (function () {var img = $ (this), flickrBombImageView = new FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView. render (). el);});

Ta majhen odrezek je treba zagnati na dnu strani ali v povratnem klicu, pripravljenem za dokument, da bo lahko našel slike nadomestnih znakov, ki jih bo zamenjal. Konvencijo določanja flickr: // [KEYWORD] v atributu src slikovne oznake uporabljamo, da označimo, da jo je treba zapolniti s slikami iz Flickr. Najdemo slikovne elemente z ustreznim atributom src, ustvarimo nov FlickrBombImageView in nato sliko nadomestimo z našo. Zgrabimo kopijo izvirne slike in jo posredujemo na naš FlickrBombView, da lahko izvlečemo nekatere dodatne konfiguracijske možnosti, ki so bile morda določene v elementu.

Končni rezultat vsega tega trdega dela je zelo preprost API za ljudi, ki uporabljajo knjižnico. Preprosto lahko določijo slikovne oznake s konvencijo flickr: //, spustijo kodo FlickrBomb na dno svoje strani in bam, od Flickr-a so dobili nadomestne slike.

Odlično deluje tudi z velikimi spletnimi aplikacijami

Imamo veliko spletno aplikacijo z imenom Notable, ki je bila napisana brez skrbi za ustvarjanje vsebine na strani odjemalca. Ko smo želeli razdelke aplikacije turbo polniti z ustvarjanjem strani odjemalca vsebine, smo izbrali Backbone. Razlogi so bili enaki: želeli smo lahek okvir, ki bo pomagal kodi organizirati, ne pa tudi prisiliti, da premislimo o celotni aplikaciji.

Spremembe smo začeli zgodaj letos z velikim uspehom in od takrat prepevamo hrbtenico.

Dodatni viri

Backbone ima veliko več kot tisto, kar sem opisal v tem članku, del C (krmilnik) MVC (model view controller) za začetek, ki je v najnovejši različici pravzaprav R (usmerjevalnik). In vse je zajeto v dokumentaciji Backbone, v lahkem sobotnem jutru se je pisalo:
documentcloud.github.com/backbone/

Če so za vas bolj tradicionalne vadnice, si oglejte zelo dobro dokumentirano kodo te todo aplikacije, napisane v Backbone:
documentcloud.github.com/backbone/docs/todos.html

Prejšnji Članek