Használja a Backbone.js-t az interakciók felgyorsításához

Szerző: Monica Porter

A Teremtés Dátuma: 13 Március 2021

Frissítés Dátuma: 15 Lehet 2024

Használja a Backbone.js-t az interakciók felgyorsításához - Kreatív

Tartalom

Kezdjük akkor
Az első modellünk
Képgyűjtemény
A FlickrBombImage
A Nézet réteg
A FlickrBombImageView
Az otthoni nyújtás
Kiválóan működik nagy webes alkalmazásokkal is
További források

Ha gyorsan szeretne létrehozni egy kis JavaScript eszközt, valószínűleg nem a keretrendszer használatára gondol. Könnyebb feltörni néhány jQuery-kódot, nem pedig új keretrendszert telepíteni és megtanulni, nem? A Wrong, a Backbone.js egy szuper könnyű ragasztókeret, amely ugyanúgy néz ki, mint a szokásos régi JavaScript, amelyet Ön szokott írni.

Sok statikus prototípust készítünk itt, a ZURB-nál, mert szeretnénk, ha képesek vagyunk átkattintani az oldalakat anélkül, hogy háttérkódot kellene írnunk. Gyakran előfordul, hogy csöpögő szürke helyőrző képeket csepegtetünk, vagy néha a Flickr-ben keresünk mintaképeket, amelyek segítenek abban, hogy szemléljük, mi kerülhet a végleges vázlatba. Ez egy varázslatos péntekig tart, amikor úgy döntöttünk, hogy fantasztikus lenne JavaScriptet írni a problémáink megoldásához. Azt akartuk, hogy képesek legyünk a Flickr-en fotókat keresni és kiválasztani, közvetlenül magukból a helyőrző képekből. FlickrBomb-nak hívnánk, és ez a történet arról, hogyan építettük fel a Backbone.js segítségével.

Nagyon ajánlott, hogy olvassa el gyorsan a FlickrBombot. Ez egyike azoknak az "egy kattintás ezer szót ér" típusú ügyleteknek. Menj csak, várunk.

Napjainkban sok JavaScript-keret található a blokkon, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. De a Backbone.js tetszett ennek a projektnek néhány különböző okból:

1. Könnyű (valójában 100% zsírmentes)

súlyában, a legújabb csomagolt verzió kb. 4,6 kb
a kódban, alig több, mint 1000 sornyi kód, nem is olyan nehéz követni a verem nyomát a belső részen, anélkül, hogy elvesztené az eszét

2. Úgy néz ki, mint a JavaScript

mert ez a JavaScript, ennyi és ennyi
jQuery-t használ, amelyet manapság még a nagymamád is ismer

3. Szuper egyszerű kitartás

a dobozból megtartja az adatokat egy háttérprogramnak (REST-en keresztül), de egyetlen plug-in bedobásával a helyi tárhelyre ment
mivel elvonja a perzisztens API-t, akkor a helyi tároló plug-in eltávolításával megtarthatjuk a REST háttérig

Kezdjük akkor

Mivel a Backbone.js csak JavaScript, csak annyit kell tennünk, hogy az Underscore.js-sel együtt feltesszük az oldalra. A jQuery önmagában nem nehéz függőség a Backbone-tól, de használni fogjuk, ezért felvesszük ide. Összekapcsoljuk a helyi tároló beépülő modult is, mivel nem akarunk gondot okozni egy háttérprogram beállításával. Ne feledje, hogy az egyszerűség kedvéért közvetlenül ide kapcsolták a fájlokat, de mindig a saját eszközeit kell tárolnia a termelésben.

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>

A cikkben szereplő összes következő kód csak az alkalmazásunkra vonatkozik, ezért felvehetjük azt egy app.js fájlba, vagy egyszerűen beilleszthetjük, ha ez a te dolgod. Csak ne feledje, hogy a Gerinc után tartalmazza. A gerinc lehetővé teszi alkalmazásunk egyes részeinek elvonatkoztatását, hogy mind modulárisak legyenek az egyszerű újrafelhasználás érdekében, mind mások számára olvashatóbbak. Ennek az absztrakciónak a legjobb szemléltetésére alulról felfelé magyarázták a FlickrBomb tervezését, kezdve a modellekkel és a nézetekkel.

Az első modellünk

Az első feladat, amellyel foglalkozni kell, a Flickr fotóinak előhúzása. A FlickrImage gerincében történő modellezése elég egyszerű, létrehozunk egy új modellt FlickrImage néven, és hozzáadunk néhány módszert, amelyek segítenek a különböző méretű hüvelykujjak megszerzésében.

