Úsáid Backbone.js chun idirghníomhaíochtaí a bhrostú

Údar: Monica Porter

Dáta An Chruthaithe: 13 Márta 2021

An Dáta Nuashonraithe: 15 Bealtaine 2024

Úsáid Backbone.js chun idirghníomhaíochtaí a bhrostú - Cruthaitheach

Ábhar

Tosaímid ansin
Ár gcéad mhúnla
Bailiúchán íomhánna
An FlickrBombImage
An Sraith Amharc
An FlickrBombImageView
An Sín Baile
Oibríonn sé go hiontach le apps gréasáin móra ol freisin
Acmhainní breise

Má tá tú ag iarraidh uirlis bheag JavaScript a thógáil go tapa, is dócha nach bhfuil tú ag smaoineamh ar chreat a úsáid. Níos éasca roinnt cód jQuery a hackáil le chéile seachas creat nua a shuiteáil agus a fhoghlaim, ceart? Mícheart, is creat gliú sár-éadrom é Backbone.js a bhreathnaíonn díreach cosúil leis an sean-JavaScript rialta a bhíodh á scríobh agat.

Déanaimid a lán fréamhshamhlacha statacha anseo ag ZURB, mar is maith linn a bheith in ann cliceáil trí leathanaigh gan aon chód iardhíola a scríobh. Go minic, thiocfaimis isteach íomhánna suaracha áiteacha áitribh, nó uaireanta rachaimis ag cuardach Flickr le haghaidh íomhánna samplacha chun cabhrú linn na rudaí a d’fhéadfadh a bheith sa dréacht deiridh a shamhlú. Is é sin go dtí Dé hAoine draíochta amháin, nuair a shocraíomar go mbeadh sé uamhnach roinnt JavaScript a scríobh chun ár gcuid fadhbanna a réiteach. Theastaigh uainn a bheith in ann grianghraif ar Flickr a chuardach agus a roghnú, go díreach ó na híomhánna áitritheora féin. FlickrBomb a thabharfaimis air, agus seo an scéal faoin gcaoi ar thógamar é ag úsáid Backbone.js.

Moltar go mór duit breathnú go gasta ar FlickrBomb sula léann tú. Tá sé ar cheann de na déileálacha sin “is fiú míle focal” cliceáil. Téigh ar aghaidh, fanfaimid.

Tá a lán creataí JavaScript ar an mbloc na laethanta seo, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Ach thaitin Backbone.js linn don tionscadal áirithe seo ar chúiseanna éagsúla:

1. Tá sé éadrom (100% saor ó saill i ndáiríre)

de réir meáchain, agus an leagan pacáilte is déanaí thart ar 4.6kb
i gcód, agus é díreach os cionn 1,000 líne de chód, níl sé an-deacair rian cruachta a leanúint síos go dtí na hinmheánaigh gan d’intinn a chailleadh

2. Tá cuma JavaScript air

toisc gur JavaScript é, sin é agus sin uile
úsáideann sé jQuery, a bhfuil a fhios ag do sheanmháthair fiú na laethanta seo

3. Marthanacht Super simplí

as an mbosca leanann sé sonraí ar aghaidh go dtí deireadh seachtaine (trí REST), ach trí bhreiseán amháin a ligean isteach sábhálfaidh sé go stóráil áitiúil ina ionad
toisc go ndéanann sé an API marthanachta a bhaint, d’fhéadfaimis go leanfadh sé ar aghaidh le deireadh seachtaine REST ach an breiseán stórála áitiúil a bhaint

Tosaímid ansin

Toisc nach bhfuil i Backbone.js ach JavaScript, níl le déanamh againn ach é a áireamh in éineacht le Underscore.js ar an leathanach. Ní spleáchas crua do Chnámh droma per se é jQuery, ach táimid chun é a úsáid mar sin cuirfimid san áireamh é anseo. Déanfaimid an breiseán stórála áitiúil a nascadh freisin, ós rud é nach bhfuilimid ag iarraidh cur isteach ar iar-deireadh a chur ar bun. Tabhair faoi deara go raibh na comhaid á nascadh go díreach anseo ar mhaithe le simplíocht, ach ba cheart duit do shócmhainní féin a óstáil i gcónaí i dtáirgeadh.

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>

