Upotrijebite Backbone.js da biste ubrzali interakcije

Autor: Monica Porter

Datum Stvaranja: 13 Ožujak 2021

Datum Ažuriranja: 15 Svibanj 2024

Sadržaj

Krenimo onda
Naš prvi model
Zbirka slika
Slika FlickrBombImage
Sloj pogleda
FlickrBombImageView
Domaća dionica
Izvrsno funkcionira i s velikim ol web aplikacijama
Dodatni resursi

Ako želite brzo izraditi mali JavaScript alat, vjerojatno ne razmišljate o korištenju okvira. Jednostavnije je hakirati neki jQuery kôd, umjesto instalirati i naučiti novi okvir, zar ne? Pogrešno, Backbone.js super je lagan okvir ljepila koji izgleda baš poput uobičajenog starog JavaScript-a koji ste navikli pisati.

Ovdje na ZURB-u radimo puno statičnih prototipova, jer volimo da možemo pregledavati stranice bez potrebe za pisanjem bilo kojeg pozadinskog koda. Često bismo ispuštali sive sive rezervirane slike ili bismo ponekad tražili uzorke slika na Flickr-u kako bismo si predočili što bi moglo ići u konačnom nacrtu. To je do jednog čarobnog petka, kada smo zaključili da bi bilo sjajno napisati JavaScript za rješavanje naših problema. Željeli smo biti u mogućnosti pretraživati i odabrati fotografije na Flickr-u, izravno sa samih slika rezerviranih mjesta. Nazvali bismo ga FlickrBomb, a ovo je priča o tome kako smo ga izgradili koristeći Backbone.js.

Preporučujemo vam da prije čitanja na brzinu pogledate FlickrBomb. To je jedna od onih ponuda "klik vrijedi tisuću riječi". Samo naprijed, pričekat ćemo.

Danas je u bloku puno JavaScript okvira, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Ali svidio nam se Backbone.js zbog ovog određenog projekta iz nekoliko različitih razloga:

1. Lagan je (zapravo 100% bez masti)

težine, a najnovija verzija upakirana je oko 4,6 kb
u kodu, budući da je nešto više od 1.000 redaka koda, nije užasno teško pratiti trag niza u unutrašnjosti, a da ne izgubite razum

2. Izgleda kao JavaScript

jer je JavaScript, to je to i to je sve
koristi jQuery, što danas zna i vaša baka

3. Super jednostavna upornost

izvan okvira zadržava podatke na pozadini (putem REST-a), ali ako doda jedan dodatak, umjesto toga spremit će se u lokalnu pohranu
jer apstrahira API postojanosti, mogli bismo ga zadržati na REST pozadini uklanjanjem lokalnog dodatka za pohranu

Krenimo onda

Budući da je Backbone.js samo JavaScript, sve što trebamo jest uključiti ga zajedno s Underscore.js na stranicu. jQuery sam po sebi nije teška ovisnost za Backbone, ali koristit ćemo ga pa ćemo ga ovdje uključiti. Također ćemo povezati dodatak za lokalnu pohranu, jer ne želimo gnjaviti s postavljanjem pozadine. Imajte na umu da su datoteke radi izravnog povezivanja ovdje radi jednostavnosti, ali uvijek biste trebali proizvoditi vlastita sredstva.

skripta src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> / skripta> skripta 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>

Sav sljedeći kôd u ovom članku specifičan je za našu aplikaciju, tako da ga možemo uključiti u datoteku app.js ili jednostavno uvrstiti ako je to vaša stvar. Samo ga ne zaboravite uključiti nakon Backbonea. Backbone omogućuje apstraktne dijelove naše aplikacije, kako bi ih učinili modularnima za jednostavnu ponovnu upotrebu i čitljivijima za druge. Da bismo najbolje ilustrirali tu apstrakciju, objasnili smo dizajn FlickrBomba odozdo prema gore, počevši od modela i završavajući pogledima.

Naš prvi model

Prvi zadatak s kojim se htio riješiti je izvlačenje fotografija s Flickra. Modeliranje FlickrImage u okosnici dovoljno je jednostavno, stvorit ćemo novi model nazvan FlickrImage i dodati neke metode koje će nam pomoći da dobijemo palčeve različite veličine.

