Notaðu Backbone.js til að flýta fyrir samskiptum

Höfundur: Monica Porter

Sköpunardag: 13 Mars 2021

Uppfærsludagsetning: 15 Maint. 2024

Notaðu Backbone.js til að flýta fyrir samskiptum - Skapandi

Efni.

Við skulum byrja þá
Fyrsta módelið okkar
Safn mynda
FlickrBombImage
Útsýnislagið
FlickrBombImageView
Heimastrekkið
Virkar líka vel með stórum forritum á vefnum
Viðbótarheimildir

Ef þú ert að leita að því að smíða fljótt smá JavaScript tól ertu líklega ekki að hugsa um að nota ramma. Auðveldara að hakka saman einhvern jQuery kóða frekar en að setja upp og læra nýjan ramma, ekki satt? Rangt, Backbone.js er frábær léttur límrammi sem lítur út eins og venjulegur gamall JavaScript sem þú varst vanur að skrifa.

Við gerum mikið af kyrrstæðum frumgerðum hér á ZURB, vegna þess að okkur langar til að geta smellt í gegnum síður án þess að þurfa að skrifa neinn bakendakóða. Oft slepptum við gráum myndum af staðsetningarmönnum eða stundum leituðum við í Flickr að myndum til að hjálpa okkur að sjá hvað gæti farið í lokadrögunum. Það er þangað til einn töfrandi föstudag, þegar við ákváðum að það væri æðislegt að skrifa smá JavaScript til að leysa vandamál okkar. Okkur langaði til að geta leitað og valið myndir á Flickr, beint úr myndunum um staðsetningarnar sjálfar. Við myndum kalla það FlickrBomb, og þetta er sagan af því hvernig við byggðum það með Backbone.js.

Það er mjög mælt með því að þú lítur fljótt yfir FlickrBomb áður en þú lest. Það er einn af þessum „tilboðum sem smellur er á þúsund orð“. Haltu áfram, við bíðum.

Það er mikið af JavaScript umgjörðum á teningnum þessa dagana, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. En okkur leist vel á Backbone.js fyrir þetta tiltekna verkefni af nokkrum mismunandi ástæðum:

1. Það er létt (í raun 100% fitulaust)

að þyngd, þar sem nýjasta pakkaða útgáfan er um 4.6kb
í kóða, enda rúmlega 1.000 línur af kóða, það er ekkert voðalega erfitt að fylgja stafla ummerki niður í innvortið án þess að missa vitið

2. Það lítur út eins og JavaScript

vegna þess að það er JavaScript, þá er það það og það er allt
það notar jQuery, sem jafnvel amma þín þekkir þessa dagana

3. Ofur einföld þrautseigja

út úr kassanum viðheldur það gögnum í bakenda (um REST), en með því að sleppa einu viðbæti vistast það í staðbundinni geymslu
vegna þess að það dregur úr þrautseigjuforritinu, gætum við látið það vera í REST bakenda með því að fjarlægja staðbundna geymsluviðbótina

Við skulum byrja þá

Vegna þess að Backbone.js er bara JavaScript, þá er allt sem við þurfum að gera að fela það ásamt Underscore.js á síðunni. jQuery er ekki erfitt háð fyrir burðarás í sjálfu sér, en við ætlum að nota það svo við munum fela það hér. Við munum einnig tengja viðbótarforritið fyrir geymslu þar sem við viljum ekki vanda okkur við að setja upp bakenda. Athugaðu að voru að tengja skrárnar beint hingað til einföldunar, en þú ættir alltaf að hýsa eigin eignir þínar í framleiðslu.

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

Allur eftirfarandi kóði í þessari grein er sérstakur fyrir umsókn okkar, þannig að við getum fært hann í app.js skrá, eða bara inline ef það er hlutur þinn. Mundu bara að láta það fylgja með eftir burðarás. Hryggjarstykki gerir kleift að draga út hluta af forritinu okkar, gera þá bæði mát til að auðvelda endurnotkun og læsilegra fyrir aðra. Til að sýna sem best útdráttinn, ætluðum við að útskýra hönnun FlickrBomb frá grunni, byrja á fyrirsætunum og enda á útsýnið.

Fyrsta módelið okkar

Fyrsta verkefnið sem við ætluðum að takast á við er að draga myndirnar frá Flickr. Að móta FlickrImage í burðarás er nógu einfalt, við munum búa til nýja gerð sem kallast FlickrImage og bæta við nokkrum aðferðum til að hjálpa okkur að fá mismunandi stærð á þumalfingur.

