Përdorni Backbone.js për të shpejtuar ndërveprimet

Autor: Monica Porter

Data E Krijimit: 13 Marsh 2021

Datën E Azhurnimit: 15 Mund 2024

Përdorni Backbone.js për të shpejtuar ndërveprimet - Krijues

Përmbajtje

Le të fillojmë atëherë
Modeli ynë i parë
Një koleksion imazhesh
Imazhi i FlickrBomb
Shtresa e Shikimit
Shikimi i FlickrBombImage
Shtrirja e shtëpisë
Punon shkëlqyeshëm edhe me aplikacione të mëdha në internet
Burime shtesë

Nëse po kërkoni të ndërtoni shpejt një mjet të vogël JavaScript, ndoshta nuk po mendoni të përdorni një kornizë. Më e lehtë për të hakuar së bashku një kod jQuery sesa të instaloni dhe mësoni një kornizë të re, apo jo? E gabuar, Backbone.js është një kornizë super e lehtë ngjitëse që duket tamam si JavaScript i rregullt i vjetër që jeni mësuar të shkruani.

Ne bëjmë shumë prototipa statikë këtu në ZURB, sepse na pëlqen të jemi në gjendje të klikojmë nëpër faqe pa pasur nevojë të shkruajmë ndonjë kod të prapambetur. Shpesh, ne do të lëshonim imazhe të zbehta të mbajtësve të vendit, ose nganjëherë do të shkonim në kërkim të Flickr për imazhe shembullore për të na ndihmuar të vizualizojmë se çfarë mund të shkojë në draftin përfundimtar. Kjo do të ndodhë deri në një të premte magjike, kur vendosëm se do të ishte e mrekullueshme të shkruanim një JavaScript për të zgjidhur problemet tona. Ne donim të ishim në gjendje të kërkonim dhe të zgjidhnim fotografi në Flickr, direkt nga vetë imazhet e mbajtësve të vendit. Ne do ta quanim FlickrBomb, dhe kjo është historia se si e ndërtuam atë duke përdorur Backbone.js.

Rekomandohet shumë që të hidhni një vështrim të shpejtë në FlickrBomb para se të lexoni. Oneshtë një nga ato të llojeve të marrëveshjeve "një klik vlen një mijë fjalë". Shkoni përpara, ne do të presim.

Ka shumë korniza JavaScript në bllok këto ditë, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Por ne na pëlqente Backbone.js për këtë projekt të veçantë për disa arsye të ndryshme:

1. lightshtë e lehtë (100% pa yndyrë në fakt)

në peshë, me versionin e fundit të paketuar që është rreth 4.6kb
në kod, duke qenë pak më shumë se 1.000 rreshta të kodit, nuk është shumë e vështirë të ndjekësh një gjurmë të pirgut në brendësi pa humbur mendjen

2. Duket si JavaScript

sepse është JavaScript, kjo është gjithçka dhe kjo është e gjitha
përdor jQuery, të cilin edhe gjyshja juaj e di këto ditë

3. Këmbëngulje super e thjeshtë

jashtë kutisë, ajo vazhdon të dhënat në një gjendje të prapambetur (përmes REST), por duke lëshuar një plug të vetëm do të kursejë në hapësirën lokale
sepse abstragon API-në e këmbënguljes, mund ta kemi atë të vazhdojë në një prapavijë REST, thjesht duke hequr shtojcën e ruajtjes lokale

Le të fillojmë atëherë

Për shkak se Backbone.js është vetëm JavaScript, e tëra çfarë duhet të bëjmë është ta përfshijmë atë së bashku me Underscore.js në faqe. jQuery nuk është një varësi e vështirë për Backbone në vetvete, por ne do ta përdorim atë kështu që do ta përfshijmë këtu. Ne gjithashtu do të lidhim shtojcën e ruajtjes lokale, pasi nuk duam të shqetësohemi me konfigurimin e një backend. Vini re që lidhnin direkt skedarët këtu për thjeshtësi, por gjithmonë duhet të prisni pasuritë tuaja në prodhim.

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