Baineann an cód seo a leanas go léir san alt seo go sonrach lenár bhfeidhmchlár, ionas gur féidir linn é a áireamh i gcomhad app.js, nó díreach inlíne más é sin do rud. Ná cuimhnigh ach é a áireamh i ndiaidh Cnámh droma. Cumasaíonn cnámh droma codanna dár bhfeidhmchlár a theibí, chun iad a dhéanamh modúlach le haghaidh athúsáid éasca agus níos inléite do dhaoine eile. Chun an astarraingt sin a léiriú is fearr, bhí siad chun dearadh FlickrBomb a mhíniú ón mbun aníos, ag tosú leis na samhlacha, agus ag críochnú leis na radharcanna.

Ár gcéad mhúnla

Ba é an chéad tasc a bhí le dul i ngleic leis ná na grianghraif a tharraingt ó Flickr. Tá múnlú FlickrImage i gcnámh droma simplí go leor, cruthóimid samhail nua darb ainm FlickrImage, agus cuirfimid roinnt modhanna leis chun cabhrú linn ordóga de mhéideanna éagsúla a fháil.

Rudaí is féidir a mhaireachtáil is ea múnlaí i gCnámh droma, agus a bhfuil roinnt feidhmeanna bainteach leo, cosúil le samhlacha i gcreataí MVC eile. Is í an chuid draíochta de mhúnlaí Cnámh droma gur féidir linn imeachtaí a cheangal le tréithe, ionas gur féidir linn ár dtuairimí a nuashonrú chun é sin a léiriú nuair a athraíonn an tréith sin. Ach táimid ag dul chun tosaigh orainn féin.

Nuair a tharraingímid na grianghraif ó Flickr, táimid chun faisnéis leordhóthanach a fháil chun URLanna a chruthú do na méideanna go léir. Fágtar faoin tionól sin dúinn, áfach, agus mar sin chuireamar an fheidhm .image_url () i bhfeidhm a thógann paraiméadar méide agus a chuireann nasc poiblí ar ais. Toisc gur samhail cnámh droma é seo, is féidir linn this.get () a úsáid chun tréithe ar an tsamhail a rochtain. Mar sin leis an tsamhail seo, is féidir linn an méid seo a leanas a dhéanamh in áiteanna eile sa chód chun URL íomhá Flickr a fháil.

flickrImage.image_url (‘mór’)

Gonta go leor, eh? Ó tharla go mbaineann an tsamhail seo go sonrach lenár bhfeidhmchlár, cuirfimid roinnt feidhmeanna fillteáin leis na méideanna íomhá lán-mhéid agus ordóg.

Bailiúchán íomhánna

Pléann FlickrBomb le bailiúcháin íomhánna, ní íomhánna aonair, agus tá bealach áisiúil ag Backbone chun é seo a shamhaltú. Is é atá sa Bhailiúchán ainmnithe go cuí ná an méid a úsáidfimid chun íomhánna Flickr a ghrúpáil le chéile le haghaidh áititheoir aonair.

Tá cúpla rud le tabhairt faoi deara anseo. Ar dtús, an Mionsamhail tréith a insíonn do na bailiúcháin cén cineál samhail atá á bailiú aige. Tá roinnt tréithe againn freisin a thosaíomar le húsáid níos déanaí: is í an eochair ár n-eochair API Flickr, beidh tú ag iarraidh sreangán d'eochair API Flickr féin a chur in ionad flickrbombAPIkey. Tá eochair API Flickr saor in aisce agus éasca, ach lean an nasc seo: www.flickr.com/services/api/misc.api_keys.html. Is í an tréith leathanaigh an leathanach reatha de ghrianghraif Flickr a bhfuilimid air.

Is é an modh mór anseo .fetch (), a tharraingíonn siar sonraí maidir le grianghraif a tharraingt ón API Flickr. Chun fadhbanna le hiarrataí tras-fearainn a sheachaint, táimid ag úsáid JSONP, a thacaíonn API Flickr agus jQuery araon. Ba cheart go mbeadh na paraiméadair eile atá á gcur ar aghaidh againn chuig an API féinmhínithe. Is díol spéise ar leith na feidhmeanna cnámh droma a thugtar anseo. Sa ghlao-rath ar ais táimid ag úsáid .add (), feidhm a ghlacann raon tréithe samhail, a chruthaíonn cásanna eiseamláireacha ó na tréithe sin, agus a chuireann leis an mbailiúchán iad.