Modeli u Backboneu objekti su koji se mogu ustrajati i s njima su povezane neke funkcije, slično kao i modeli u drugim MVC okvirima. Čarobni dio Backbone modela je taj da možemo vezati događaje za atribute, tako da kad se taj atribut promijeni možemo ažurirati svoje stavove kako bi to odražavali. Ali pomalo idemo ispred sebe.

Kad povučemo fotografije s Flickra, dobit ćemo dovoljno podataka za stvaranje URL-ova za sve veličine. No taj je skup prepušten nama, pa smo implementirali funkciju .image_url () koja uzima parametar veličine i vraća javnu vezu. Budući da je ovo osnovni model, možemo koristiti this.get () za pristup atributima na modelu. Dakle, s ovim modelom možemo učiniti sljedeće na drugim mjestima u kodu kako bismo dobili URL slike Flickr-a.

flickrImage.image_url ('velik')

Prilično jezgrovito, zar ne? Budući da je ovaj model specifičan za našu aplikaciju, dodati ćemo neke funkcije omota za veličine pune veličine i slike palca.

Zbirka slika

FlickrBomb se bavi zbirkama slika, a ne pojedinačnim slikama, a Backbone ima prikladan način za to modeliranje. Prikladno nazvana Zbirka koristit ćemo za grupiranje Flickr slika za jedno rezervirano mjesto.

Ovdje treba napomenuti nekoliko stvari. Prvo, model atribut govori kolekcijama koju vrstu modela prikuplja. Također imamo neke atribute koje smo inicirali za upotrebu kasnije: key je naš ključ Flickr API-ja, morat ćete zamijeniti flickrbombAPIkey nizom vlastitog Flickr API ključa. Dobivanje Flickr API ključa je besplatno i jednostavno, samo slijedite ovu vezu: www.flickr.com/services/api/misc.api_keys.html. Atribut stranice je trenutna stranica Flickr fotografija na kojima se nalazimo.

Ovdje je velika metoda .fetch (), koja apstrahira detalje izvlačenja fotografija iz Flickr API-ja. Da bismo izbjegli probleme sa zahtjevima za više domena, koristimo JSONP, koji podržavaju i Flickr API i jQuery. Ostali parametri koje prosljeđujemo API-ju trebali bi biti samorazumljivi. Od posebnog interesa su ovdje pozvane funkcije okosnice. U povratnom pozivu za uspjeh koristimo .add (), funkciju koja uzima niz atributa modela, stvara instance modela od tih atributa, a zatim ih dodaje u kolekciju.

Funkcije .nextPage () i .prevPage () prvo mijenjaju stranicu koju želimo prikazati,
koristite funkciju sakupljanja .remove () da biste uklonili sve postojeće modele iz
zbirku, a zatim nazovite dohvati da biste dobili fotografije za trenutnu stranicu (to smo upravo
promijenio).

Slika FlickrBombImage

Vraćajući se unatrag, potreban nam je još jedan model za predstavljanje slike rezerviranog mjesta, koja će se sastojati od zbirke FlickrImages i trenutne FlickrImage koja je odabrana. Ovaj ćemo model nazvati FlickrBombImage.

Budući da je ovaj model odgovoran za praćenje trenutno odabrane slike između učitavanja stranica, mora znati koju lokalnu trgovinu treba koristiti.Prvi redak osigurat će podršku lokalnom skladištu, a zatim stvorite trgovinu kojom ćemo upotrijebiti odabranu sliku.

Okosnica nam omogućuje da definiramo funkciju .initialize () koja će se pozivati kad se stvori instanca modela. Ovu funkciju koristimo u FlickrBombImage za stvaranje nove instance zbirke FlickrImages, prosljeđivanje ključnih riječi koje će se koristiti za ovu sliku, a zatim dohvaćanje slika s Flickr-a.