I gjithë kodi i mëposhtëm në këtë artikull është specifik për aplikacionin tonë, kështu që ne mund ta përfshijmë atë në një skedar app.js, ose thjesht të rreshtojmë nëse kjo është gjëja juaj. Vetëm mos harroni ta përfshini pas Backbone. Backbone mundëson që pjesët abstrakte të aplikacionit tonë, t'i bëjnë ato të dyja modulare për ripërdorim të lehtë dhe më të lexueshme për të tjerët. Për ta ilustruar sa më mirë atë abstraksion, do të shpjegonim modelin e FlickrBomb nga poshtë lart, duke filluar me modelet dhe duke përfunduar me pamjet.

Modeli ynë i parë

Detyra e parë që do të zgjidhnin është tërheqja e fotove nga Flickr. Modelimi i një FlickrImage në shtyllë kurrizore është mjaft i thjeshtë, ne do të krijojmë një model të ri të quajtur FlickrImage dhe do të shtojmë disa metoda për të na ndihmuar të marrim gishta me madhësi të ndryshme.

Modelet në Backbone janë objekte që mund të vazhdohen dhe kanë disa funksione të shoqëruara me to, ashtu si modelet në kornizat e tjera MVC. Pjesa magjike e modeleve Backbone është se ne mund t'i lidhim ngjarjet me atributet, kështu që kur kjo atribut të ndryshojë, të mund të azhurnojmë pikëpamjet tona për ta pasqyruar atë. Por ne jemi duke kaluar pak përpara vetes.

Kur tërheqim fotografitë nga Flickr, do të marrim informacion të mjaftueshëm për të krijuar URL për të gjitha madhësitë. Sidoqoftë ai asamble na mbetet neve, kështu që ne implementuam funksionin .image_url () që merr një parametër madhësie dhe kthen një lidhje publike. Meqenëse ky është një model i shtyllës kurrizore, ne mund ta përdorim këtë.get () për të hyrë në atributet në model. Pra, me këtë model, ne mund të bëjmë sa vijon diku tjetër në kod për të marrë URL-në e një imazhi të Flickr.

flickrImage.image_url ('i madh')

Konciz bukur, eh? Meqenëse ky model është specifik për aplikimin tonë, ne do të shtojmë disa funksione mbështjellëse për madhësinë e imazhit të plotë dhe të madh.

Një koleksion imazhesh

FlickrBomb merret me koleksione të imazheve, jo me imazhe të vetme, dhe Backbone ka një mënyrë të përshtatshme për modelimin e kësaj. Koleksioni me emrin e duhur është ajo që ne do të përdorim për të grupuar imazhet e Flickr së bashku për një mbajtës të vetëm vendi.

Ka disa gjëra për të shënuar këtu. Së pari, modeli atributi u tregon koleksioneve se çfarë lloji të modelit po mbledh. Ne gjithashtu kemi disa atribute që i kemi iniciuar për përdorim më vonë: çelësi është çelësi ynë Flickr API, do të dëshironi të zëvendësoni flickrbombAPIkey me vargun e çelësit tuaj Flickr API. Marrja e një çelësi të Flickr API është falas dhe e thjeshtë, thjesht ndiqni këtë lidhje: www.flickr.com/services/api/misc.api_keys.html. Atributi i faqes është faqja aktuale e fotove të Flickr në të cilat ndodhemi.

Metoda e madhe këtu është .fetch (), e cila heq detajet e tërheqjes së fotove nga Flickr API. Për të shmangur problemet me kërkesat ndër-domain, ne po përdorim JSONP, të cilin mbështeten si Flickr API dhe jQuery. Parametrat e tjerë që po kalojmë në API duhet të jenë vetë-shpjeguese. Me interes të veçantë janë funksionet Backbone që thirren këtu. Në kthimin e suksesit ne jemi duke përdorur .add (), një funksion që merr një varg të atributeve të modelit, krijon shembuj modeli nga ato atribute, dhe pastaj i shton ato në koleksion.

