Използвайте Backbone.js, за да ускорите взаимодействията

Автор: Monica Porter

Дата На Създаване: 13 Март 2021

Дата На Актуализиране: 15 Може 2024

Използвайте Backbone.js, за да ускорите взаимодействията - Творчески

Съдържание

Нека да започнем тогава
Първият ни модел
Колекция от изображения
FlickrBombImage
Изгледният слой
FlickrBombImageView
Домашният участък
Работи чудесно и с големи ol уеб приложения
Допълнителни ресурси

Ако искате бързо да създадете малък инструмент за JavaScript, вероятно не мислите за използване на рамка. По-лесно е да хакнете заедно някакъв код на jQuery, вместо да инсталирате и научите нова рамка, нали? Грешно, Backbone.js е супер лека лепилна рамка, която изглежда точно като обикновения стар JavaScript, който сте свикнали да пишете.

Ние правим много статични прототипи тук, в ZURB, защото ни харесва да можем да кликваме по страници, без да се налага да пишем какъвто и да е бекенд код. Често бихме пуснали сиви сиви изображения на резервоари или понякога търсехме Flickr за примерни изображения, за да ни помогнем да визуализираме какво може да отиде в окончателния проект. Това е до един вълшебен петък, когато решихме, че би било страхотно да напишем малко JavaScript, за да решим проблемите си. Искахме да можем да търсим и избираме снимки на Flickr, директно от самите изображения на резервни части. Бихме го нарекли FlickrBomb и това е историята за това как сме го изградили с помощта на Backbone.js.

Силно се препоръчва да разгледате набързо FlickrBomb, преди да прочетете. Това е една от онези сделки тип „едно кликване струва хиляда думи“. Давай, ще почакаме.

В днешно време в блока има много JavaScript рамки, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Но ние харесахме Backbone.js за този конкретен проект по няколко различни причини:

1. Лек е (всъщност 100% без мазнини)

в тегло, като най-новата опакована версия е около 4.6kb
в кода, който е малко над 1000 реда код, не е ужасно трудно да се проследи проследяване на стека във вътрешността, без да се губи ума ви

2. Изглежда като JavaScript

защото това е JavaScript, това е и това е всичко
той използва jQuery, който дори баба ви познава в наши дни

3. Супер проста упоритост

извън кутията, тя запазва данните до бекенд (чрез REST), но като пусне един единствен плъгин, той ще запази в локално хранилище
тъй като абстрахира API за постоянство, бихме могли да го запазим до REST бекенд, като просто премахнем приставката за локално съхранение

Нека да започнем тогава

Тъй като Backbone.js е само JavaScript, всичко, което трябва да направим, е да го включим заедно с Underscore.js на страницата. jQuery не е твърда зависимост за Backbone като такова, но ще го използваме, така че ще го включим тук. Също така ще свържем приставката за локално съхранение, тъй като не искаме да се занимаваме с настройването на бекенд. Имайте предвид, че директно свързваха файловете тук за простота, но винаги трябва да хоствате собствените си активи в производството.

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>

Всички следващи кодове в тази статия са специфични за нашето приложение, така че можем да го включим във файл app.js или просто вграден, ако това е вашето нещо. Само не забравяйте да го включите след Backbone. Backbone дава възможност да се абстрахират части от нашето приложение, да се направят едновременно модулни за лесно повторно използване и по-четливи за други. За да илюстрират най-добре тази абстракция, щяха да обяснят дизайна на FlickrBomb отдолу нагоре, започвайки с моделите и завършвайки с изгледите.

Първият ни модел

Първата задача, с която ще се справим, е изтеглянето на снимките от Flickr. Моделирането на FlickrImage в гръбначния стълб е достатъчно просто, ще създадем нов модел, наречен FlickrImage, и ще добавим някои методи, които да ни помогнат да получим палци с различен размер.

Моделите в Backbone са обекти, които могат да се запазят и имат някои функции, свързани с тях, подобно на модели в други MVC рамки. Магическата част на Backbone моделите е, че можем да обвързваме събития с атрибути, така че когато този атрибут се промени, да актуализираме нашите възгледи, за да отразяваме това. Но малко напредваме.

Когато издърпаме снимките от Flickr, ще получим достатъчно информация за създаване на URL адреси за всички размери. Това сглобяване обаче остава на нас, затова внедрихме функцията .image_url (), която взема параметър за размер и връща обществена връзка. Тъй като това е основен модел, можем да използваме this.get () за достъп до атрибутите на модела. Така че с този модел можем да направим следното на друго място в кода, за да получим URL адреса на изображение от Flickr.

flickrImage.image_url (‘голям’)

Доста кратко, а? Тъй като този модел е специфичен за нашето приложение, ще добавим някои функции на обвивка за изображенията в пълен размер и размера на палеца.

Колекция от изображения

FlickrBomb се занимава с колекции от изображения, а не с единични изображения, а Backbone има удобен начин за моделиране на това. Подходящо наречената колекция е това, което ще използваме, за да групираме изображенията на Flickr заедно за едно място.