Líkön í burðarás eru hlutir sem geta verið viðvarandi og hafa nokkrar aðgerðir tengdar þeim, líkt og módel í öðrum MVC ramma. Töfrandi hluti hryggjarlíkana er að við getum bundið atburði við eiginleika, þannig að þegar sá eiginleiki breytist getum við uppfært skoðanir okkar til að endurspegla það. En við erum að fara aðeins á undan okkur sjálfum.

Þegar við drögum myndirnar frá Flickr ætlum við að fá nægar upplýsingar til að búa til vefslóðir fyrir allar stærðir. Samt sem áður er sú samsetning undir okkur komin, þannig að við útfærðum .image_url () aðgerðina sem tekur stærðarfæribreytu og skilar opinberum hlekk. Vegna þess að þetta er burðarás líkan getum við notað this.get () til að fá aðgang að eiginleikum líkansins. Svo með þessu líkani getum við gert eftirfarandi annars staðar í kóðanum til að fá slóðina á Flickr mynd.

flickrImage.image_url (‘stór’)

Nokkuð hnitmiðað, ha? Þar sem þetta líkan er sérstaklega fyrir umsókn okkar munum við bæta við nokkrum umbúðaaðgerðum fyrir stærð í fullri stærð og þumalfingur.

Safn mynda

FlickrBomb fæst við safn mynda, ekki stakra mynda, og Backbone hefur þægilegan hátt til að móta þetta. Safnið sem er viðeigandi nafn er það sem við munum nota til að flokka Flickr myndir saman fyrir einn staðhafa.

Það eru nokkur atriði sem þarf að hafa í huga hér. Í fyrsta lagi, þá fyrirmynd eigind segir söfnunum hvaða tegund af líkani það er að safna. Við höfum líka nokkra eiginleika sem við frumrituðum til notkunar seinna: lykillinn er Flickr API lykillinn þinn, þú vilt skipta um flickrbombAPIkey fyrir strenginn af þínum eigin Flickr API lykli. Að fá Flickr API lykil er ókeypis og auðvelt, fylgdu bara þessum hlekk: www.flickr.com/services/api/misc.api_keys.html. Síðueiginleikinn er núverandi síða Flickr ljósmynda sem við erum á.

Stóra aðferðin hér er .fetch (), sem dregur út upplýsingar um að draga myndir úr Flickr API. Til að koma í veg fyrir vandamál varðandi beiðni yfir lén er verið að nota JSONP, sem bæði Flickr API og jQuery styðja. Aðrar breytur sem við erum að fara í API ættu að skýra sig sjálfar. Sérstaklega áhugaverð eru burðarásaraðgerðirnar kallaðar hingað. Í árangurshringingunni sem við erum að nota .add (), aðgerð sem tekur fjölda eiginleika líkans, býr til líkanatilfelli úr þessum eiginleikum og bætir þeim síðan við safnið.

Aðgerðirnar .nextPage () og .prevPage () breyta fyrst síðunni sem við viljum sýna,
notaðu safnaaðgerðina .remove (), til að fjarlægja öll núverandi gerðir úr
safn, og hringdu síðan í sæki til að fá myndirnar fyrir núverandi síðu (sem við bara
breytt).

FlickrBombImage

Ef við vinnum okkur aftur upp, þurfum við enn eitt líkanið til að tákna mynd staðarmannsins, sem samanstendur af safni FlickrImages og núverandi FlickrImage sem hefur verið valið. Við munum kalla þetta líkan FlickrBombImage.

Þar sem þetta líkan sér um að halda utan um þá mynd sem nú er valin á milli blaðsíðna, þarf það að vita hvaða staðbundna geymsla verslun á að nota.Fyrsta línan mun tryggja að stuðningur sé við localstorage og búa síðan til verslunina sem við munum nota til að viðhalda valinni mynd.

Hryggjarliður gerir okkur kleift að skilgreina .initialize () aðgerð sem verður kölluð þegar dæmi um líkanið er búið til. Við notum þessa aðgerð í FlickrBombImage til að búa til nýtt dæmi um FlickrImages safnið, fara með lykilorðin sem notuð verða fyrir þessa mynd og ná síðan í myndirnar frá Flickr.

Aðgerðin .loadFirstImage () hefur verið send sem svarhringing til að hlaupa þegar búið er að hlaða myndunum frá Flickr. Eins og þú getur sennilega giskað á stillir þessi aðgerð núverandi mynd til að vera sú fyrsta í safninu frá Flickr. Það gerir það ekki ef núverandi mynd hefur þegar verið stillt.