Funksionet .nextPage () dhe .prevPage () së pari ndryshojnë faqen që duam të shfaqim,
përdorni funksionin e mbledhjes. hiqni (), për të hequr të gjitha modelet ekzistuese nga
koleksion, dhe më pas thirrni marrjen për të marrë fotot për faqen aktuale (që ne vetëm
ndryshuar).

Imazhi i FlickrBomb

Duke punuar përsëri, na duhet një model më shumë për të përfaqësuar imazhin e mbajtësit të vendit, i cili do të përbëhet nga një koleksion i FlickrImages dhe FlickrImage aktual që është zgjedhur. Ne do ta quajmë këtë model FlickrBombImage.

Meqenëse ky model është përgjegjës për të ndjekur imazhin e zgjedhur aktualisht midis ngarkesave të faqeve, ai duhet të dijë se çfarë dyqani lokal të magazinimit duhet të përdorë.Linja e parë do të sigurojë që ka mbështetje për deponimin lokal dhe më pas krijon dyqanin që do të përdorim për të vazhduar imazhin e zgjedhur.

Shtylla kurrizore na lejon të përcaktojmë një funksion .initialize () që do të thirret kur të krijohet një shembull i modelit. Ne e përdorim këtë funksion në FlickrBombImage për të krijuar një shembull të ri të koleksionit FlickrImages, të kalojmë përgjatë fjalëve kyçe që do të përdoren për këtë imazh dhe pastaj të marrim imazhet nga Flickr.

Funksioni .loadFirstImage () është kaluar si një kthim thirrje për të ekzekutuar kur imazhet janë ngarkuar nga Flickr. Siç mund ta merrni me mend, ky funksion vendos që imazhi aktual të jetë i pari në koleksion nga Flickr. Nuk e bën këtë nëse imazhi aktual është vendosur tashmë.

Ne gjithashtu do të përdorim thirrjet kthyese të atributit Backbone për të shkaktuar funksionin tonë .changeSrc () kur atributi src i këtij modeli ndryshon. E gjithë kjo kthim thirrje është thirrja .save (), një funksion i modelit Backbone që vazhdon atributet e modelit për cilëndo shtresë dyqani është implementuar (në rastin tonë lokal-dyqani). Në këtë mënyrë, sa herë që imazhi i zgjedhur ndryshohet, ajo vazhdon menjëherë.

Shtresa e Shikimit

Tani që kemi shkruar të gjithë kodin e backend (pra, prapa backend), ne mund të bashkojmë Pamjet. Pamjet në Backbone janë pak më ndryshe se pikëpamjet në kornizat e tjera tradicionale MVC. Ndërsa një pamje zakonisht ka të bëjë vetëm me prezantimin, një Backbone View është gjithashtu përgjegjës për sjelljen. Kjo do të thotë që Pamja juaj jo vetëm që përcakton se si duket diçka, por edhe atë që duhet të bëjë kur ndërvepron me të.

Një Pamje zakonisht (por jo gjithmonë) lidhet me disa të dhëna dhe kalon nëpër tre faza për të gjeneruar paraqitje të paraqitjes nga ato të dhëna:

1. Objekti View inicializohet dhe krijohet një element bosh.
2. Funksioni i dhënies thirret, duke gjeneruar shënjimin për pamjen duke e futur atë në elementin e krijuar në hapin e mëparshëm.
3. Elementi është i bashkangjitur në DOM.

Kjo mund të duket si shumë punë për të gjeneruar një vlerësim, dhe ne nuk jemi akoma në pjesën e sjelljes së Pamjes, por është e rëndësishme, dhe ja pse. Sa herë që modifikoni elementet që janë në DOM, ju shkaktoni diçka që quhet rimbursim i shfletuesit. Një reflow është shfletuesi që rillogarit se si pozicionohet çdo gjë në faqe. Rimbushjet e shfletuesit mund të jenë të këqija për performancën nëse thirren brenda një ngjarjeje tërheqjeje ose përmasimi të madhësisë, që ndizet në një interval shumë të shkurtër, por më keq, ato duken të lëngshme. Me manipulim kompleks të faqes, në të vërtetë mund të shihni elemente që shtohen në faqe dhe elemente të efektshme që ripozicionohen. Duke ndjekur modelin e Backbone të inicimit, pasqyrimit dhe bashkangjitjes, ju garantoni një rimbursim të vetëm dhe ndryshimet në faqe do të jenë perceptuese menjëherë, pavarësisht nga kompleksiteti i manipulimit të elementit.

