Norėdami pagreitinti sąveiką, naudokite „Backbone.js“

Autorius: Monica Porter

Kūrybos Data: 13 Kovas 2021

Atnaujinimo Data: 15 Gegužė 2024

Norėdami pagreitinti sąveiką, naudokite „Backbone.js“ - Kūrybinis

Turinys

Pradėkime tada
Pirmasis mūsų modelis
Vaizdų kolekcija
„FlickrBombImage“
Vaizdo sluoksnis
„FlickrBombImageView“
Namų tempimas
Puikiai veikia ir su didelėmis interneto programomis
Papildomi resursai

Jei norite greitai sukurti nedidelį „JavaScript“ įrankį, tikriausiai negalvojate apie sistemos naudojimą. Lengviau nulaužti „jQuery“ kodą, o ne įdiegti ir išmokti naują sistemą, tiesa? Neteisinga, „Backbone.js“ yra itin lengva klijų sistema, kuri atrodo taip pat, kaip įprasta sena „JavaScript“, kurią įpratote rašyti.

Čia, ZURB, darome daugybę statinių prototipų, nes mums patinka, kai galime spustelėti puslapius nereikėdami rašyti jokio vidinio kodo. Dažnai mes atsisakėme pilkų pilkos vietos rezervatorių vaizdų arba kartais eidavome ieškoti „Flickr“ vaizdų pavyzdžių, kurie padėtų mums įsivaizduoti, kas gali būti galutiniame juodraštyje. Tai yra iki vieno stebuklingo penktadienio, kai nusprendėme, kad būtų nuostabu parašyti „JavaScript“, kad išspręstume mūsų problemas. Norėjome, kad „Flickr“ galėtume ieškoti ir pasirinkti nuotraukas tiesiai iš pačių rezervuotųjų vaizdų. Mes tai pavadintume „FlickrBomb“, ir tai yra istorija apie tai, kaip mes jį sukūrėme naudodami „Backbone.js“.

Labai rekomenduojama prieš skaitant greitai pažvelgti į „FlickrBomb“. Tai vienas iš tų „paspaudimas yra vertas tūkstančio žodžių“ tipo pasiūlymų. Pirmyn, mes lauksime.

Šiais laikais bloke yra daugybė „JavaScript“ rėmelių, „SproutCore“, „JavaScriptMVC“, „Spine“, „Sammy“, „Knockout“. Bet „Backbone.js“ mums patiko būtent dėl šio projekto dėl kelių skirtingų priežasčių:

1. Tai lengva (iš tikrųjų be riebalų)

svorio, o naujausia supakuota versija yra apie 4,6 kb
kode, turint šiek tiek daugiau nei 1000 kodo eilučių, nėra labai sunku sekti kamino pėdsakus į vidų neprarandant proto

2. Atrodo kaip „JavaScript“

nes tai yra „JavaScript“, tiek ir viskas
jis naudoja „jQuery“, kurį šiais laikais žino net jūsų močiutė

3. Itin paprastas atkaklumas

iš dėžutės jis išlaiko duomenis į vidinę atmintį (per REST), tačiau užmetus vieną papildinį jis bus išsaugotas vietinėje saugykloje
nes jis išskiria patvarumo API, mes galime jį išlaikyti iki REST backend, tiesiog pašalindami vietinės saugyklos papildinį

Pradėkime tada

Kadangi „Backbone.js“ yra tik „JavaScript“, viskas, ką turime padaryti, yra įtraukti jį kartu su „Underscore.js“ puslapyje. „jQuery“ savaime nėra sunki „Backbone“ priklausomybė, tačiau mes jį naudosime, todėl įtrauksime čia. Taip pat susiesime vietinį saugyklos papildinį, nes nenorime vargti nustatydami antrinę programą. Atkreipkite dėmesį, kad čia buvo tiesioginiai failų susiejimai, kad būtų paprasčiau, tačiau visada turėtumėte laikyti savo turtą gamyboje.

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