A Backbone modelljei olyan objektumok, amelyek fennmaradhatnak, és vannak hozzájuk kapcsolódó funkciók, hasonlóan a többi MVC keretrendszer modelljéhez. A gerincház-modellek varázslatos része az, hogy az eseményeket az attribútumokhoz köthetjük, így amikor ez az attribútum megváltozik, frissíthetjük nézeteinket, hogy ezt tükrözzék. De egy kicsit előrébb járunk.

Amikor a fényképeket a Flickr-ről készítjük el, elegendő információt kapunk ahhoz, hogy minden mérethez URL-eket készítsünk. Ez a szerelvény azonban ránk maradt, ezért megvalósítottuk az .image_url () függvényt, amely egy méretparamétert vesz fel, és egy nyilvános linket ad vissza. Mivel ez egy gerinccel rendelkező modell, a this.get () segítségével használhatjuk a modell attribútumait. Tehát ezzel a modellel a következőket tehetjük meg a kód másutt is, hogy megkapjuk a Flickr-kép URL-jét.

flickrImage.image_url (’nagy’)

Elég tömör, mi? Mivel ez a modell az alkalmazásunkra jellemző, hozzáadunk néhány burkoló funkciót a fullsize és a thumb képméretekhez.

Képgyűjtemény

A FlickrBomb képgyűjteményekkel foglalkozik, nem pedig egyetlen képpel, és a Backbone-nak kényelmes módja van ennek modellezésére. A találóan elnevezett Gyűjtemény az, amit a Flickr képek csoportosításához használunk egyetlen helyőrzőhöz.

Itt pár dolgot érdemes megjegyezni. Először is a modell attribútum megmondja a gyűjteményeknek, hogy milyen típusú modellt gyűjt. Van néhány attribútumunk is, amelyeket később inicializáltunk: a kulcs a Flickr API kulcsunk, a flickrbombAPIkey-t a saját Flickr API kulcsának karakterláncával kell lecserélnie. A Flickr API kulcs megszerzése ingyenes és egyszerű, csak kövesse ezt a linket: www.flickr.com/services/api/misc.api_keys.html. Az oldal attribútum a Flickr-fotók jelenlegi oldala, amelyen vagyunk.

A nagy módszer itt a .fetch (), amely elvonja a fényképek lekérésének részleteit a Flickr API-ból. A domainek közötti kérelmekkel kapcsolatos problémák elkerülése érdekében a JSONP-ot használjuk, amelyet a Flickr API és a jQuery egyaránt támogat. Az API-nak továbbított többi paraméternek magától értetődőnek kell lennie. Külön érdekességek a gerinchivatkozások itt. A sikeres visszahívás során az .add () függvényt használjuk, amely egy modellattribútum-tömböt vesz fel, modellpéldányokat hoz létre ezekből az attribútumokból, majd felveszi őket a gyűjteménybe.

A .nextPage () és .prevPage () függvények először megváltoztatják a megjeleníteni kívánt oldalt,
használja a .remove () gyűjtési funkciót az összes létező modell eltávolításához a
gyűjtemény, majd hívja a letöltést, hogy megkapja az aktuális oldal fényképeit (
megváltozott).

A FlickrBombImage

Visszafelé haladva még egy modellre van szükségünk a helyőrző kép ábrázolásához, amely a FlickrImages és az aktuálisan kiválasztott FlickrImage gyűjteményéből áll. Ezt a modellt FlickrBombImage-nek hívjuk.

Mivel ez a modell felelős az aktuálisan kiválasztott kép nyomon követéséért az oldal betöltések között, tudnia kell, hogy milyen localstorage áruházat használjon.Az első sor biztosítja, hogy a localstorage támogatást kapjon, majd hozza létre azt az áruházat, amelyet a kiválasztott kép megőrzéséhez használunk.

A gerinc lehetővé teszi, hogy meghatározzunk egy .initialize () függvényt, amelyet a modell egy példányának létrehozásakor hívunk meg. Ezt a funkciót használjuk a FlickrBombImage alkalmazásban a FlickrImages gyűjtemény új példányának létrehozásához, a képhez használt kulcsszavak átadásához, majd a képek lekéréséhez a Flickr-ből.

A .loadFirstImage () függvény visszahívásként lett átadva, hogy fusson, amikor a képeket a Flickr-ről töltötte be. Amint valószínűleg kitalálhatja, ez a funkció az aktuális képet állítja be az első képnek a Flickr gyűjteményében. Ezt nem teszi meg, ha az aktuális képet már beállította.