Shikimi i FlickrBombImage

Funksionet e kësaj pamjeje janë hequr për shkurtësi, kodi burimor në tërësinë e tij është i disponueshëm në GitHub: github.com/zurb/flickrbomb

Në krye të Pamjes, kemi disa atribute specifike Backbone. emri tag dhe emri i klasës përdoren për të përcaktuar etiketën dhe klasën që do të zbatohet në elementin e këtij View. Mos harroni se hapi i parë i krijimit të Pamjes është krijimi i një objekti, dhe pasi që ai krijim trajtohet nga Backbone, ne duhet të specifikojmë elementin dhe klasën. Vini re se Backbone ka parazgjedhje të ndjeshme; nëse i heqim këto atribute, një div përdoret si parazgjedhje, dhe asnjë klasë nuk do të zbatohet nëse nuk e specifikoni një.

Atributi shabllon është një konventë, por nuk kërkohet. Po e përdorim këtu për të specifikuar funksionin e modelit JavaScript që do të përdorim për të gjeneruar shënimin tonë për këtë pamje. Ne përdorim funksionin _.template () të përfshirë në Underscore.js, por ju mund të përdorni cilindo motor që provokon, ju nuk do t'ju gjykojmë.

Në funksionin tonë .initialize () ne po tërheqim vargun e fjalëve kyçe nga etiketimi i imazhit, dhe më pas krijojmë një model FlickrBombImage duke përdorur ato fjalë kyçe. Ne po lidhim gjithashtu funksionin .addImage () që do të ekzekutohet kur një koleksion FlickrImage shtohet në koleksionin FlickrImages. Ky funksion do të shtojë FlickrImage të sapo shtuar në fluturimin tonë të zgjedhësve të imazheve. Linja e fundit dhe më e rëndësishme është lidhja e funksionit .updateSrc () për t'u ndezur kur FlickrImage i zgjedhur aktualisht ndryshohet. Kur imazhi aktual të ndryshohet në model, ky funksion do të ekzekutohet, azhurnon atributin src të elementit të imazhit dhe CSS ndryshon përmasat dhe prerë imazhin për t'u përshtatur brenda dimensioneve të imazhit të specifikuara nga përdoruesi.

ngjarjet: {"kliko .setupIcon": "klikoSetup", "kliko .flickrbombFlyout a.photo": "zgjedhImage", "kliko .flickrbombFlyout a.next": "nextFlickrPhotos", "kliko .flickrbombFlyout a.prev": "prevFlickrPhotos "}

Në vijim .inicializimi () kemi pjesën e sjelljes së Pamjes. Backbone ofron një mënyrë të përshtatshme për të lidhur ngjarjet duke përdorur një objekt të ngjarjeve. Objekti i ngjarjeve përdor metodën jQuery .delegate () për të bërë lidhjen aktuale me elementin View, kështu që pavarësisht se çfarë manipulimi i bëni elementit brenda pamjes, të gjitha ngjarjet tuaja të lidhura do të funksionojnë akoma. Funksionon ashtu si jQuery .live (), përveç që në vend të lidhjes së ngjarjeve me të gjithë dokumentin, ju mund t'i lidhni ato brenda fushës së çdo elementi. Çelësi i secilës hyrje në objektin e ngjarjeve përbëhet nga ngjarja dhe përzgjedhësi, vlera tregon atë funksion që duhet të lidhet me atë ngjarje. Vini re se .delegate () nuk punon me disa ngjarje si paraqitja, shihni dokumentacionin jQuery .live () për një listë të plotë të ngjarjeve të mbështetura.