Athraíonn na feidhmeanna .nextPage () agus .prevPage () an leathanach a theastaíonn uainn a thaispeáint ar dtús,
bain úsáid as an bhfeidhm bailiúcháin .remove (), chun na samhlacha go léir atá ann a bhaint den
bailiúchán, agus ansin glaoigh ar beir chun na grianghraif a fháil don leathanach reatha (nach bhfuilimid ach
athraithe).

An FlickrBombImage

Ag obair ar ár mbealach suas, teastaíonn samhail amháin eile uainn chun íomhá an áitritheora a léiriú, a bheidh comhdhéanta de bhailiúchán de FlickrImages, agus an FlickrImage reatha a roghnaíodh. Tabharfaimid FlickrBombImage ar an tsamhail seo.

Ó tharla go bhfuil an tsamhail seo freagrach as súil a choinneáil ar an íomhá atá roghnaithe faoi láthair idir ualaí leathanaigh, ní mór go mbeadh a fhios aici cén stór stórais áitiúil atá le húsáid.Cinnteoidh an chéad líne go bhfuil tacaíocht ann do stóráil áitiúil, agus ansin cruthófar an stór a úsáidfimid chun leanúint den íomhá roghnaithe.

Ligeann cnámh droma dúinn feidhm .initialize () a shainiú a thabharfar air nuair a chruthaítear sampla den mhúnla. Úsáidimid an fheidhm seo i FlickrBombImage chun sampla nua de bhailiúchán FlickrImages a chruthú, pas a fháil ar na heochairfhocail a úsáidfear don íomhá seo, agus ansin na híomhánna ó Flickr a fháil.

Ritheadh an fheidhm .loadFirstImage () mar aisghlaoch le rith nuair a luchtaíodh na híomhánna ó Flickr. Mar is féidir leat buille faoi thuairim is dócha, socraíonn an fheidhm seo gurb í an íomhá reatha an chéad cheann sa bhailiúchán ó Flickr. Ní dhéanann sé é seo má tá an íomhá reatha socraithe cheana féin.

Beimid ag úsáid aisghlaonna tréith Backbone freisin chun ár bhfeidhm .changeSrc () a lasadh nuair a athraíonn tréith src an mhúnla seo. Is é an t-aisghlaoch seo go léir ná glao .save (), feidhm mhúnla cnámh droma a mhaireann tréithe an mhúnla do cibé ciseal stórais a cuireadh i bhfeidhm (inár gcás siopa áitiúil). Ar an mbealach seo, aon uair a athraítear an íomhá roghnaithe, leanann sí ar aghaidh láithreach.

An Sraith Amharc

Anois go bhfuil an cód backend (bhuel, frontend backend) scríofa againn, is féidir linn na Radhairc a chur le chéile. Tá na tuairimí i gCnámh droma beagáinín difriúil ná radhairc i gcreataí MVC traidisiúnta eile. Cé nach mbaineann dearcadh de ghnáth ach le cur i láthair, tá Amharc Cnámh droma freagrach as iompar freisin. Ciallaíonn sé sin go sainmhíníonn do Amharc ní amháin an chuma atá ar rud éigin, ach freisin an méid ba cheart dó a dhéanamh agus é ag idirghníomhú leis.

Is gnách go mbíonn Amharc ceangailte (ach ní i gcónaí) le roinnt sonraí, agus téann sé trí chéim chun marcáil cur i láthair a ghiniúint ó na sonraí sin:

1. Cuirtear tús leis an réad Amharc, agus cruthaítear eilimint folamh.
2. Tugtar an fheidhm rindreála, ag giniúint an mharcála don amharc trína chur isteach san eilimint a cruthaíodh sa chéim roimhe seo.
3. Tá an eilimint ceangailte leis an DOM.