Visas toliau pateiktas šio straipsnio kodas yra skirtas mūsų programai, todėl galime jį įtraukti į failą „app.js“ arba tiesiog įdėti, jei tai jūsų reikalas. Tiesiog nepamirškite jį įtraukti po „stuburo“. Pagrindas suteikia galimybę abstrakčiai panaudoti mūsų programos dalis, kad jos būtų modulinės, kad būtų lengviau jas pakartotinai naudoti, ir būtų lengviau skaitomos kitiems. Norėdami geriausiai iliustruoti tą abstrakciją, ketinome paaiškinti „FlickrBomb“ dizainą iš apačios į viršų, pradedant modeliais ir baigiant vaizdais.

Pirmasis mūsų modelis

Pirmoji užduotis, kurią ketinote išspręsti, yra nuotraukų ištraukimas iš „Flickr“. „FlickrImage“ modeliavimas stubure yra pakankamai paprastas, sukursime naują modelį pavadinimu „FlickrImage“ ir pridėsime keletą metodų, kurie padės mums gauti skirtingo dydžio nykščius.

„Backbone“ modeliai yra objektai, kuriuos galima išlaikyti ir kurie turi su jais susijusias funkcijas, panašiai kaip modeliai kitose MVC sistemose. Stebuklingoji „stuburo“ modelių dalis yra ta, kad mes galime susieti įvykius su atributais, kad pasikeitus šiam atributui galėtume atnaujinti savo nuomonę, kad tai atspindėtų. Bet mes šiek tiek lenkiame save.

Kai išsisuksime nuotraukas iš „Flickr“, gausime pakankamai informacijos, kad sukurtume visų dydžių URL. Tačiau tas surinkimas paliekamas mums, todėl mes įdiegėme .image_url () funkciją, kuri paima dydžio parametrą ir grąžina viešą nuorodą. Kadangi tai yra stuburo modelis, galime naudoti šį.get (), kad galėtume pasiekti modelio atributus. Taigi naudodami šį modelį galime atlikti šiuos veiksmus kitur kode, kad gautume „Flickr“ atvaizdo URL.

flickrImage.image_url (’didelis’)

Gana glausta, ar ne? Kadangi šis modelis yra būdingas mūsų programai, mes pridėsime keletą apipavidalinimo funkcijų, skirtų viso dydžio ir nykščio atvaizdams.

Vaizdų kolekcija

„FlickrBomb“ užsiima vaizdų, o ne pavienių vaizdų kolekcijomis, o „Backbone“ turi patogų būdą tai modeliuoti. Tinkamai pavadinta Kolekcija yra tai, ką mes naudosime, kad sugrupuotume „Flickr“ vaizdus vienai rezervuotai vietai.

Čia reikia atkreipti dėmesį į keletą dalykų. Pirmiausia modelis atributas nurodo kolekcijoms, kokio tipo modelį jis renka. Mes taip pat turime keletą atributų, kuriuos inicijavome naudoti vėliau: raktas yra mūsų „Flickr“ API raktas, norėsite pakeisti „flickrbombAPIkey“ savo „Flickr“ API rakto eilute. Gauti „Flickr“ API raktą yra nemokama ir paprasta, tiesiog spustelėkite šią nuorodą: www.flickr.com/services/api/misc.api_keys.html. Puslapio atributas yra dabartinis „Flickr“ nuotraukų puslapis, kuriame esame.

Čia didelis metodas yra .fetch (), kuris išskiria detales apie nuotraukų ištraukimą iš „Flickr“ API. Norėdami išvengti tarpdomeninių užklausų problemų, naudojame JSONP, kurį palaiko tiek „Flickr“ API, tiek „jQuery“. Kiti parametrai, kuriuos perduodame API, turėtų būti savaime suprantami. Ypač įdomios čia yra vadinamos „stuburo“ funkcijos. Sėkmės skambutyje naudojame .add () funkciją, kuri ima modelio atributų masyvą, sukuria modelio egzempliorius iš tų atributų ir prideda juos prie kolekcijos.