Funkcija .loadFirstImage () proslijeđena je kao povratni poziv za pokretanje kada su slike učitane s Flickr-a. Kao što vjerojatno možete pretpostaviti, ova funkcija postavlja trenutnu sliku kao prvu u zbirci s Flickr-a. To ne čini ako je trenutna slika već postavljena.

Također ćemo upotrijebiti povratne pozive atributa Backbone za aktiviranje naše funkcije .changeSrc () kada se atribut src ovog modela promijeni. Sve što ovaj povratni poziv čini je poziv .save (), funkcija modela okosnice koja zadržava atribute modela na bilo kojem sloju spremišta koji je implementiran (u našem slučaju localstore). Na taj se način, kad god se odabrana slika promijeni, ona odmah nastavlja.

Sloj pogleda

Sad kad smo napisali sav pozadinski (dobro, internetski stražnji) kod, možemo sastaviti Views. Prikazi u Backboneu malo su drugačiji od pogleda u drugim tradicionalnim MVC okvirima. Iako se pogled obično bavi samo prezentacijom, Backbone View je odgovoran i za ponašanje. To znači da vaš pogled ne definira samo kako nešto izgleda, već i što bi trebao učiniti kada komunicira s njim.

Pogled je obično (ali ne uvijek) vezan za neke podatke i prolazi kroz tri faze da bi generirao oznaku prezentacije iz tih podataka:

1. Objekt View se inicijalizira i stvara se prazan element.
2. Poziva se funkcija generiranja koja generira oznake za prikaz umetanjem u element stvoren u prethodnom koraku.
3. Element je pričvršćen na DOM.

Ovo se može činiti kao puno posla za generiranje neke oznake, a nismo još ni u dijelu ponašanja u Pregledu, ali važno je i evo zašto. Svaki put kada modificirate elemente koji se nalaze u DOM-u, pokrećete nešto što se naziva preoblikovanje preglednika. Preuređivanje je preglednik koji preračunava položaj svake stvari na stranici. Preuređivanje preglednika može biti loše za izvedbu ako se pozove u slučaju povlačenja ili promjene veličine, koji se aktivira u vrlo kratkom intervalu, ali još gore, izgledaju traljavo. Pomoću složene manipulacije stranicom zapravo možete vidjeti dodavanje elemenata na stranicu i izvršeno premještanje elemenata. Slijedom obrasca inicijalizacije, prikazivanja i pričvršćivanja Backbone-a, jamčite jedno preusmjeravanje, a promjene na stranici bit će trenutačno trenutne, bez obzira na složenost manipulacije elementima.

FlickrBombImageView

Funkcije ovog prikaza izostavljene su zbog kratkoće, izvorni kod u cijelosti je dostupan na GitHub: github.com/zurb/flickrbomb

Na vrhu Viewa imamo nekoliko atributa specifičnih za Backbone. tagName i className koriste se za definiranje oznake i klase koja će se primijeniti na element ovog pogleda. Imajte na umu da je prvi korak stvaranja View stvaranje objekta, a budući da tom kreacijom upravlja Backbone, moramo navesti element i klasu. Imajte na umu da Backbone ima razumne zadane vrijednosti; ako izostavimo ove atribute, div se koristi prema zadanim postavkama i neće se primijeniti klasa ako ga ne navedete.

Atribut predloška je dogovor, ali nije potreban. Ovdje ga koristimo za određivanje funkcije JavaScript predloška koju ćemo koristiti za generiranje oznaka za ovaj prikaz. Koristimo funkciju _.template () koja je uključena u Underscore.js, ali možete koristiti bilo koji mehanizam za izradu predložaka koji vam je draži, nećemo vam suditi.

U našoj funkciji .initialize () izvlačimo niz ključnih riječi iz oznake slike, a zatim stvaramo model FlickrBombImage pomoću tih ključnih riječi. Također smo vezali funkciju .addImage () koja će se izvoditi kada se FlickrImage doda u zbirku FlickrImages. Ova će funkcija dodati novo dodani FlickrImage na naš izlaz za odabir slike. Posljednji i najvažniji redak veže funkciju .updateSrc () na aktiviranje kada se promijeni trenutno odabrani FlickrImage. Kada se trenutna slika promijeni u modelu, ova funkcija će se pokrenuti, ažurirati src atribut elementa slike i CSS promijeniti veličinu i obrezati sliku kako bi se uklopila u dimenzije slike koje je odredio korisnik.

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