Тук има няколко неща, които трябва да се отбележат. Първо, модел attribute казва на колекциите какъв тип модел събира. Имаме и някои атрибути, които инициализирахме за използване по-късно: ключът е нашият ключ за API на Flickr, ще искате да замените flickrbombAPIkey с низа на вашия собствен ключ за API на Flickr. Получаването на ключ за API на Flickr е безплатно и лесно, просто следвайте тази връзка: www.flickr.com/services/api/misc.api_keys.html. Атрибутът на страницата е текущата страница на снимките на Flickr, на които се намираме.

Големият метод тук е .fetch (), който абстрахира подробностите за изтегляне на снимки от API на Flickr. За да избегнем проблеми с междудоменни заявки, използваме JSONP, който както Flickr API, така и jQuery поддържат. Другите параметри, които предаваме на API, трябва да се обясняват. От особен интерес са функциите Backbone, които се извикват тук. В обратното повикване за успех използваме .add (), функция, която приема масив от атрибути на модел, създава екземпляри на модели от тези атрибути и след това ги добавя към колекцията.

Функциите .nextPage () и .prevPage () първо променят страницата, която искаме да покажем,
използвайте функцията за събиране .remove (), за да премахнете всички съществуващи модели от
колекция и след това се обадете за извличане, за да получите снимките за текущата страница (че ние просто
променен).

FlickrBombImage

Работейки по обратния път, имаме нужда от още един модел, който да представлява изображението на заместител, което ще се състои от колекция от FlickrImages и текущия FlickrImage, който е избран. Ще наречем този модел FlickrBombImage.

Тъй като този модел е отговорен за проследяване на текущо избраното изображение между зарежданията на страницата, той трябва да знае какъв локален магазин да използва.Първият ред ще гарантира, че има поддръжка за локално съхранение, и след това създайте магазина, който ще използваме, за да запази избраното изображение.

Backbone ни позволява да дефинираме функция .initialize (), която ще бъде извикана, когато се създаде екземпляр на модела. Използваме тази функция в FlickrBombImage, за да създадем нов екземпляр от колекцията FlickrImages, предаваме ключовите думи, които ще се използват за това изображение, и след това извличаме изображенията от Flickr.

Функцията .loadFirstImage () е предадена като обратно повикване, което да се изпълни, когато изображенията са заредени от Flickr. Както вероятно се досещате, тази функция задава текущото изображение да бъде първото в колекцията от Flickr. Това не прави това, ако текущото изображение вече е зададено.

Също така ще използваме обратно извикване на атрибута на Backbone, за да задействаме нашата функция .changeSrc (), когато атрибутът src на този модел се промени. Всичко, което прави обратното повикване, е да извика .save (), функция на Backbone модел, която запазва атрибутите на модела за какъвто и да е слой на хранилището е реализиран (в нашия случай localstore). По този начин, когато се промени избраното изображение, то се запазва незабавно.

Изгледният слой

Сега, след като сме написали целия бекенд (добре, интерфейсен бекенд) код, можем да съберем Views. Изгледите в Backbone са малко по-различни от изгледите в други традиционни MVC рамки. Докато изгледът обикновено се занимава само с презентация, изгледът на гръбнака е отговорен и за поведението. Това означава, че вашият изглед не само определя как изглежда нещо, но и какво трябва да прави при взаимодействие.

Изгледът е често (но не винаги) обвързан с някои данни и преминава през три фази, за да генерира маркиране на презентация от тези данни:

1. Обектът View се инициализира и се създава празен елемент.
2. Извиква се функцията за изобразяване, генерираща маркировка за изгледа, като се вмъква в елемента, създаден в предишната стъпка.
3. Елементът е прикрепен към DOM.

Това може да изглежда като много работа за генериране на някаква маркировка и дори още не сме стигнали до поведението на изгледа, но е важно и ето защо. Всеки път, когато модифицирате елементи, които са в DOM, задействате нещо, наречено пренасочване на браузъра. Пренасочването е преизчисляване на браузъра как е позиционирано всяко нещо на страницата. Преобразуванията на браузъра могат да бъдат лоши за производителността, ако бъдат извикани в рамките на събитие за плъзгане или преоразмеряване, което се задейства на много кратък интервал, но по-лошо е, че изглеждат помия. Със сложната манипулация на страницата всъщност можете да видите добавянето на елементи към страницата и извършеното преместване на елементи. Следвайки шаблона на Backbone за инициализиране, рендиране и прикачване, вие гарантирате едно преформатиране и промените в страницата ще бъдат незабавно незабавни незабавно, независимо от сложността на манипулирането на елементи.

FlickrBombImageView

Функциите на този изглед са пропуснати за краткост, изходният код в неговата цялост е достъпен на GitHub: github.com/zurb/flickrbomb