Funkcijos .nextPage () ir .prevPage () pirmiausia pakeičia norimą rodyti puslapį,
Norėdami pašalinti visus esamus modelius, naudokite rinkimo funkciją .remove ()
kolekciją ir paskambinkite gauti, kad gautumėte dabartinio puslapio nuotraukas (kad mes tiesiog
pakeista).

„FlickrBombImage“

Grįžtant atgal, mums reikia dar vieno modelio, kuris atspindėtų vietos rezervavimo įvaizdį, kurį sudarys „FlickrImages“ kolekcija ir dabartinis „FlickrImage“, kuris buvo pasirinktas. Šį modelį pavadinsime „FlickrBombImage“.

Kadangi šis modelis yra atsakingas už šiuo metu pasirinkto vaizdo stebėjimą tarp puslapio įkėlimo, jis turi žinoti, kokią „Localstorage“ parduotuvę naudoti.Pirmoji eilutė užtikrins, kad „localstorage“ bus palaikoma, ir tada sukurs parduotuvę, kurią naudosime pasirinktam vaizdui išsaugoti.

Pagrindas leidžia mums apibrėžti .initialize () funkciją, kuri bus iškviesta, kai bus sukurtas modelio egzempliorius. Šią funkciją naudojame „FlickrBombImage“, norėdami sukurti naują „FlickrImages“ kolekcijos egzempliorių, perduoti raktinius žodžius, kurie bus naudojami šiam vaizdui, ir tada atkurti vaizdus iš „Flickr“.

Funkcija .loadFirstImage () buvo perduota kaip atgalinis skambutis, kad paleistumėte, kai vaizdai buvo įkelti iš „Flickr“. Kaip tikriausiai galite atspėti, ši funkcija nustato dabartinį vaizdą kaip pirmąjį „Flickr“ kolekcijos vaizdą. Tai nedaro, jei dabartinis vaizdas jau nustatytas.

Mes taip pat naudosime „Backbone“ atributų atgalinius skambučius, kad suaktyvintume .changeSrc () funkciją, kai pasikeis šio modelio src atributas. Viskas, ką šis skambutis atlieka, yra iškvietimas .save (), pagrindinio modelio funkcija, kuri išlaiko modelio atributus bet kuriam įdiegtam parduotuvės sluoksniui (mūsų atveju „localstore“). Tokiu būdu, kai tik pakeičiamas pasirinktas vaizdas, jis iš karto išlieka.

Vaizdo sluoksnis

Dabar, kai jau parašėme visą užpakalinės dalies (gerai, priekinės galinės programos) kodą, galime sudaryti „Views“. „Backbone“ rodiniai šiek tiek skiriasi nuo kitų tradicinių MVC rėmelių. Nors rodinys paprastai susijęs tik su pateikimu, „stuburo rodinys“ taip pat yra atsakingas už elgesį. Tai reiškia, kad jūsų Vaizdas ne tik apibrėžia, kaip kažkas atrodo, bet ir tai, ką jis turėtų daryti, kai su juo bendraujama.

Rodinys paprastai (bet ne visada) yra susietas su kai kuriais duomenimis ir pereina tris fazes, kad iš tų duomenų sugeneruotų pateikimo žymėjimą:

1. Inicijuojamas „View“ objektas ir sukuriamas tuščias elementas.
2. Atkuriama funkcija, kuri sukuria rodinio žymėjimą įterpdama jį į elementą, sukurtą ankstesniame etape.
3. Elementas pritvirtintas prie DOM.