A Backbone attribútum visszahívásait a .changeSrc () függvény indításához is használjuk, amikor a modell src attribútuma megváltozik. Ez a visszahívás csak a .save () hívása, egy gerinchálózati modellfüggvény, amely megőrzi a modell attribútumait a megvalósított bolti réteghez (esetünkben localstore). Így, valahányszor a kiválasztott kép megváltozik, azonnal megmarad.

A Nézet réteg

Most, hogy megírtuk az összes backend (nos, frontend backend) kódot, összeállíthatjuk a Nézeteket. A Backbone nézetei kissé eltérnek a többi hagyományos MVC keretrendszer nézeteitől. Míg egy nézet általában csak a bemutatásra vonatkozik, a gerinces nézet felelős a viselkedésért is. Ez azt jelenti, hogy a Nézet nemcsak meghatározza, hogyan néz ki valami, hanem azt is, hogy mit kell tennie, ha kölcsönhatásba lépnek vele.

A nézet általában (de nem mindig) kötődik bizonyos adatokhoz, és három szakaszon megy keresztül, hogy az adatokból megjelenítési jelölést generáljon:

1. A View objektum inicializálódik, és egy üres elem jön létre.
2. Meghívjuk a renderelő függvényt, amely előállítja a nézet jelölését az előző lépésben létrehozott elembe illesztve.
3. Az elem a DOM-hoz van csatolva.

Ez sok munkának tűnhet némi jelölés létrehozása érdekében, és még nem is vagyunk a Nézet viselkedési részénél, de fontos, és íme. Minden alkalommal, amikor a DOM-ban lévő elemeket módosítja, elindít egy úgynevezett böngésző-átfolyást. A visszafolyás a böngésző újraszámolja, hogy az oldal minden dolga hogyan helyezkedik el. A böngésző visszafolyása rossz teljesítményt jelenthet, ha meghúzás vagy átméretezés eseményen belül hívják meg, amely nagyon rövid időközönként aktiválódik, de ami még rosszabb, hanyagnak tűnik. Az oldal bonyolult manipulálásával valóban láthatja az elemek hozzáadását az oldalhoz, és a végrehajtott elemek újrapozícionálását. A Backbone inicializálásának, renderelésének és csatolásának mintáját követve garantálja az egyetlen visszafolyást, és az oldal változásai észlelően pillanatnyiak lesznek, függetlenül az elemmanipuláció összetettségétől.

A FlickrBombImageView

Ennek a nézetnek a funkciói rövidség miatt el lettek hagyva, a forráskód teljes egészében elérhető a GitHub oldalon: github.com/zurb/flickrbomb

A Nézet tetején van néhány Gerinc specifikus attribútum. A tagName és className a címke és az osztály meghatározására szolgál, amelyet a Nézet elemére alkalmazunk. Ne feledje, hogy a Nézet létrehozásának első lépése egy objektum létrehozása, és mivel a létrehozást a Gerinc kezeli, meg kell adnunk az elemet és az osztályt. Ne feledje, hogy a Gerincnek ésszerű alapértelmezései vannak; ha ezeket az attribútumokat kihagyjuk, akkor alapértelmezés szerint egy div-et használunk, és csak akkor adunk osztályt, ha megadunk egyet.

A sablon attribútum konvenció, de nem kötelező. Itt használjuk a JavaScript sablon függvény megadására, amelyet a jelölés létrehozásához fogunk használni ehhez a nézethez. Használjuk az Underscore.js fájlban található _.template () függvényt, de használhatja azt a sablonmotort, amelyet Ön jobban szeret, nem ítélünk meg.

Az .initialize () függvényünkben kihúzzuk a kulcsszavak karaktersorozatát a képcímkéből, majd létrehozunk egy FlickrBombImage modellt e kulcsszavak felhasználásával. Kötelezzük a .addImage () függvényt is, amelyet futtatni kell, amikor egy FlickrImage felvételre kerül a FlickrImages gyűjteménybe. Ez a funkció az újonnan hozzáadott FlickrImage-t csatolja képválasztó flyoutunkhoz. Az utolsó és legfontosabb sor az .updateSrc () függvény működésbe hozása az aktuálisan kiválasztott FlickrImage módosításakor. Amikor az aktuális képet megváltoztatja a modellben, ez a függvény futni fog, frissíti a képelem src attribútumát, a CSS pedig átméretezi és kivágja a képet, hogy beleférjen a felhasználó által megadott képméretekbe.

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

