Gumamit ng Backbone.js upang mapabilis ang mga pakikipag-ugnayan

May -Akda: Monica Porter

Petsa Ng Paglikha: 13 Marso. 2021

I -Update Ang Petsa: 15 Mayo 2024

Gumamit ng Backbone.js upang mapabilis ang mga pakikipag-ugnayan - Malikhain

Nilalaman

Magsimula na tayo noon
Ang aming unang modelo
Isang koleksyon ng mga imahe
Ang FlickrBombImage
Ang View Layer
Ang FlickrBombImageView
Ang Stretch ng Bahay
Gumagana nang mahusay sa malalaking mga web app din
Karagdagang mga mapagkukunan

Kung naghahanap ka upang mabilis na makabuo ng isang maliit na tool sa JavaScript, marahil ay hindi mo iniisip ang tungkol sa paggamit ng isang balangkas. Mas madaling i-hack nang sama-sama ang ilang jQuery code kaysa i-install at alamin ang isang bagong balangkas, tama ba? Maling, Backbone.js ay isang sobrang magaan na balangkas ng pandikit na kamukha ng regular na lumang JavaScript na ginamit mo sa pagsusulat.

Gumagawa kami ng maraming mga static na prototype dito sa ZURB, dahil nais naming makapag-click sa mga pahina nang hindi kinakailangang magsulat ng anumang backend code. Kadalasan, ihuhulog namin ang mga drab na kulay-abo na imahe ng placeholder, o kung minsan ay naghahanap kami sa Flickr para sa mga sample na larawan upang matulungan kaming mailarawan kung ano ang maaaring mapunta sa huling draft. Iyon ay hanggang sa isang mahiwagang Biyernes, nang napagpasyahan namin na kahanga-hangang magsulat ng ilang JavaScript upang malutas ang aming mga problema. Nais naming maghanap at pumili ng mga larawan sa Flickr, direkta mula sa mga imahe ng placeholder mismo. Tatawagin namin itong FlickrBomb, at ito ang kwento kung paano namin ito binuo gamit ang Backbone.js.

Masidhing inirerekomenda na tingnan mo nang mabilis ang FlickrBomb bago basahin. Isa ito sa mga "isang pag-click ay nagkakahalaga ng isang libong mga salita" na uri ng mga deal. Sige, maghihintay kami.

Maraming mga balangkas ng JavaScript sa bloke sa mga araw na ito, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Ngunit nagustuhan namin ang Backbone.js para sa partikular na proyekto para sa ilang iba't ibang mga kadahilanan:

1. Ito ay magaan (100% walang taba sa katunayan)

sa timbang, na may pinakabagong naka-pack na bersyon na tungkol sa 4.6kb
sa code, na higit sa 1,000 mga linya ng code, hindi napakahirap subaybayan ang isang stack na bakas pababa sa mga panloob nang hindi nawawala ang iyong isip

2. Parang JavaScript

sapagkat ito ay JavaScript, iyon lang at iyon lang
gumagamit ito ng jQuery, na kahit na alam ng lola mo sa mga panahong ito

3. Napakasimple na pagtitiyaga

sa labas ng kahon nagpapatuloy ito ng data sa isang backend (sa pamamagitan ng REST), ngunit sa pamamagitan ng pag-drop sa isang solong plug-in ay makatipid ito sa lokal na imbakan.
dahil tinatanggal nito ang persistence API, maaari naming ipagpatuloy ito sa isang REST backend sa pamamagitan lamang ng pag-aalis ng lokal na plug-in ng imbakan

Magsimula na tayo noon

Dahil ang Backbone.js ay JavaScript lamang, ang kailangan lang nating gawin ay isama ito kasama ang Underscore.js sa pahina. Ang jQuery ay hindi isang mahirap na pagtitiwala para sa Backbone per se, ngunit gagamitin namin ito kaya isasama namin ito dito. Ili-link din namin ang lokal na plug-in ng imbakan, dahil hindi namin nais na mag-abala sa pagse-set up ng isang backend. Tandaan na direktang nagli-link ang mga file dito para sa pagiging simple, ngunit dapat mong palaging mag-host ng iyong sariling mga assets sa paggawa.

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>