D’fhéadfadh sé seo a bheith cosúil le go leor oibre chun roinnt marcála a ghiniúint, agus níl muid fiú sa chuid iompair den Amharc fós, ach tá sé tábhachtach, agus seo an fáth. Gach uair a athraíonn tú eilimintí atá sa DOM, spreagann tú rud ar a dtugtar reflow brabhsálaí. Athlíon is ea an brabhsálaí ag athríomh an chaoi a bhfuil gach rud ar an leathanach suite. Is féidir le hathnuachan brabhsálaí a bheith dona don fheidhmíocht má ghlaotar orthu laistigh d’imeacht tarraing nó athraigh méid, a thiteann ag eatramh an-ghearr, ach níos measa fós, tá cuma sloppy orthu. Le cúbláil leathanaigh chasta, is féidir leat a fheiceáil i ndáiríre eilimintí á gcur leis an leathanach, agus eilimintí curtha i bhfeidhm ag athshuíomh. De réir patrún tosaigh, rindreála agus ceangail Backbone, ráthaíonn tú athlíonadh amháin, agus beidh na hathruithe ar an leathanach meandarach láithreach, beag beann ar chastacht ionramhála na n-eilimintí.

An FlickrBombImageView

Fágadh feidhmeanna an dearcadh seo ar lár mar gheall ar ghiorracht, tá an cód foinse ina iomláine ar fáil ar GitHub: github.com/zurb/flickrbomb

Ag barr an Amharc, tá cúpla tréithe ar leith againn maidir le Cnámh droma. Úsáidtear tagName agus className chun an chlib agus an aicme a chuirfear i bhfeidhm ar an eilimint View seo a shainiú. Cuimhnigh go bhfuil céim a haon de chruthú View ag cruthú réad, agus ós rud é go ndéanann cnámh droma an cruthú sin a láimhseáil, caithfimid an eilimint agus an aicme a shonrú. Tabhair faoi deara go bhfuil mainneachtainí ciallmhara ag cnámh droma; má fhágtar na tréithe seo ar lár, úsáidtear div de réir réamhshocraithe, agus ní chuirfear aon aicme i bhfeidhm mura sonraíonn tú ceann.

Is é atá sa tréith teimpléid ná coinbhinsiún, ach níl sé ag teastáil. Táimid á úsáid anseo chun feidhm teimpléad JavaScript a shonrú a úsáidfimid chun ár marcáil a ghiniúint don dearcadh seo. Úsáidimid an fheidhm _.template () atá san áireamh in Underscore.js, ach is féidir leat an t-inneall teimpléid is fearr leat a úsáid riamh, ní thabharfaimid breithiúnas ort.

Inár bhfeidhm .initialize () táimid ag tarraingt an tsreang eochairfhocail ón gclib íomhá, agus ansin ag cruthú samhail FlickrBombImage ag baint úsáide as na heochairfhocail sin. Táimid ag ceangal na feidhme .addImage () atá le rith freisin nuair a chuirtear FlickrImage leis an mbailiúchán FlickrImages. Cuirfidh an fheidhm seo an FlickrImage nua-bhreise leis an roghnóir íomhá atá againn. Tá an líne dheireanach agus is tábhachtaí ag ceangal na feidhme .updateSrc () le tine nuair a athraítear an FlickrImage atá roghnaithe faoi láthair. Nuair a athraítear an íomhá reatha sa mhúnla, rithfidh an fheidhm seo, nuashonróidh sí tréith src na heiliminte íomhá, agus athróidh CSS an íomhá chun í a oiriúnú laistigh de na toisí íomhá a shonróidh an t-úsáideoir.

imeachtaí: {"cliceáil .setupIcon": "clickSetup", "cliceáil .flickrbombFlyout a.photo": "selectImage", "cliceáil .flickrbombFlyout a.next": "nextFlickrPhotos", "cliceáil .flickrbombFlyout a.prev": "prevFlickrPhotos "}

Tar éis .initialize () tá an chuid iompair den Amharc againn. Soláthraíonn cnámh droma bealach áisiúil chun imeachtaí a cheangal le réad imeachtaí. Úsáideann réad na n-imeachtaí an modh jQuery .delegate () chun an ceangailteach iarbhír a dhéanamh leis an eilimint View, ionas go n-oibreoidh d’imeachtaí ceangailte go léir, is cuma cén ionramháil a dhéanann tú ar an eilimint taobh istigh den amharc. Oibríonn sé díreach cosúil le jQuery .live (), ach amháin in ionad imeachtaí a cheangal leis an doiciméad iomlán, is féidir leat iad a cheangal faoi raon feidhme aon eilimint. Is éard atá in eochair gach iontrála san réad imeachtaí an t-imeacht agus an roghnóir, léiríonn an luach an fheidhm sin ba chóir a cheangal leis an teagmhas sin. Tabhair faoi deara nach n-oibríonn .delegate () le roinnt imeachtaí cosúil le cuir isteach, féach an cháipéisíocht jQuery .live () le haghaidh liosta iomlán d’imeachtaí tacaithe.