Tai gali atrodyti kaip didelis darbas, kad būtų sukurtas tam tikras žymėjimas, ir mes dar nesame patenkinti „View“ elgesio dalimi, tačiau tai svarbu ir štai kodėl. Kiekvieną kartą, kai modifikuojate DOM esančius elementus, suaktyvinate tai, kas vadinama naršyklės pertvarkymu. Pertrauka yra naršyklė, kuri perskaičiuoja, kaip kiekvienas puslapio dalykas yra išdėstytas. Naršyklės persiuntimas gali būti blogas, jei iškviečiamas įvykis, kai vilkite arba pakeiskite dydį, kuris įsijungia labai trumpu laiko tarpu, bet dar blogiau, kad jie atrodo aplaistyti. Naudodami sudėtingą puslapio valdymą, iš tikrųjų galite pamatyti, kaip elementai yra pridėti prie puslapio, ir atlikti elementų išdėstymą. Laikydamiesi „Backbone“ inicijavimo, pateikimo ir pritvirtinimo modelio, jūs garantuojate vieną pertvarkymą, o puslapio pakeitimai bus suvokiami akimirksniu, neatsižvelgiant į manipuliavimo elementais sudėtingumą.

„FlickrBombImageView“

Šio rodinio funkcijos buvo praleistos glaustai, visą šaltinio kodą galima rasti „GitHub“: github.com/zurb/flickrbomb

Vaizdo viršuje turime keletą „Backbone“ specifinių atributų. tagName ir className naudojami apibrėžti žymą ir klasę, kuri bus taikoma šio rodinio elementui. Atminkite, kad vienas „View“ kūrimo žingsnis yra objekto kūrimas, ir kadangi tą kūrimą tvarko „Backbone“, turime nurodyti elementą ir klasę. Atkreipkite dėmesį, kad „stuburas“ turi pagrįstų numatytųjų nuostatų; jei praleisime šiuos atributus, pagal numatytuosius nustatymus bus naudojamas div, o klasė nebus taikoma, jei nenurodysite.

Šablono atributas yra sutartinis, bet nebūtinas. Mes naudojame jį čia norėdami nurodyti „JavaScript“ šablono funkciją, kurią naudosime kurdami šio rodinio žymėjimą. Mes naudojame funkciją _.template (), įtrauktą į „Underderscore.js“, tačiau jūs galite naudoti bet kurį jums patinkantį šablonų variklį, mes jus nenuspręsime.

Vykdydami funkciją .initialize (), mes ištraukiame raktinių žodžių eilutę iš paveikslėlio žymos ir tada sukuriame „FlickrBombImage“ modelį naudodami tuos raktinius žodžius. Mes taip pat privalome .addImage () funkciją, kuri bus vykdoma, kai „FlickrImage“ bus pridėta prie „FlickrImages“ kolekcijos. Ši funkcija pridės naujai pridėtą „FlickrImage“ prie mūsų vaizdo parinkiklio iškylos. Paskutinė ir svarbiausia eilutė susieja .updateSrc () funkciją, kad ji būtų suaktyvinta pakeitus šiuo metu pasirinktą „FlickrImage“. Pakeitus dabartinį vaizdą modelyje, ši funkcija veiks, atnaujins vaizdo elemento atributą src, o CSS pakeis dydį ir apkarpys vaizdą, kad jis atitiktų vartotojo nurodytus vaizdo matmenis.

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

Po .initialize () yra rodinio elgesio dalis. Pagrindas yra patogus būdas susieti įvykius naudojant įvykių objektą. Įvykių objektas naudoja metodą „jQuery .delegate ()“, kad atliktų faktinį susiejimą su elementu „Rodinys“, kad nepriklausomai nuo to, kokį manipuliavimą atliekate rodinyje esančiame elemente, visi susieti įvykiai vis tiek veiks. Jis veikia taip pat, kaip jQuery .live (), išskyrus tai, kad užuot įpareigoję įvykius visam dokumentui, galite juos susieti su bet kurio elemento sritimi. Kiekvieno įvykio objekto įrašo raktą sudaro įvykis ir parinkiklis, vertė nurodo tą funkciją, kuri turėtų būti susieta su tuo įvykiu. Atminkite, kad .delegate () neveikia su kai kuriais įvykiais, pvz., Pateikimu. Norėdami gauti išsamų palaikomų įvykių sąrašą, žr. „JQuery .live ()“ dokumentaciją.