В горната част на изгледа имаме няколко специфични атрибута на Backbone. tagName и className се използват за определяне на етикета и класа, които ще бъдат приложени към елемента на този изглед. Не забравяйте, че първа стъпка от създаването на View е създаване на обект и тъй като това създаване се обработва от Backbone, трябва да посочим елемента и класа. Имайте предвид, че Backbone има разумни настройки по подразбиране; ако пропуснем тези атрибути, по подразбиране се използва div и няма да се приложи клас, освен ако не посочите такъв.

Атрибутът на шаблона е конвенция, но не е задължителен. Използваме го тук, за да посочим функцията за шаблон на JavaScript, която ще използваме, за да генерираме нашата маркировка за този изглед. Използваме функцията _.template (), включена в Underscore.js, но вие можете да използвате кой механизъм за шаблониране предпочитате, ние няма да ви съдим.

В нашата функция .initialize () издърпваме низа с ключови думи от маркера на изображението и след това създаваме модел FlickrBombImage, използвайки тези ключови думи. Също така обвързваме функцията .addImage (), която да се изпълнява, когато FlickrImage се добави към колекцията FlickrImages. Тази функция ще добави новодобавения FlickrImage към нашия селектор за избор на изображения. Последният и най-важен ред е свързването на функцията .updateSrc () да се задейства при промяна на избрания в момента FlickrImage. Когато текущото изображение се промени в модела, тази функция ще се стартира, актуализира атрибута src на елемента на изображението и CSS преоразмерява и изрязва изображението, за да се побере в рамките на размерите на изображението, посочени от потребителя.

събития: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos "}

След .initialize () имаме частта за поведение на изгледа. Backbone осигурява удобен начин за свързване на събития с помощта на обект за събития. Обектът за събития използва метода jQuery .delegate (), за да извърши действителното обвързване с елемента View, така че независимо от манипулацията, която правите с елемента вътре в изгледа, всичките ви обвързани събития ще продължат да работят. Той работи точно като jQuery .live (), с изключение на това, че вместо да обвързвате събития с целия документ, можете да ги обвържете в обхвата на всеки елемент. Ключът на всеки запис в обекта събития се състои от събитието и селектора, стойността показва онази функция, която трябва да бъде свързана към това събитие. Имайте предвид, че .delegate () не работи с някои събития като подаване, вижте документацията за jQuery .live () за пълен списък на поддържаните събития.

render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); върнете това;}

И накрая, имаме функцията .render (), която е отговорна за създаването на нашата маркировка и извършването на допълнителна работа, която не може да бъде изпълнена, докато маркировката View не бъде добавена към елемента View. След като изобразим нашия шаблон, трябва да извикаме .fetch () на нашия FlickrBombImage. .fetch () е функция на гръбначния стълб, която получава най-новото копие на модела от персистиращия слой. Ако бяхме запазили този модел преди, .fetch () щеше да извлече тези данни сега. След извличането на изображението трябва да извикаме resize, за да го позиционираме правилно.

Домашният участък

След като всички парчета са на място, всичко, което трябва да направим сега, е да намерим запазените изображения на страницата и да ги заменим с изобразените FlickrBombImage изгледи.

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

Този малък фрагмент трябва да се изпълни в долната част на страницата или в обратен извик за готовност за документ, за да се гарантира, че той може да намери изображенията на заместители, които ще замени. Използваме конвенцията за определяне на flickr: // [KEYWORD] в атрибута src на етикет на изображение, за да посочим, че трябва да се попълва с изображения от Flickr. Намираме елементи на изображението със съответстващ атрибут src, създаваме нов FlickrBombImageView и след това заместваме изображението с нашето. Вземаме копие от оригиналното изображение и го предаваме на нашия FlickrBombView, за да можем да изтеглим някои допълнителни опции за конфигурация, които може да са били посочени в елемента.

Крайният резултат от цялата тази упорита работа е много прост API за хора, които използват библиотеката. Те могат просто да дефинират етикети на изображения, използвайки конвенцията flickr: //, да пуснат кода на FlickrBomb в долната част на страницата си и да получат изображения от Flickr.

Работи чудесно и с големи ol уеб приложения

Имаме голямо ol уеб приложение, наречено Notable, което е написано без да се притеснява за генериране на съдържание от страна на клиента. Когато искахме да направим раздели на приложението с турбо зареждане чрез генериране на клиентска страна на съдържание, избрахме Backbone. Причините бяха едни и същи: искахме лека рамка, която да ни помогне да поддържаме кода организиран, но не и да ни принуждава да преосмислим цялото приложение.

Стартирахме промените по-рано тази година с голям успех и оттогава пеем Backbones.

Допълнителни ресурси

В Backbone има много повече от това, което разгледах в тази статия, частта C (контролер) на MVC (контролер за изглед на модел) за начинаещи, която всъщност е R (рутер) в последната версия. И всичко е обхванато в документацията на гръбначния стълб, лека събота сутрин гласеше:
documentcloud.github.com/backbone/

Ако по-традиционните уроци са вашето нещо, вижте много добре документирания код на това todo приложение, написано в Backbone:
documentcloud.github.com/backbone/docs/todos.html

Предишна Статия