Ang lahat ng sumusunod na code sa artikulong ito ay tukoy sa aming application, kaya maaari namin itong isama sa isang file na app.js, o inline lamang kung iyon ang bagay mo. Tandaan lamang na isama ito pagkatapos ng Backbone. Pinapayagan ang backbone na mag-abstract ng mga bahagi ng aming application, upang gawin silang parehong modular para sa madaling paggamit muli at mas nababasa para sa iba. Upang pinakamahusay na mailarawan ang abstraction na iyon, ipapaliwanag ang disenyo ng FlickrBomb mula sa ibaba hanggang, nagsisimula sa mga modelo, at nagtatapos sa mga panonood.

Ang aming unang modelo

Ang unang gawain na tatalakayin ay ang paghila ng mga larawan mula kay Flickr. Ang pagmomodelo ng isang FlickrImage sa gulugod ay sapat na simple, lilikha kami ng isang bagong modelo na tinatawag na FlickrImage, at magdagdag ng ilang mga pamamaraan upang matulungan kaming makakuha ng iba't ibang mga hinlalaki sa laki.

Ang mga modelo sa Backbone ay mga bagay na maaaring mapilit, at may ilang mga pagpapaandar na nauugnay sa kanila, kagaya ng mga modelo sa iba pang mga framework ng MVC. Ang mahiwagang bahagi ng mga modelo ng Backbone ay maaari nating maiugnay ang mga kaganapan sa mga katangian, upang kapag nagbago ang katangiang iyon maaari naming i-update ang aming mga pananaw upang maipakita iyon. Ngunit medyo nauuna na kami.

Kapag nakuha namin ang mga larawan mula sa Flickr, makakakuha kami ng sapat na impormasyon upang lumikha ng mga URL para sa lahat ng mga laki. Gayunpaman ang pagpupulong na iyon ay naiwan sa amin, kaya ipinatupad namin ang .image_url () na pagpapaandar na tumatagal ng isang sukat ng parameter at nagbabalik ng isang pampublikong link. Dahil ito ay isang backbone model, maaari nating gamitin ito.get () upang ma-access ang mga katangian sa modelo. Kaya sa modelong ito, magagawa natin ang mga sumusunod sa ibang lugar sa code upang makuha ang URL ng isang imahe ng Flickr.

flickrImage.image_url ('malaki')

Medyo maikli, eh? Dahil ang modelong ito ay tukoy sa aming application, magdaragdag kami ng ilang mga pagpapaandar sa pambalot para sa laki ng laki ng buo at hinlalaki.

Isang koleksyon ng mga imahe

Ang FlickrBomb ay nakikipag-usap sa mga koleksyon ng mga imahe, hindi solong mga imahe, at Backbone ay may isang maginhawang paraan para sa pagmomodelo nito. Ang angkop na pinangalanang Koleksyon ay ang gagamitin namin upang mapangkat ang mga imahe ng Flickr para sa isang solong placeholder.

Mayroong ilang mga bagay na dapat tandaan dito. Una, ang modelo Sinasabi ng katangian ang mga koleksyon kung anong uri ng modelo ang kinokolekta nito. Mayroon din kaming ilang mga katangian na aming pinasimulan para magamit sa paglaon: ang susi ay ang aming Flickr API key, gugustuhin mong palitan ang flickrbombAPIkey ng string ng iyong sariling Flickr API key. Ang pagkuha ng susi ng Flickr API ay libre at madali, sundin lamang ang link na ito: www.flickr.com/services/api/misc.api_keys.html. Ang katangian ng pahina ay ang kasalukuyang pahina ng mga larawan ng Flickr na naroroon kami.

Ang malaking pamamaraan dito ay .fetch (), na inilalayo ang mga detalye ng paghugot ng mga larawan mula sa Flickr API. Upang maiwasan ang mga isyu sa mga kahilingan sa cross-domain, gumagamit kami ng JSONP, na parehong sinusuportahan ng Flickr API at jQuery. Ang iba pang mga parameter na ipinapasa namin sa API ay dapat na nagpapaliwanag sa sarili. Ang espesyal na interes ay ang mga pagpapaandar ng Backbone na tinatawag dito. Sa callback ng tagumpay na ginagamit namin .add (), isang pagpapaandar na tumatagal ng isang hanay ng mga katangian ng modelo, lumilikha ng mga halimbawa ng modelo mula sa mga katangiang iyon, at pagkatapos ay idaragdag ang mga ito sa koleksyon.