render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); tai.dydis (); grąžink tai;}

Galiausiai, turime funkciją .render (), kuri yra atsakinga už žymėjimo sukūrimą ir bet kokio papildomo darbo, kurio negalima atlikti, kol rodinio žymėjimas nebus pridėtas prie rodinio elemento, atlikimą. Pateikę šabloną, turime iškviesti .fetch () savo „FlickrBombImage“. .fetch () yra pagrindinė funkcija, gaunanti naujausią modelio kopiją iš patvarumo sluoksnio. Jei būtume išsaugoję šį modelį anksčiau, .fetch () tuos duomenis gautų dabar. Atsiėmus vaizdą, reikia teisingai išdėstyti jo dydį.

Namų tempimas

Kai visi kūriniai yra vietoje, viskas, ką dabar turime padaryti, yra puslapyje rasti vietos rezervavimo ženklų vaizdus ir pakeisti juos pateiktais „FlickrBombImage“ vaizdais.

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

Šį mažą fragmentą reikia paleisti puslapio apačioje arba dokumento parengtame atgaliniame skambutyje, kad būtų galima įsitikinti, jog jis gali rasti vietos rezervavimo ženklo vaizdus, kuriuos jis pakeis. Mes naudojame susitarimą, nurodantį „flickr: //“ [KEYWORD] atvaizdo src atribute, nurodydami, kad jis turėtų būti užpildytas vaizdais iš „Flickr“. Mes randame vaizdo elementus su atitinkančiu src atributu, sukuriame naują „FlickrBombImageView“ ir tada pakeičiame vaizdą į mūsų. Mes paimame originalaus atvaizdo kopiją ir perduodame ją savo „FlickrBombView“, kad galėtume ištraukti keletą papildomų konfigūracijos parinkčių, kurios galėjo būti nurodytos elemente.

Galutinis viso sunkaus darbo rezultatas yra labai paprasta API biblioteką naudojantiems žmonėms. Jie gali paprasčiausiai apibrėžti vaizdo žymas naudodami „flickr: //“ konvenciją, numesti „FlickrBomb“ kodą savo puslapio apačioje ir bam, jie turi „Flickr“ rezervuotų vietų vaizdus.

Puikiai veikia ir su didelėmis interneto programomis

Mes turime didelę žiniatinklio programą „Notable“, kuri buvo parašyta nesijaudinant kurti turinio kliento pusės. Kai norėjome, kad programos sekcijos būtų įkraunamos kuriant turinio kliento pusę, pasirinkome „stuburą“. Priežastys buvo tos pačios: mes norėjome, kad lengvas pagrindas padėtų tvarkyti kodą, bet nepriverstų permąstyti visos programos.

Šių metų pradžioje mes labai sėkmingai pradėjome pokyčius ir nuo to laiko giedame „stuburų“ pagyrimus.

Papildomi resursai

„Backbone“ yra daug daugiau, nei aprašiau šiame straipsnyje, pradedančiųjų MVC (modelio rodinio valdiklio) C (valdiklio) dalis, kuri iš tikrųjų yra naujausios versijos R (maršrutizatorius). Visa tai aprašyta „stuburo“ dokumentuose, lengvą šeštadienio rytą:
documentcloud.github.com/backbone/

Jei jūsų reikalas yra daugiau tradicinių pamokų, patikrinkite labai dokumentuotą šios „Todo“ programos kodą, parašytą „stuburu“:
documentcloud.github.com/backbone/docs/todos.html

Ankstesnis Straipsnis