rindreáil: feidhm () {$ (this.el) .html (this.template ()); seo.image.fetch (); seo.resize (); seo ar ais;}

Ar deireadh, tá an fheidhm .render () againn atá freagrach as ár mharcáil a chruthú agus as aon obair bhreise nach féidir a dhéanamh go dtí go mbeidh an marcmharc View curtha leis an eilimint View. Tar éis dúinn ár dteimpléad a sholáthar, caithfimid .fetch () a ghlaoch ar ár FlickrBombImage. Is feidhm cnámh droma é .fetch () a fhaigheann an chóip is déanaí den mhúnla ón gciseal marthanachta. Dá sábhálfaimis an tsamhail seo roimhe seo, d’aisghabháil .fetch () na sonraí sin anois. Tar éis an íomhá a fháil caithfimid méid a ghlaoch chun í a chur i gceart.

An Sín Baile

Agus na píosaí go léir i bhfeidhm, níl le déanamh againn anois ach na híomhánna áitritheora a fháil ar an leathanach agus na radharcanna rindreáilte FlickrBombImage a chur ina n-áit.

$ ("img [src ^ = 'flickr: //']") .each (feidhm () {var img = $ (seo), flickrBombImageView = nua FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView. rindreáil (). el);});

Is gá an snip bheag seo a reáchtáil ag bun an leathanaigh, nó i ndoiciméad réidh le glao-ar-ais, lena chinntiú go bhféadann sé na híomhánna áitritheora a thiocfaidh ina áit a fháil. Úsáidimid an coinbhinsiún maidir le flickr a shonrú: // [KEYWORD] sa tréith src de chlib íomhá chun a thaispeáint gur chóir go mbeadh íomhánna ó Flickr ann. Faighimid eilimintí íomhá le tréith src meaitseála, cruthaímid FlickrBombImageView nua, agus ansin cuirimid ár n-íomhá in áit na híomhá. Glacaimid cóip den bhuníomhá agus cuirimid ar aghaidh í chuig ár FlickrBombView, ionas gur féidir linn roinnt roghanna cumraíochta breise a d'fhéadfadh a bheith sonraithe ar an eilimint a tharraingt.

Is é toradh deiridh na hoibre crua sin API an-simplí do dhaoine a úsáideann an leabharlann. Is féidir leo clibeanna íomhá a shainiú ach an coinbhinsiún flickr: // a úsáid, an cód FlickrBomb a fhágáil ag bun a leathanaigh, agus bam, tá íomhánna áitritheora acu ó Flickr.

Oibríonn sé go hiontach le apps gréasáin móra ol freisin

Tá aip gréasáin ol mór againn darb ainm Notable, a scríobhadh gan imní faoi ábhar a ghiniúint ar thaobh an chliaint. Nuair a theastaigh uainn codanna den turbo app a ghearradh trí thaobh an chliaint ábhair a ghiniúint, roghnaigh muid Cnámh droma. Bhí na cúiseanna mar an gcéanna: theastaigh creat éadrom uainn chun an cód a choinneáil eagraithe, ach gan iallach a chur orainn athmhachnamh a dhéanamh ar an bhfeidhmchlár iomlán.

D'éirigh go maith linn na hathruithe níos luaithe i mbliana, agus táimid ag canadh moladh Backbones ó shin.

Acmhainní breise

Tá i bhfad níos mó i gceist le Cnámh droma ná an méid a chlúdaigh mé san alt seo, an chuid C (rialtóir) de MVC (rialtóir amharc samhail) do thosaithe, atá i ndáiríre R (ródaire) sa leagan is déanaí. Agus tá sé uile clúdaithe i gcáipéisíocht an Chnámh droma, léigh maidin Shathairn éadrom:
documentcloud.github.com/backbone/

Más rud é gur ranganna teagaisc níos traidisiúnta tú, féach ar chód doiciméadaithe an fheidhmchláir todo seo atá scríofa i gCnámh droma:
documentcloud.github.com/backbone/docs/todos.html

Airteagal Roimhe Seo