Ang .nextPage () at .prevPage () na pagpapaandar ay unang binago ang pahinang nais naming ipakita,
gamitin ang function ng koleksyon. alisin (), upang alisin ang lahat ng mga mayroon nang mga modelo mula sa
koleksyon, at pagkatapos ay tumawag sa pagkuha upang makuha ang mga larawan para sa kasalukuyang pahina (na kami lang
nagbago).

Ang FlickrBombImage

Paggawa ng back up ng aming paraan, kailangan namin ng isa pang modelo upang kumatawan sa imahe ng placeholder, na kung saan ay binubuo ng isang koleksyon ng FlickrImages, at ang kasalukuyang FlickrImage na napili. Tatawagan namin ang modelong ito na FlickrBombImage.

Dahil responsable ang modelong ito sa pagsubaybay sa kasalukuyang napiling imahe sa pagitan ng mga paglo-load ng pahina, kailangang malaman kung anong lokalstorage store ang gagamitin.Titiyakin ng unang linya na mayroong suporta para sa localstorage, at pagkatapos ay lilikha ng tindahan na gagamitin namin upang manatili ang napiling imahe.

Pinapayagan kami ng backbone na tukuyin ang isang .initialize () na pagpapaandar na tatawagin kapag nilikha ang isang halimbawa ng modelo. Ginagamit namin ang pagpapaandar na ito sa FlickrBombImage upang lumikha ng isang bagong halimbawa ng koleksyon ng FlickrImages, ipasa ang mga keyword na gagamitin para sa imaheng ito, at pagkatapos ay kunin ang mga imahe mula sa Flickr.

Ang function na .loadFirstImage () ay naipasa bilang isang callback upang tumakbo kapag na-load ang mga imahe mula sa Flickr. Tulad ng maaari mong hulaan, ang pagpapaandar na ito ay nagtatakda ng kasalukuyang imahe upang maging una sa koleksyon mula sa Flickr. Hindi nito ginagawa ito kung ang kasalukuyang imahe ay naitakda na.

Gagamitin din namin ang mga callback ng katangian ng Backbone upang mapagana ang aming function na .changeSrc () kapag nagbago ang katangiang src ng modelong ito. Ang lahat ng ginagawa ng callback na ito ay tumawag sa .save (), isang function na backbone model na nagpapatuloy sa mga katangian ng modelo sa anumang layer ng store na naipatupad (sa aming lokal na kaso). Sa ganitong paraan, tuwing binago ang napiling imahe, agad itong nagpapatuloy.

Ang View Layer

Ngayong nasulat na namin ang lahat ng backend (well, frontend backend) na code na nakasulat, maaari naming pagsamahin ang Mga View. Ang mga panonood sa Backbone ay medyo magkakaiba pagkatapos ang mga pagtingin sa iba pang tradisyonal na mga balangkas ng MVC. Habang ang isang view ay karaniwang nag-aalala lamang sa sarili nito sa pagtatanghal, responsable din ang isang Backbone View para sa pag-uugali. Nangangahulugan iyon na ang iyong View ay hindi lamang tumutukoy sa hitsura ng isang bagay, kundi pati na rin kung ano ang dapat gawin nito kapag nakikipag-ugnay.

Ang isang View ay karaniwang (ngunit hindi palaging) nakatali sa ilang data, at dumaan sa tatlong mga yugto upang makabuo ng markup ng pagtatanghal mula sa data na iyon:

1. Ang View object ay pinasimulan, at isang walang laman na elemento ang nilikha.
2. Ang pag-andar ng render ay tinatawag, na bumubuo ng markup para sa view sa pamamagitan ng pagpasok nito sa elemento na nilikha sa nakaraang hakbang.
3. Ang elemento ay nakakabit sa DOM.

