Садржај
- Почнимо онда
- Наш први модел
- Колекција слика
- Тхе ФлицкрБомбИмаге
- Слој погледа
- Тхе ФлицкрБомбИмагеВиев
- Тхе Хоме Стретцх
- Одлично функционише и са великим ол веб апликацијама
- Додатна средства
Ако желите брзо да направите мали ЈаваСцрипт алат, вероватно не размишљате о коришћењу оквира. Једноставније је хаковати неки јКуери код него инсталирати и научити нови оквир, зар не? Погрешно, Бацкбоне.јс је супер лаган оквир лепка који изгледа баш као и уобичајени стари ЈаваСцрипт који сте навикли да пишете.
Овде на ЗУРБ радимо пуно статичких прототипова, јер волимо да можемо да кликнемо на странице без писања било каквог позадинског кода. Често бисмо убацили сиве слике сивих резервираних места, или бисмо понекад тражили узорке слика на Флицкр-у како би нам помогли да визуализујемо шта би могло ићи у коначном нацрту. То је до једног магичног петка, када смо закључили да би било сјајно написати неки ЈаваСцрипт за решавање наших проблема. Желели смо да можемо да претражујемо и бирамо фотографије на Флицкр-у, директно са самих слика чувара места. Назвали бисмо га ФлицкрБомб, а ово је прича о томе како смо га изградили користећи Бацкбоне.јс.
Препоручује се да на брзину погледате ФлицкрБомб пре читања. То је једна од оних понуда „клик вреди хиљаду речи“. Само напред, сачекаћемо.
У блоку је данас пуно ЈаваСцрипт оквира, СпроутЦоре, ЈаваСцриптМВЦ, Спине, Самми, Кноцкоут. Али свидео нам се Бацкбоне.јс за овај пројекат из неколико различитих разлога:
1. Лаган је (заправо 100% без масти)
- тежине, а најновија верзија упакована је око 4,6 кб
- у коду, јер је нешто више од 1.000 редова кода, није страшно тешко пратити траг стека до унутрашњости, а да не изгубите разум
2. Изгледа као ЈаваСцрипт
- јер је ЈаваСцрипт, то је то и то је све
- користи јКуери, који чак и ваша бака данас зна
3. Супер једноставна упорност
- из кутије задржава податке на позадини (путем РЕСТ-а), али додавањем једног додатка сачуваће се у локалном складишту
- јер апстрахира АПИ постојаности, могли бисмо га задржати на РЕСТ позадини уклањањем локалног додатка за складиштење
Почнимо онда
Пошто је Бацкбоне.јс само ЈаваСцрипт, све што треба да урадимо је да га укључимо заједно са Ундерсцоре.јс на страницу. јКуери сам по себи није тешка зависност Бацкбоне-а, али ми ћемо га користити па ћемо га овде укључити. Такође ћемо повезати додатак за локалну меморију, јер не желимо да се гњавимо око постављања позадине. Имајте на уму да су датотеке ради директног повезивања овде датотеке, али увек треба да хостујете сопствена средства у производњи.
скрипта срц = "хттп://ајак.гооглеапис.цом/ајак/либс/јкуери/1.6.1/јкуери.мин.јс"> / скрипта> скрипта срц = "хттп://доцументцлоуд.гитхуб.цом/бацкбоне/ бацкбоне-мин.јс "> / сцрипт> сцрипт срц =" хттп://доцументцлоуд.гитхуб.цом/ундерсцоре/ундерсцоре-мин.јс "> / сцрипт> сцрипт срц =" хттпс://рав.гитхуб.цом/ јеромегн / Бацкбоне.лоцалСтораге / мастер / бацкбоне.лоцалСтораге-мин.јс "> / сцрипт>
Сви следећи код у овом чланку специфичан је за нашу апликацију, тако да га можемо укључити у датотеку апп.јс или само уградити ако је то ваша ствар. Само не заборавите да га укључите након Бацкбоне-а. Бацкбоне омогућава апстрактне делове наше апликације, чинећи их модуларним за једноставну поновну употребу и читљивијим за друге. Да би најбоље илустровали ту апстракцију, објаснили смо дизајн ФлицкрБомба одоздо према горе, почевши од модела, а завршавајући погледима.
Наш први модел
Први задатак са којим ћемо се бавити је извлачење фотографија са Флицкр-а. Моделирање ФлицкрИмаге у окосници је довољно једноставно, направићемо нови модел под називом ФлицкрИмаге и додаћемо неке методе које ће нам помоћи да добијемо палчеве различите величине.
вар ФлицкрИмаге = Бацкбоне.Модел.ектенд ({фуллсизе_урл: фунцтион () {ретурн тхис.имаге_урл ('медиум');}, тхумб_урл: фунцтион () {ретурн тхис.имаге_урл ('скуаре');}, имаге_урл: фунцтион ( сизе) {вар сизе_цоде; свитцх (сизе) {цасе 'скуаре': сизе_цоде = '_с'; бреак; // 75к75 цасе 'медиум': сизе_цоде = '_з'; бреак; // 640 на најдужем бочном кућишту 'ларге ': сизе_цоде =' _б '; бреак; // 1024 на најдужој страни подразумевано: сизе_цоде =' ';} ретурн "хттп: // фарм" + тхис.гет (' фарм ') + ".статиц.флицкр.цом / "+ тхис.гет ('сервер') +" / "+ тхис.гет ('ид') +" _ "+ тхис.гет ('сецрет') + сизе_цоде +" .јпг ";}})
Модели у Бацкбоне-у су објекти који се могу одржавати и са њима су повезане неке функције, слично као модели у другим МВЦ оквирима. Магични део Бацкбоне модела је тај што можемо да везујемо догађаје за атрибуте, тако да када се тај атрибут промени можемо да ажурирамо своје ставове како би то одражавали. Али помало идемо испред себе.
Када повучемо фотографије са Флицкр-а, добићемо довољно информација за стварање УРЛ-ова за све величине. Међутим, тај склоп је препуштен нама, па смо имплементирали функцију .имаге_урл () која узима параметар величине и враћа јавну везу. Будући да је ово основни модел, можемо да користимо тхис.гет () за приступ атрибутима на моделу. Дакле, са овим моделом можемо учинити следеће на другом месту у коду да бисмо добили УРЛ Флицкр слике.
флицкрИмаге.имаге_урл (’велики’)
Прилично концизно, зар не? Будући да је овај модел специфичан за нашу апликацију, додаћемо неке функције омота за величине пуне величине и слике палца.
Колекција слика
ФлицкрБомб се бави колекцијама слика, а не појединачним сликама, а Бацкбоне има погодан начин за ово моделирање. Прикладно названа Збирка је оно што ћемо користити за груписање Флицкр слика у једно резервирано место.
вар ФлицкрИмагес = Бацкбоне.Цоллецтион.ектенд ({модел: ФлицкрИмаге, кључ: флицкрбомбАПИкеи, страница: 1, дохват: функција (кључне речи, успех) {вар селф = тхис; успех = успех || $ .нооп; тхис.кеивордс = кључне речи || тхис.кеивордс; $ .ајак ({урл: 'хттп://апи.флицкр.цом/сервицес/рест/', подаци: {апи_кеи: селф.кеи, формат: 'јсон', метода: 'флицкр. пхотос.сеарцх ', ознаке: тхис.кеивордс, по_страни: 9, страница: тхис.паге, лиценца: флицкрбомбЛиценсеТипес}, датаТипе:' јсонп ', јсонп:' јсонцаллбацк ', успех: функција (одговор) {селф.адд (одговор .пхотос.пхото); суццесс ();}});}, нектПаге: фунцтион (цаллбацк) {тхис.паге + = 1; тхис.ремове (тхис.моделс); тхис.фетцх (нулл, цаллбацк);}, превПаге: фунцтион (цаллбацк) {иф (тхис.паге> 1) {тхис.паге - = 1;} тхис.ремове (тхис.моделс); тхис.фетцх (нулл, цаллбацк);}});
Овде треба напоменути неколико ствари. Прво, модел атрибут говори колекцијама коју врсту модела прикупља. Такође имамо неке атрибуте које смо иницирали за употребу касније: кеи је наш Флицкр АПИ кључ, желећете да замените флицкрбомбАПИкеи низом вашег сопственог Флицкр АПИ кључа. Добивање Флицкр АПИ кључа је бесплатно и једноставно, само следите ову везу: ввв.флицкр.цом/сервицес/апи/мисц.апи_кеис.хтмл. Атрибут странице је тренутна страница Флицкр фотографија на којима се налазимо.
Овде је велика метода .фетцх (), која апстрахује детаље извлачења фотографија из Флицкр АПИ-ја. Да бисмо избегли проблеме са захтевима за више домена, користимо ЈСОНП, који подржавају и Флицкр АПИ и јКуери. Остали параметри које прослеђујемо АПИ-у требали би бити саморазумљиви. Од посебног интереса су функције Бацкбоне које су овде позване. У повратном позиву за успех користимо .адд (), функцију која узима низ атрибута модела, креира инстанце модела од тих атрибута, а затим их додаје у колекцију.
Функције .нектПаге () и .превПаге () прво мењају страницу коју желимо да прикажемо,
користите функцију сакупљања .ремове () да бисте уклонили све постојеће моделе из
колекцију, а затим позовите дохвати да бисте добили фотографије за тренутну страницу (коју ми управо
промењено).
Тхе ФлицкрБомбИмаге
Враћајући се назад, потребан нам је још један модел за представљање слике чувара места, која ће се састојати од колекције ФлицкрИмагес и тренутне ФлицкрИмаге која је изабрана. Овај модел ћемо назвати ФлицкрБомбИмаге.
вар лоцалСтораге = (суппортс_лоцал_стораге ())? нова продавница ("флицкрБомбИмагес"): нулл; вар ФлицкрБомбИмаге = Бацкбоне.Модел.ектенд ({лоцалСтораге: лоцалСтораге, инитиализе: фунцтион () {_.биндАлл (тхис, 'лоадФирстИмаге'); тхис.флицкрИмагес = нев ФлицкрИмагес (); тхис.флицкрИмагес.фетцх (тхис.гет ('кључне речи'), тхис.лоадФирстИмаге); тхис.сет (ид: тхис.гет ("ид")); тхис.бинд ('цханге: срц', тхис.цхангеСрц) ;}, цхангеСрц: фунцтион () {тхис.саве ();}, лоадФирстИмаге: фунцтион () {иф (тхис.гет ('срц') === ундефинед) {тхис.сет ({срц: тхис.флицкрИмагес. фирст (). имаге_урл ()});}}});
Будући да је овај модел одговоран за праћење тренутно одабране слике између учитавања страница, мора да зна коју локалну продавницу да користи.Први ред ће осигурати да постоји подршка за локално складиштење, а затим створите продавницу коју ћемо користити за задржавање одабране слике.
Окосница нам омогућава да дефинишемо функцију .инитиализе () која ће бити позвана када се креира инстанца модела. Ову функцију користимо у ФлицкрБомбИмаге да бисмо креирали нову инстанцу колекције ФлицкрИмагес, проследили кључне речи које ће се користити за ову слику, а затим дохватити слике са Флицкр-а.
Функција .лоадФирстИмаге () је прослеђена као повратни позив за покретање када су слике учитане са Флицкр-а. Као што вероватно можете претпоставити, ова функција поставља тренутну слику као прву у колекцији са Флицкр-а. То не чини ако је тренутна слика већ постављена.
Такође ћемо користити повратне позиве атрибута Бацкбоне да бисмо активирали нашу функцију .цхангеСрц () када се атрибут срц овог модела промени. Све што овај повратни позив зове је .саве (), функција Бацкбоне модела која задржава атрибуте модела на било којем слоју складишта који је имплементиран (у нашем случају лоцалсторе). На овај начин, кад год се промени изабрана слика, она се одмах наставља.
Слој погледа
Сад кад смо написали сав позадински (добро, интернетски позадински код) код, можемо да сложимо Виевс. Прикази у Бацкбонеу су мало другачији од погледа у другим традиционалним МВЦ оквирима. Иако се поглед обично бави само презентацијом, Бацкбоне Виев је одговоран и за понашање. То значи да ваш поглед не дефинише само како нешто изгледа, већ и шта треба да ради приликом интеракције.
Поглед је обично (али не увек) везан за неке податке и пролази кроз три фазе да би генерирао ознаку презентације из тих података:
1. Објект Виев се иницијализује и креира се празан елемент.
2. Позива се функција рендеровања која генерира ознаке за приказ уметањем у елемент креиран у претходном кораку.
3. Елемент је причвршћен за ДОМ.
Ово може изгледати као пуно рада на генерисању неких ознака, а нисмо још ни у делу понашања приказа, али је важно и ево зашто. Сваки пут када модификујете елементе који се налазе у ДОМ-у, покрећете нешто што се зове прерађивање прегледача. Поновно прилагођавање је прегледник који прерачунава положај сваке ствари на страници. Преуређивање прегледача може бити лоше за перформансе ако се позове у случају превлачења или промене величине, који се активира у врло кратком интервалу, али још горе, изгледају траљаво. Помоћу сложене манипулације страницом заправо можете видети како се елементи додају на страницу и како се елементи премештају. Следећи образац Бацкбоне-а за иницијализацију, рендеровање и прилагање, гарантујете једно преобликовање и промене на страници ће бити приметно тренутне, без обзира на сложеност манипулације елементима.
Тхе ФлицкрБомбИмагеВиев
вар ФлицкрБомбИмагеВиев = Бацкбоне.Виев.ектенд ({тагНаме: "див", цлассНаме: "флицкрбомбЦонтаинер", лоцк: фалсе, темплате: _.темплате ('див ид = "% = тхис.имаге.ид.реплаце (" ", "")%> "... / див> '), иницијализујте: фунцтион (оптионс) {_.биндАлл (тхис,' аддИмаге ',' упдатеСрц ',' сетДиментионс ',' упдатеДиментионс '); вар кључне речи = опције. имг.аттр ('срц') .реплаце ('флицкр: //', ''); тхис. $ ел = $ (тхис.ел); тхис.имаге = нев ФлицкрБомбИмаге ({кључне речи: кључне речи, ид: опције. имг.аттр ('ид')}); тхис.имаге.флицкрИмагес.бинд ('адд', тхис.аддИмаге); тхис.имаге.бинд ('цханге: срц', тхис.упдатеСрц);}, евентс: { "цлицк .сетупИцон": "цлицкСетуп", "цлицк .флицкрбомбФлиоут а.пхото": "селецтИмаге", "цлицк .флицкрбомбФлиоут а.нект": "нектФлицкрПхотос", "цлицк .флицкрбомбФлиоут а.прев": "превФлицкрПхотос"}, рендер: фунцтион () {$ (тхис.ел) .хтмл (тхис.темплате ()); тхис.имаге.фетцх (); тхис.ресизе (); врати ово;}, ...});
Функције овог приказа изостављене су због краткоће, изворни код је у целости доступан на ГитХуб-у: гитхуб.цом/зурб/флицкрбомб
На врху приказа имамо неколико специфичних атрибута Бацкбоне-а. тагНаме и цлассНаме се користе за дефинисање ознаке и класе која ће бити примењена на елемент овог приказа. Запамтите да је први корак креирања Виев стварање објекта, а пошто том креацијом управља Бацкбоне, морамо навести елемент и класу. Имајте на уму да Бацкбоне има разумне подразумеване вредности; ако изоставимо ове атрибуте, подразумевано се користи див и неће се применити ниједна класа ако га не наведете.
Атрибут предлошка је договор, али није потребан. Овде га користимо за одређивање функције ЈаваСцрипт шаблона коју ћемо користити за генерисање ознака за овај приказ. Користимо функцију _.темплате () која је укључена у Ундерсцоре.јс, али можете користити било који механизам за шаблонирање који више волите, нећемо вам судити.
У нашој функцији .инитиализе () извлачимо низ кључних речи из ознаке слике, а затим креирамо модел ФлицкрБомбИмаге помоћу тих кључних речи. Такође везујемо функцију .аддИмаге () која ће се покретати када се ФлицкрИмаге дода у колекцију ФлицкрИмагес. Ова функција ће додати ново додани ФлицкрИмаге у наш излаз за селектор слика. Последњи и најважнији ред је везивање функције .упдатеСрц () за активирање када се промени тренутно изабрани ФлицкрИмаге. Када се тренутна слика промени у моделу, ова функција ће се покренути, ажурирати атрибут срц елемента слике, а ЦСС ће променити величину и обрезати слику тако да стане у димензије слике које је одредио корисник.
догађаји: {"цлицк .сетупИцон": "цлицкСетуп", "цлицк .флицкрбомбФлиоут а.пхото": "селецтИмаге", "цлицк .флицкрбомбФлиоут а.нект": "нектФлицкрПхотос", "цлицк .флицкрбомбФлиоут а.прев": "превФлицкрПхотос "}
Следећи .инитиализе () имамо део понашања за Виев. Бацкбоне пружа погодан начин за повезивање догађаја помоћу објекта догађаја. Објекат евентс користи методу јКуери .делегате () да изврши стварно везивање за елемент Виев, тако да ће без обзира на манипулацију елементом унутар приказа сви ваши повезани догађаји и даље радити. Ради исто као јКуери .ливе (), осим што уместо да вежете догађаје за цео документ, можете их повезати у опсегу било ког елемента. Кључ сваког уноса у објекту догађаја састоји се од догађаја и селектора, вредност означава ону функцију која би требала бити везана за тај догађај. Имајте на уму да .делегате () не ради са неким догађајима као што је субмит, погледајте документацију јКуери .ливе () за комплетну листу подржаних догађаја.
рендер: фунцтион () {$ (тхис.ел) .хтмл (тхис.темплате ()); тхис.имаге.фетцх (); тхис.ресизе (); врати ово;}
И на крају, имамо функцију .рендер () која је одговорна за стварање наше ознаке и обављање било каквих додатних послова који се не могу извршити док се ознака Виев не дода елементу Виев. Након што генеришемо наш образац, морамо позвати .фетцх () на нашем ФлицкрБомбИмаге. .фетцх () је Бацкбоне функција која добија најновију копију модела из слоја постојаности. Да смо раније сачували овај модел, .фетцх () би сада преузео те податке. Након што је слика преузета, потребно је да позовемо величину да бисмо је правилно поставили.
Тхе Хоме Стретцх
Са свим деловима на месту, све што сада треба да урадимо је да пронађемо слике резервираних места на страници и заменимо их приказаним приказима ФлицкрБомбИмаге.
$ ("имг [срц ^ = 'флицкр: //']") .еацх (фунцтион () {вар имг = $ (тхис), флицкрБомбИмагеВиев = нев ФлицкрБомбИмагеВиев ({имг: имг}); имг.реплацеВитх (флицкрБомбИмагеВиев. рендер (). ел);});
Овај мали исечак треба покренути на дну странице или у повратном позиву спремном за документ, како би се осигурало да може пронаћи слике чувара места које ће заменити. Уобичајено је да специфицирамо флицкр: // [КЕИВОРД] у срц атрибуту ознаке слике да бисмо означили да би требало да буде попуњена сликама са Флицкр-а. Проналазимо елементе слике са одговарајућим срц атрибутом, креирамо нови ФлицкрБомбИмагеВиев, а затим заменимо слику нашом. Узимамо копију оригиналне слике и прослеђујемо је на наш ФлицкрБомбВиев, како бисмо могли да повучемо неке додатне опције конфигурације које су можда наведене на елементу.
Крајњи резултат толиког напорног рада је врло једноставан АПИ за људе који користе библиотеку. Они могу једноставно да дефинишу сликовне ознаке помоћу флицкр: // конвенције, спусте ФлицкрБомб код на дно своје странице и бам, од Флицкр-а имају слике чувара места.
Одлично функционише и са великим ол веб апликацијама
Имамо велику стару веб апликацију под називом Нотабле која је написана без бриге за генерисање садржаја на страни клијента. Када смо желели да направимо делове апликације са турбо пуњењем генеришући страну клијента, изабрали смо Бацкбоне. Разлози су били исти: желели смо лагани оквир који ће помоћи да се код организује, али не и да нас приморава да преиспитамо целу апликацију.
Промене смо започели почетком ове године са великим успехом и од тада певамо хвалоспеве.
Додатна средства
Бацкбоне има много више од онога што сам описао у овом чланку, део Ц (контролер) МВЦ (модел виев цонтроллер) за почетнике, који је заправо Р (рутер) у најновијој верзији. И све је покривено у Бацкбоне документацији, лагано суботње јутро гласило је:
доцументцлоуд.гитхуб.цом/бацкбоне/
Ако су вам традиционалнији водичи, погледајте врло добро документован код ове тодо апликације написан у Бацкбоне-у:
доцументцлоуд.гитхуб.цом/бацкбоне/доцс/тодос.хтмл