Slijedeći .initialize () imamo dio ponašanja Viewa. Backbone pruža prikladan način povezivanja događaja pomoću objekta događaja. Objekt događaja koristi metodu jQuery .delegate () za stvarno povezivanje elementa View, tako da će bez obzira na manipulaciju elementom unutar pogleda svi vaši vezani događaji i dalje raditi. Djeluje baš kao jQuery .live (), osim što ih umjesto vezanja događaja na cijeli dokument možete povezati u opsegu bilo kojeg elementa. Ključ svakog unosa u objektu događaja sastoji se od događaja i selektora, vrijednost označava onu funkciju koja bi trebala biti vezana za taj događaj. Imajte na umu da .delegate () ne radi s nekim događajima kao što je submit, pogledajte dokumentaciju jQuery .live () za cjelovit popis podržanih događaja.

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

I na kraju, imamo funkciju .render () koja je odgovorna za stvaranje našeg označavanja i obavljanje bilo kakvog dodatnog posla koji se ne može izvesti dok se oznaka View ne doda elementu View. Nakon što generiramo naš predložak, trebamo nazvati .fetch () na našoj FlickrBombImage. .fetch () je funkcija okosnice koja dobiva najnoviju kopiju modela iz sloja postojanosti. Da smo ranije spremali ovaj model, .fetch () bi sada dohvatio te podatke. Nakon dohvaćanja slike moramo nazvati resize da bismo je pravilno postavili.

Domaća dionica

Sa svim dijelovima na mjestu, sve što sada trebamo učiniti je pronaći slike rezerviranih mjesta na stranici i zamijeniti ih prikazanim prikazima FlickrBombImage.

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

Ovaj mali isječak treba pokrenuti na dnu stranice ili u povratnom pozivu spremnom za dokument kako bi se osiguralo da može pronaći slike rezerviranih mjesta koje će zamijeniti. Koristimo konvenciju specificiranja flickr: // [KEYWORD] u src atributu oznake slike kako bismo naznačili da bi se trebala popuniti slikama s Flickr-a. Pronalazimo elemente slike s odgovarajućim src atributom, kreiramo novi FlickrBombImageView, a zatim zamjenjujemo sliku s našom. Uzimamo kopiju izvorne slike i prosljeđujemo je na naš FlickrBombView, kako bismo mogli izvući neke dodatne mogućnosti konfiguracije koje su možda navedene na elementu.

Krajnji rezultat cijelog tog napornog rada je vrlo jednostavan API za ljude koji koriste knjižnicu. Oni mogu jednostavno definirati oznake slike pomoću konvencije flickr: //, spustiti FlickrBomb kôd na dno svoje stranice i bam, od Flickr-a su dobili slike rezerviranih mjesta.

Izvrsno funkcionira i s velikim ol web aplikacijama

Imamo veliku staru web aplikaciju pod nazivom Notable koja je napisana bez brige za generiranje sadržaja na strani klijenta. Kada smo željeli napraviti dijelove aplikacije s turbo punjenjem generiranjem strane klijenta, odabrali smo Backbone. Razlozi su bili isti: željeli smo lagani okvir koji će pomoći da se kôd organizira, ali ne i prisiliti nas da preispitamo cijelu aplikaciju.

Promjene smo započeli početkom ove godine s velikim uspjehom i od tada pjevamo hvalospjeve.

Dodatni resursi

Backbone ima puno više od onoga što sam opisao u ovom članku, C (upravljački) dio MVC-a (model view controller) za početak, što je zapravo R (usmjerivač) u najnovijoj verziji. A sve je pokriveno u dokumentaciji okosnice, lagano subotnje jutro glasilo je:
documentcloud.github.com/backbone/

Ako su vam tradicionalni vodiči, pogledajte vrlo dobro dokumentirani kôd ove todo aplikacije napisan u Backboneu:
documentcloud.github.com/backbone/docs/todos.html

Prethodni Članak