pasqyro: funksioni () {$ (ky.el) .html (ky.template ()); this.image.fetch (); kjo.përmasa (); ktheje këtë;}

Së fundmi, ne kemi funksionin .render () që është përgjegjës për krijimin e shënjimit tonë dhe për të bërë ndonjë punë shtesë që nuk mund të kryhet derisa të mos shtohet shënimi View në elementin View. Pasi ta bëjmë modelin tonë, duhet të telefonojmë .fetch () në FlickrBombImage. .fetch () është një funksion Backbone që merr kopjen më të fundit të modelit nga shtresa e qëndrueshmërisë. Nëse do ta kishim ruajtur këtë model më parë, .fetch () do t'i merrte ato të dhëna tani. Pasi të jetë marrë imazhi, duhet të thërrasim madhësinë për ta pozicionuar në mënyrë korrekte.

Shtrirja e shtëpisë

Me të gjitha pjesët në vend, gjithçka që duhet të bëjmë tani është të gjejmë imazhet e mbajtësit të vendit në faqe dhe t'i zëvendësojmë ato me pamjet e dhëna të FlickrBombImage.

$ ("img [src ^ = 'flickr: //']") .ecili (funksioni () {var img = $ (kjo), flickrBombImageView = FlickrBombImageView i ri ({img: img}); img.replaceWith (flickrBombImageView). bëj (). el);});

Ky snip i vogël duhet të ekzekutohet në fund të faqes, ose në një thirrje gati të një dokumenti, për t'u siguruar që mund të gjejë imazhet e mbajtësit të vendit që do të zëvendësojë. Ne përdorim konvencionin e specifikimit të flickr: // [Fjala kyçe] në atributin src të një etiketimi të imazhit për të treguar se duhet të plotësohet me imazhe nga Flickr. Ne gjejmë elemente të imazhit me një atribut src që përputhen, krijojmë një FlickrBombImageView të ri dhe pastaj zëvendësojmë imazhin me tonën. Ne marrim një kopje të imazhit origjinal dhe e kalojmë atë në FlickrBombView tonë, në mënyrë që të mund të tërheqim disa opsione shtesë konfigurimi që mund të jenë specifikuar në element.

Rezultati përfundimtar i gjithë asaj pune të vështirë është një API shumë e thjeshtë për njerëzit që përdorin bibliotekën. Ata thjesht mund të përcaktojnë etiketat e imazheve duke përdorur konvencionin flickr: //, të hedhin kodin FlickrBomb në fund të faqes së tyre dhe të kërkojnë, ata kanë marrë imazhe të mbajtësve të vendeve nga Flickr.

Punon shkëlqyeshëm edhe me aplikacione të mëdha në internet

Ne kemi një aplikacion të madh në internet për ol të quajtur Notable, që është shkruar pa u shqetësuar për gjenerimin e përmbajtjes nga ana e klientit. Kur donim të bënim pjesë të turbo të aplikacionit të ngarkuar duke gjeneruar anën e klientit të përmbajtjes, ne zgjodhëm Backbone. Arsyet ishin të njëjtat: ne donim një kornizë të lehtë për të ndihmuar në mbajtjen e kodit të organizuar, por jo të na detyronte të rimendonim të gjithë aplikacionin.

Ne i filluam ndryshimet në fillim të këtij viti me shumë sukses, dhe që nga ajo kohë kemi kënduar lëvdata Backbones.

Burime shtesë

Ka shumë më tepër për Backbone sesa ato që kam mbuluar në këtë artikull, pjesa C (kontrolluesi) e MVC (kontrolluesi i pamjes së modelit) për fillestarët, i cili në të vërtetë është një R (router) në versionin e fundit. Dhe e gjitha është e mbuluar në dokumentacionin Backbone, një dritë e shtunë në mëngjes lexon:
documentcloud.github.com/backbone/

Nëse udhëzimet më tradicionale janë gjëja juaj, atëherë shikoni kodin shumë të dokumentuar të këtij aplikacioni todo të shkruar në Backbone:
documentcloud.github.com/backbone/docs/todos.html

Artikulli I Mëparshëm