Ito ay maaaring parang isang pulutong ng trabaho upang makabuo ng ilang markup, at wala pa kami sa bahagi ng pag-uugali ng View, ngunit mahalaga ito, at narito kung bakit. Sa tuwing binabago mo ang mga elemento na nasa DOM, nag-uudyok ka ng isang bagay na tinatawag na isang browser refow. Ang isang reflow ay muling kinalkula ng browser kung paano nakaposisyon ang bawat bagay sa pahina. Ang pagsasalamin ng browser ay maaaring maging masama para sa pagganap kung tinawag sa loob ng isang drag o baguhin ang laki ng kaganapan, na nagpapaputok sa isang napakaikling agwat, ngunit mas masahol pa, ang hitsura nila ay palpak. Sa pamamagitan ng kumplikadong pagmamanipula ng pahina, maaari mo talagang makita ang mga elemento na naidaragdag sa pahina, at naisagawa ang muling pagpoposisyon ng mga elemento. Kasunod sa pattern ng pag-una ng Backbone, pag-render, at pag-attach, ginagarantiyahan mo ang isang solong pag-iilaw, at ang mga pagbabago sa pahina ay magiging pansamantalang instant, anuman ang pagiging kumplikado ng pagmamanipula ng elemento.

Ang FlickrBombImageView

Ang mga pagpapaandar ng view na ito ay tinanggal para sa pagiging maikli, ang source code sa kabuuan nito ay magagamit sa GitHub: github.com/zurb/flickrbomb

Sa tuktok ng View, mayroon kaming pares na tukoy na mga katangian ng Backbone. ginagamit ang tagName at className upang tukuyin ang tag at klase na mailalapat sa elemento ng View na ito. Tandaan na ang hakbang na isa sa Paglikha ng paglikha ay lumilikha ng isang object, at dahil ang paglikha na iyon ay pinangangasiwaan ng Backbone, kailangan naming tukuyin ang elemento at klase. Tandaan na ang Backbone ay may makatuwirang mga default; kung tinanggal namin ang mga katangiang ito, ang isang div ay ginagamit bilang default, at walang klase ang ilalapat maliban kung tinukoy mo ang isa.

Ang katangian ng template ay isang kombensyon, ngunit hindi kinakailangan. Ginagamit namin ito dito upang tukuyin ang pag-andar ng template ng JavaScript na gagamitin namin upang mabuo ang aming markup para sa view na ito. Ginagamit namin ang _.template () na pagpapaandar na kasama sa Underscore.js, ngunit maaari mong gamitin kung alinmang templating engine ang gusto mo, hindi namin hinuhusgahan ka.

Sa aming function na .initialize () inilalabas namin ang string ng mga keyword mula sa tag ng imahe, at pagkatapos ay lumilikha ng isang modelo ng FlickrBombImage gamit ang mga keyword na iyon. Pinagbubuklod din namin ang .addImage () na pagpapaandar na tatakbo kapag ang isang FlickrImage ay idinagdag sa koleksyon ng FlickrImages. Idaragdag ng pagpapaandar na ito ang bagong idinagdag na FlickrImage sa aming flyout ng tagapili ng imahe. Ang huli at pinakamahalagang linya ay ang umiiral ang .updateSrc () na pagpapaandar sa apoy kapag ang kasalukuyang napiling FlickrImage ay binago. Kapag ang kasalukuyang imahe ay binago sa modelo, tatakbo ang pagpapaandar na ito, i-update ang katangian ng src ng elemento ng imahe, at baguhin ang laki ng CSS at i-crop ang imahe upang magkasya sa loob ng mga sukat ng imahe na tinukoy ng gumagamit.

mga kaganapan: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhoutout a.prev": "prevFlickrPhoutout a.prev": "prevFlickrPhoutout a.prev": "prevFlickrPhttout "}

Ang pagsunod sa .initialize () mayroon kaming bahagi ng pag-uugali ng View. Nagbibigay ang Backbone ng isang maginhawang paraan upang magbigkis ng mga kaganapan gamit ang isang object ng mga kaganapan. Gumagamit ang object ng mga kaganapan ng jQuery .delegate () na paraan upang gawin ang aktwal na pagbubuklod sa elemento ng View, upang anuman ang gawin mong pagmamanipula sa elemento sa loob ng pagtingin, gagana pa rin ang lahat ng iyong mga nakagapos na kaganapan. Gumagana ito tulad ng jQuery .live (), maliban sa halip na magbigkis ng mga kaganapan sa buong dokumento, maaari mong itali ang mga ito sa loob ng saklaw ng anumang elemento. Ang susi ng bawat pagpasok sa mga kaganapan na bagay ay binubuo ng kaganapan at tagapili, ipinapahiwatig ng halaga ang pagpapaandar na dapat na nakatali sa kaganapang iyon. Tandaan na ang .delegate () ay hindi gumagana sa ilang mga kaganapan tulad ng isumite, tingnan ang dokumentasyon ng jQuery .live () para sa isang kumpletong listahan ng mga suportadong kaganapan.

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