Az .initialize () után megkapjuk a Nézet viselkedési részét. A gerinc kényelmes lehetőséget kínál az események lekötésére egy eseményobjektum használatával. Az események objektum a jQuery .delegate () metódussal végzi el a Nézet elemhez való tényleges kötést, így függetlenül attól, hogy milyen műveletet végez a nézet belsejében lévő elemgel, az összes kötött esemény továbbra is működni fog. Ez ugyanúgy működik, mint a jQuery .live (), azzal a különbséggel, hogy az események teljes dokumentumhoz való kötése helyett bármely elem hatókörébe kötheti őket. Az eseményobjektum minden bejegyzésének kulcsa az eseményből és a választóból áll, az érték azt a függvényt jelzi, amelyet az eseményhez kell kötni. Vegye figyelembe, hogy a .delegate () nem működik bizonyos eseményekkel, például a beküldéssel. A támogatott események teljes listáját a jQuery .live () dokumentációjában találja.

render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); ezt.resize (); adja vissza;}

Végül van egy .render () függvény, amely felelős a jelölés létrehozásáért és minden további olyan munka elvégzéséért, amelyet addig nem lehet végrehajtani, amíg a Nézet jelölést hozzá nem adták a Nézet elemhez. Miután elkészítettük a sablonunkat, meg kell hívnunk a .fetch () parancsot a FlickrBombImage fájlunkon. Az .fetch () egy gerinchálózati függvény, amely a modell legújabb példányát a perzisztencia rétegből kapja meg. Ha korábban mentettük volna ezt a modellt, a .fetch () most lekérné ezeket az adatokat. A kép beolvasása után át kell hívnunk az átméretezést a megfelelő elhelyezés érdekében.

Az otthoni nyújtás

Ha az összes darab a helyén van, akkor csak annyit kell tennünk, hogy megtaláljuk az oldalon lévő helyőrző képeket, és kicseréljük őket a renderelt FlickrBombImage nézetekre.

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

Ezt a kis részletet az oldal alján vagy egy dokumentumkész visszahívásban kell futtatni annak biztosítása érdekében, hogy megtalálja a helyettesítő képeket, amelyeket kicserél. A flickr: // [KEYWORD] megadásának konvencióját használjuk egy képcímke src attribútumában annak jelzésére, hogy a Flickr-ből származó képekkel kell feltölteni. Megtaláljuk a képelemeket egy megfelelő src attribútummal, létrehozunk egy új FlickrBombImageView-t, majd lecseréljük a képet a miénkre. Fogjuk az eredeti kép másolatát, és továbbítjuk a FlickrBombView-nknak, hogy további további konfigurációs lehetőségeket lehessen kihúzni, amelyeket az elem megadhatott.

A kemény munka végeredménye egy nagyon egyszerű API a könyvtárat használók számára. Egyszerűen meghatározhatják a képcímkéket a flickr: // konvenció segítségével, ledobhatják az oldaluk aljára a FlickrBomb kódot, és bam, helyőrző képeket kaptak a Flickr-től.

Kiválóan működik nagy webes alkalmazásokkal is

Van egy nagy webes alkalmazásunk, a Notable néven, amelyet gond nélkül írtunk a tartalom kliens oldali létrehozása miatt. Amikor azt akartuk, hogy az alkalmazás egyes szakaszai feltöltődjenek a tartalmi kliens oldal generálásával, a Gerincet választottuk. Az okok ugyanazok voltak: szerettünk volna egy könnyű keretrendszert, amely elősegítené a kód rendezettségét, de nem kényszerítene minket a teljes alkalmazás újragondolására.

Az év elején nagy sikerrel indítottuk el a változásokat, és azóta is a Gerincek dicséretét énekeljük.

További források

A Backbone sokkal többet tartalmaz, mint amire ebben a cikkben kitértem, az MVC (modell nézet vezérlő) C (vezérlő) része a kezdőknek, ami valójában egy R (router) a legújabb verzióban. És mindezt a gerinc dokumentációja fedi le, könnyű szombat reggel olvasható:
documentcloud.github.com/backbone/

Ha a hagyományos oktatóanyagok a te dolgod, akkor nézd meg ennek a Todo alkalmazásnak a Backbone-ban írt nagyon jól dokumentált kódját:
documentcloud.github.com/backbone/docs/todos.html

Korábbi Cikk