Við ætlum líka að nota afturköllun eiginleika Backbone til að reka .changeSrc () aðgerðina okkar þegar src eiginleiki þessarar gerðar breytist. Allt sem þetta svarhringing gerir er að hringja í .save (), aðgerð fyrir burðarásarlíkan sem viðheldur eiginleikum líkansins til hvaða verslunarlags sem hefur verið hrint í framkvæmd (í okkar tilfelli localstore). Á þennan hátt, þegar valin mynd er breytt, er hún strax viðvarandi.

Útsýnislagið

Nú þegar við höfum fengið allan bakendakóðann (ja, framendann) kóðann, getum við sett saman skoðanirnar. Skoðanir í burðarás eru aðeins frábrugðnar skoðunum í öðrum hefðbundnum MVC ramma. Þó að útsýni snerti venjulega aðeins sjálfan sig framsetningu, þá er burðarás sýnin einnig ábyrg fyrir hegðun. Það þýðir að Útsýni þitt skilgreinir ekki aðeins hvernig eitthvað lítur út, heldur einnig hvað það ætti að gera þegar um er að ræða.

Útsýni er venjulega (en ekki alltaf) bundið við sum gögn og fer í gegnum þrjá áfanga til að búa til kynningarmerki úr þeim gögnum:

1. Skoða hlutinn er frumstilltur og tómur þáttur er búinn til.
2. Framkvæmdaraðgerðin er kölluð og býr til álagningu fyrir útsýnið með því að setja það í frumefnið sem búið var til í fyrra skrefi.
3. Frumefnið er fest við DOM.

Þetta kann að virðast mikil vinna við að búa til einhverja álagningu og við erum ekki einu sinni að hegðunarhlutanum af Skoðuninni ennþá, en það er mikilvægt og hér er ástæðan. Í hvert skipti sem þú breytir þáttum sem eru í DOM kveikirðu á einhverju sem kallast vafraflæði. Endurflæði er vafrinn að endurreikna hvernig sérhver hlutur á síðunni er staðsettur. Endurflæði vafra getur verið slæmt fyrir frammistöðu ef kallað er á þau í drag- eða stærðarviðburði, sem hleypur af stað á mjög stuttu millibili, en það sem verra er, þau líta út fyrir að vera slök. Með flókinni síðuhöndlun geturðu raunverulega séð þætti bætt við síðuna og áhrifa þætti endurstillt. Í samræmi við upphafsmynstur hryggjarstykkisins, endursýna og festa tryggir þú eitt endurflæði og breytingarnar á síðunni verða skynjanlegar tafarlaust, óháð því hversu flókið er að vinna með frumefni.

FlickrBombImageView

Aðgerðum þessarar skoðunar hefur verið sleppt til skemmri tíma, frumkóðinn í heild sinni er fáanlegur á GitHub: github.com/zurb/flickrbomb

Efst á myndinni höfum við nokkra eiginleika í burðarás. tagName og className eru notuð til að skilgreina merkið og bekkinn sem verður beitt á frumefni þessarar skoðunar. Mundu að skref eitt í Skoða sköpun er að búa til hlut, og þar sem sú sköpun er meðhöndluð af burðarás, verðum við að tilgreina frumefni og flokk. Athugaðu að Backbone hefur skynsamlegar vanskil; ef við sleppum þessum eiginleikum er div sjálfgefið og engum flokki verður beitt nema þú tilgreinir einn.

Sniðmátaeiginleikinn er venju en ekki krafist. Við notum það hér til að tilgreina JavaScript sniðmát aðgerðina sem við munum nota til að búa til álagningu okkar fyrir þessa sýn. Við notum aðgerðina _.template () sem er innifalin í Underscore.js, en þú getur notað hvaða sniðmótor sem þú vilt, við dæmum þig ekki.

Í .initialize () aðgerðinni okkar erum við að draga leitarorðastrenginn úr myndmerkinu og búa síðan til FlickrBombImage líkan með því að nota þessi leitarorð. Við erum einnig að binda .addImage () aðgerðina sem á að keyra þegar FlickrImage er bætt við FlickrImages safnið. Þessi aðgerð mun bæta FlickrImage sem nýlega var bætt við við myndaval okkar. Síðasta og mikilvægasta línan er að binda .updateSrc () aðgerðina við að kveikja þegar FlickrImage sem nú er valinn er breytt. Þegar núverandi mynd er breytt í líkaninu mun þessi aðgerð keyra, uppfæra src eiginleika myndareiningarinnar og CSS breyta stærð og klippa myndina til að falla að þeim myndvíddum sem notandinn tilgreinir.

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