Panghuli, mayroon kaming function na .render () na responsable para sa paglikha ng aming markup at paggawa ng anumang karagdagang gawain na hindi maaaring gampanan hanggang sa maidagdag ang View markup sa elemento ng View. Pagkatapos naming mai-render ang aming template, kailangan naming tumawag .fetch () sa aming FlickrBombImage. Ang .fetch () ay isang function ng Backbone na nakakakuha ng pinakabagong kopya ng modelo mula sa layer ng pagtitiyaga. Kung nai-save namin ang modelong ito dati, .fetch () ay kukunin ang data na ito ngayon. Matapos makuha ang imahe kailangan nating tawagan ang sukat upang mai-posisyon ito nang tama.

Ang Stretch ng Bahay

Sa lahat ng mga piraso sa lugar, ang kailangan lang nating gawin ngayon ay hanapin ang mga imahe ng placeholder sa pahina at palitan ang mga ito ng mga nai-render na view ng FlickrBombImage.

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

Ang maliit na snip na ito ay kailangang patakbuhin sa ilalim ng pahina, o sa isang dokumento na handa nang callback, upang matiyak na mahahanap nito ang mga imaheng placeholder na papalitan nito. Ginagamit namin ang kombensyon ng pagtukoy ng flickr: // [KEYWORD] sa katangian ng src ng isang image tag upang ipahiwatig na dapat itong mapunan ng mga imahe mula sa Flickr. Nahanap namin ang mga elemento ng imahe na may isang katugmang katangian ng src, lumikha ng isang bagong FlickrBombImageView, at pagkatapos ay palitan ang imahe ng sa amin. Kumuha kami ng isang kopya ng orihinal na imahe at ipinapasa ito sa aming FlickrBombView, upang maaari naming hilahin ang ilang karagdagang mga pagpipilian sa pagsasaayos na maaaring tinukoy sa elemento.

Ang huling resulta ng lahat ng pagsusumikap na iyon ay isang napaka-simpleng API para sa mga taong gumagamit ng silid-aklatan. Maaari lamang nilang tukuyin ang mga tag ng imahe gamit ang flickr: // Convention, i-drop ang FlickrBomb code sa ilalim ng kanilang pahina, at bam, mayroon silang mga imahe ng placeholder mula sa Flickr.

Gumagana nang mahusay sa malalaking mga web app din

Mayroon kaming isang malaking ol web app na tinatawag na Kapansin-pansin, na isinulat nang walang pag-aalala para sa pagbuo ng nilalaman ng client-side. Kapag nais naming gawing singilin ang mga seksyon ng app turbo sa pamamagitan ng pagbuo ng bahagi ng client ng nilalaman, pinili namin ang Backbone. Ang mga dahilan ay pareho: nais namin ang isang magaan na balangkas upang matulungan ang panatilihin ang code na maayos, ngunit hindi pilitin kaming muling isipin ang buong aplikasyon.

Inilunsad namin ang mga pagbabago nang mas maaga sa taong ito na may mahusay na tagumpay, at kumakanta ng papuri sa Backbones mula pa noon.

Karagdagang mga mapagkukunan

Maraming higit pa sa Backbone kaysa sa aking sakop sa artikulong ito, ang bahagi ng C (controller) ng MVC (model view controller) para sa mga nagsisimula, na talagang isang R (router) sa pinakabagong bersyon. At lahat ng ito ay sakop sa dokumentasyong Backbone, isang magaan na Sabado ng umaga na nabasa:
documentcloud.github.com/backbone/

Kung mas maraming tradisyonal na mga tutorial ang bagay sa iyo, pagkatapos suriin ang napakahusay na dokumentadong code ng todo application na nakasulat sa Backbone:
documentcloud.github.com/backbone/docs/todos.html

Nakaraang Artikulo.