Eftir .initialize () höfum við hegðunarhluta útsýnisins. Hryggur er þægileg leið til að binda atburði með atburði. Atburður hlutur notar jQuery .delegate () aðferðina til að gera raunverulegan bindingu við View frumefnið, þannig að óháð því hvaða meðferð þú gerir við frumefnið innan útsýnisins munu allir bundnir atburðir þínir enn virka. Það virkar alveg eins og jQuery .live (), nema að í stað þess að binda atburði við allt skjalið geturðu bundið þá innan hvers þáttar. Lykillinn að hverri færslu í atburðarhlutnum samanstendur af atburðinum og völdum, gildið gefur til kynna þá aðgerð sem ætti að vera bundin við þann atburð. Athugaðu að .delegate () virkar ekki með sumum viðburðum eins og senda, sjá skjölin jQuery .live () fyrir allan listann yfir studda atburði.

render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); þetta.stærð (); skila þessu;}

Að lokum höfum við .render () aðgerðina sem er ábyrg fyrir því að búa til álagningu okkar og vinna öll viðbótarverk sem ekki er hægt að framkvæma fyrr en Skoða áletruninni hefur verið bætt við Skoða þáttinn. Eftir að við höfum sent sniðmátið okkar verðum við að hringja í .fetch () á FlickrBombImage. .fetch () er burðarás aðgerð sem fær nýjasta eintakið af líkaninu frá þrautseigjulaginu. Ef við hefðum vistað þetta líkan áður myndi .fetch () sækja þessi gögn núna. Eftir að myndin hefur verið sótt þurfum við að hringja í stærð til að staðsetja hana rétt.

Heimastrekkið

Með öll verkin á sínum stað, þurfum við ekki annað en að finna staðsetningarmyndirnar á síðunni og skipta þeim út fyrir FlickrBombImage skoðanirnar.

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

Þessa litlu klippu þarf að keyra neðst á síðunni, eða í skjal tilbúið símtal til að tryggja að hún geti fundið staðsetningarmyndirnar sem hún kemur í staðinn fyrir. Við notum þá venju að tilgreina flickr: // [KEYWORD] í src eiginleika myndamerkis til að gefa til kynna að það ætti að vera fyllt með myndum frá Flickr. Við finnum myndþætti með samsvarandi src eiginleika, búum til nýtt FlickrBombImageView og skiptum síðan um myndina fyrir okkar. Við grípum afrit af upprunalegu myndinni og sendum henni til FlickrBombView okkar, svo að við getum dregið nokkrar viðbótar stillingar valkosti sem kunna að hafa verið tilgreindir á frumefninu.

Lokaniðurstaðan af allri þeirri miklu vinnu er mjög einfalt API fyrir fólk sem notar bókasafnið. Þeir geta einfaldlega skilgreint myndamerki með því að nota flickr: // sáttmálann, sleppt FlickrBomb kóðanum neðst á síðunni sinni og bam, þeir hafa fengið staðhæfingarmyndir frá Flickr.

Virkar líka vel með stórum forritum á vefnum

Við erum með stórt vefforrit sem heitir Athyglisvert og var skrifað án þess að hafa áhyggjur af því að búa til innihald viðskiptavinar. Þegar við vildum gera hluta af app turbo rukkað með því að búa til innihald viðskiptavinarins, völdum við Backbone. Ástæðurnar voru þær sömu: við vildum hafa léttan ramma til að halda skipulagi kóðans, en ekki neyða okkur til að endurskoða allt forritið.

Við hófum breytingarnar fyrr á árinu með góðum árangri og höfum sungið Backbones lof síðan.

Viðbótarheimildir

Það er miklu meira við burðarásinn en það sem ég fjallaði um í þessari grein, C (stjórnandi) hluti MVC (líkamsskoðunarstýringar) til að byrja með, sem er í raun R (leið) í nýjustu útgáfunni. Og það er allt fjallað um skjöl í hryggjarstykkinu, léttur laugardagsmorgun las:
documentcloud.github.com/backbone/

Ef hefðbundnari námskeið eru hlutur þinn, skoðaðu þá mjög vel skjalfesta kóða þessa todo forrits sem skrifaður er í burðarás:
documentcloud.github.com/backbone/docs/todos.html

Fyrri Grein