Зміст
- Тоді давайте почнемо
- Наша перша модель
- Колекція зображень
- FlickrBombImage
- Шар вигляду
- FlickrBombImageView
- Домашня ділянка
- Також чудово працює з великими веб-додатками
- Додаткові ресурси
Якщо ви хочете швидко створити невеликий інструмент JavaScript, ви, ймовірно, не замислюєтесь про використання фреймворку. Простіше зламати якийсь код jQuery, а не встановлювати та вивчати новий фреймворк, так? Неправильно, Backbone.js - це надзвичайно легкий клейовий фреймворк, який виглядає так само, як звичайний старий JavaScript, який ви звикли писати.
Тут у ZURB ми робимо багато статичних прототипів, тому що нам подобається мати можливість переглядати сторінки без необхідності писати будь-який серверний код. Часто ми потрапляли на сірі зображення сірих заповнювачів, або іноді ми шукали зразки зображень на Flickr, щоб допомогти нам візуалізувати те, що може піти в остаточному чернетку. Тобто до однієї чарівної п’ятниці, коли ми вирішили, що було б чудово написати трохи JavaScript для вирішення наших проблем. Ми хотіли мати можливість шукати та вибирати фотографії на Flickr безпосередньо із самих зображень заповнювачів. Ми б назвали це FlickrBomb, і це історія того, як ми створили його за допомогою Backbone.js.
Настійно рекомендуємо перед читанням швидко поглянути на FlickrBomb. Це одна з тих угод типу "клік вартує тисячі слів". Вперед, ми зачекаємо.
Сьогодні в блоці багато фреймворків JavaScript, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Але нам сподобався Backbone.js для цього конкретного проекту з кількох різних причин:
1. Він легкий (насправді 100% знежирений)
- вагою, причому остання упакована версія становить близько 4,6 кб
- у коді, який становить трохи більше 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 і додамо деякі методи, які допоможуть нам отримати великі пальці різного розміру.
var FlickrImage = Backbone.Model.extend ({fullsize_url: function () {return this.image_url ('medium');}, thumb_url: function () {return this.image_url ('square');}, image_url: function ( size) {var size_code; switch (size) {case 'square': size_code = '_s'; break; // 75x75 case 'medium': size_code = '_z'; break; // 640 на найдовшій бічній коробці 'large ': size_code =' _b '; break; // 1024 на найдовшій стороні за замовчуванням: size_code =' ';} return "http: // farm" + this.get (' farm ') + ".static.flickr.com / "+ this.get ('server') +" / "+ this.get ('id') +" _ "+ this.get ('secret') + size_code +" .webp ";}})
Моделі в Backbone - це об'єкти, які можна зберегти, і з ними пов'язані деякі функції, подібно до моделей в інших фреймворках MVC. Чарівна частина моделей Backbone полягає в тому, що ми можемо прив’язувати події до атрибутів, щоб, коли цей атрибут змінюється, ми могли оновити наші погляди, щоб це відобразити. Але ми трохи випереджаємо себе.
Коли ми витягуємо фотографії з Flickr, ми збираємось отримати достатньо інформації для створення URL-адрес для всіх розмірів. Однак ця збірка залишається за нами, тому ми реалізували функцію .image_url (), яка приймає параметр розміру і повертає загальнодоступне посилання. Оскільки це магістральна модель, ми можемо використовувати this.get () для доступу до атрибутів на моделі. Отже, з цією моделлю ми можемо зробити наступне в іншому місці коду, щоб отримати URL-адресу зображення Flickr.
flickrImage.image_url ('великий')
Досить лаконічно, так? Оскільки ця модель специфічна для нашого додатку, ми додамо деякі функції обгортки для повнорозмірних розмірів та розмірів великих пальців.
Колекція зображень
FlickrBomb має справу з колекціями зображень, а не з окремими зображеннями, і Backbone має зручний спосіб моделювання цього. Влучно названа колекція - це те, що ми будемо використовувати для групування зображень Flickr разом для одного заповнювача.
var FlickrImages = Backbone.Collection.extend ({модель: FlickrImage, ключ: flickrbombAPIkey, сторінка: 1, выбор: функция (ключові слова, успіх) {var self = this; успех = успех || $ .noop; this.keywords = ключові слова || this.keywords; $ .ajax ({url: 'http://api.flickr.com/services/rest/', дані: {api_key: self.key, формат: 'json', метод: 'flickr. photos.search ', теги: this.keywords, per_page: 9, page: this.page, ліцензія: flickrbombLicenseTypes}, dataType:' jsonp ', jsonp:' jsoncallback ', success: function (response) {self.add (response .photos.photo); success ();}});}, nextPage: function (callback) {this.page + = 1; this.remove (this.models); this.fetch (null, callback);}, prevPage: function (callback) {if (this.page> 1) {this.page - = 1;} this.remove (this.models); this.fetch (null, callback);}});
Тут слід зазначити пару речей. По-перше, модель attribute повідомляє колекціям, який тип моделі він збирає. У нас також є деякі атрибути, які ми ініціалізували для подальшого використання: ключ - це наш ключ API Flickr, ви захочете замінити flickrbombAPIkey на рядок власного ключа API Flickr. Отримати ключ Flickr API безкоштовно та просто, просто перейдіть за цим посиланням: 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.
var localStorage = (supports_local_storage ())? new Store ("flickrBombImages"): null; var FlickrBombImage = Backbone.Model.extend ({localStorage: localStorage, initialize: function () {_.bindAll (this, 'loadFirstImage'); this.flickrImages = new FlickrImages () this.flickrImages.fetch (this.get ('ключові слова'), this.loadFirstImage); this.set (id: this.get ("id")); this.bind ('change: src', this.changeSrc) ;}, changeSrc: function () {this.save ();}, loadFirstImage: function () {if (this.get ('src') === undefined) {this.set ({src: this.flickrImages. first (). image_url ()});}}});
Оскільки ця модель відповідає за відстеження поточно вибраного зображення між завантаженнями сторінок, вона повинна знати, який місцевий магазин зберігання використовувати.Перший рядок забезпечить підтримку місцевого зберігання, а потім створіть магазин, який ми будемо використовувати для збереження обраного зображення.
Магістраль дозволяє нам визначити функцію .initialize (), яка буде викликана при створенні екземпляра моделі. Ми використовуємо цю функцію в FlickrBombImage, щоб створити новий екземпляр колекції FlickrImages, передати ключові слова, які будуть використовуватися для цього зображення, а потім отримати зображення з Flickr.
Функція .loadFirstImage () передана як зворотний виклик для запуску, коли зображення завантажуються з Flickr. Як ви можете здогадатися, ця функція встановлює поточне зображення першим у колекції з Flickr. Це не робить, якщо поточне зображення вже встановлено.
Ми також будемо використовувати зворотні виклики атрибутів Backbone для запуску нашої функції .changeSrc (), коли атрибут src цієї моделі змінюється. Все, що робить зворотний виклик, це виклик .save (), функція моделі Backbone, яка зберігає атрибути моделі до будь-якого рівня магазину, який був реалізований (у нашому випадку localstore). Таким чином, щоразу, коли обране зображення змінюється, воно негайно зберігається.
Шар вигляду
Тепер, коли ми написали весь внутрішній код (ну, інтерфейсний серверний код), ми можемо скласти подання. Погляди в Backbone трохи відрізняються від поглядів в інших традиційних фреймворках MVC. Хоча подання, як правило, стосується лише презентації, Backbone View відповідає також за поведінку. Це означає, що ваш Погляд не лише визначає, як щось виглядає, але й те, що він повинен робити при взаємодії.
Представлення даних зазвичай (але не завжди) прив’язане до деяких даних і проходить три етапи, щоб генерувати розмітку презентації з цих даних:
1. Об'єкт View ініціалізується, і створюється порожній елемент.
2. Викликається функція візуалізації, яка генерує розмітку для подання, вставляючи її в елемент, створений на попередньому кроці.
3. Елемент прикріплений до DOM.
Це може здатися великою роботою для створення певної розмітки, і ми ще не дійшли навіть до поведінкової частини подання, але це важливо, і ось чому. Кожен раз, коли ви модифікуєте елементи, що знаходяться в DOM, ви запускаєте щось, що називається переналаштуванням браузера. Повторне оновлення - це браузер, який перераховує, як розташовано кожну річ на сторінці. Повторне оновлення веб-переглядача може погано впливати на продуктивність, якщо його викликати у випадку перетягування або зміни розміру, що спрацьовує з дуже коротким інтервалом, але гірше, вони виглядають неакуратно. За допомогою складної маніпуляції зі сторінкою ви можете бачити, як елементи додаються на сторінку, та здійснюється перестановка елементів. Дотримуючись шаблону ініціалізації, візуалізації та вкладання Backbone, ви гарантуєте одноразове перекомпонування, і зміни на сторінці будуть сприйнятливими миттєвими, незалежно від складності маніпуляцій з елементами.
FlickrBombImageView
var FlickrBombImageView = Backbone.View.extend ({tagName: "div", className: "flickrbombContainer", lock: false, template: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), ініціалізуйте: function (options) {_.bindAll (this,' addImage ',' updateSrc ',' setDimentions ',' updateDimentions '); var keywords = options. img.attr ('src') .replace ('flickr: //', ''); this. $ el = $ (this.el); this.image = new FlickrBombImage ({keywords: keywords, id: options. img.attr ('id')}); this.image.flickrImages.bind ('add', this.addImage); this.image.bind ('change: src', this.updateSrc);}, events: { "click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos"}, render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); повернути це;}, ...});
Функції цього подання опущені для стислості, вихідний код у цілому доступний на GitHub: github.com/zurb/flickrbomb
У верхній частині подання ми маємо пару специфічних атрибутів Backbone. tagName та className використовуються для визначення тегу та класу, які будуть застосовані до елемента цього представлення. Пам'ятайте, що першим кроком створення View є створення об'єкта, і оскільки цим створенням займається Backbone, нам потрібно вказати елемент і клас. Зверніть увагу, що Backbone має розумні за замовчуванням; якщо ми опустимо ці атрибути, за замовчуванням використовується div, і жоден клас не застосовуватиметься, якщо ви не вказали його.
Атрибут шаблону є домовленістю, але не обов’язковим. Ми використовуємо його тут, щоб вказати функцію шаблону JavaScript, яку ми будемо використовувати для створення нашої розмітки для цього подання. Ми використовуємо функцію _.template (), включену до Underscore.js, але ви можете використовувати будь-який механізм шаблонування, який вам більше подобається, ми не будемо судити вас.
У нашій функції .initialize () ми витягуємо рядок ключових слів із тегу зображення, а потім створюємо модель FlickrBombImage, використовуючи ці ключові слова. Ми також прив'язуємо функцію .addImage () до запуску, коли до колекції FlickrImages додано FlickrImage. Ця функція додасть нещодавно доданий FlickrImage до нашого селектора зображень. Останній і найважливіший рядок - прив’язка функції .updateSrc () до спрацьовування при зміні поточного вибраного FlickrImage. Коли в моделі змінюється поточне зображення, ця функція запускатиметься, оновлює атрибут src елемента зображення, а CSS змінює розмір та обрізає зображення відповідно до розмірів зображення, визначених користувачем.
події: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos "}
Після .initialize () ми маємо поведінкову частину представлення. Магістраль забезпечує зручний спосіб прив'язки подій за допомогою об'єкта подій. Об'єкт подій використовує метод jQuery .delegate () для фактичного прив'язки до елемента View, так що незалежно від того, яку маніпуляцію ви робите з елементом всередині подання, всі ваші пов'язані події все одно працюватимуть. Він працює так само, як jQuery .live (), за винятком того, що замість прив'язки подій до всього документа ви можете прив'язати їх у межах будь-якого елемента. Ключ кожного запису в об'єкті подій складається з події та селектора, значення вказує на ту функцію, яка повинна бути прив'язана до цієї події. Зверніть увагу, що .delegate () не працює з деякими подіями, такими як submit, див. Документацію jQuery .live (), щоб отримати повний список підтримуваних подій.
render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); повернути це;}
Нарешті, у нас є функція .render (), яка відповідає за створення нашої розмітки та виконання будь-якої додаткової роботи, яку неможливо виконати, поки розмітка View не буде додана до елемента View. Після того, як ми відтворимо наш шаблон, нам потрібно викликати .fetch () на нашому FlickrBombImage. .fetch () - це функція Backbone, яка отримує останню копію моделі з рівня стійкості. Якби ми зберегли цю модель раніше, .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 внизу своєї сторінки, і bam, вони отримали заповнювачі зображень від Flickr.
Також чудово працює з великими веб-додатками
У нас є великий веб-додаток під назвою Notable, який було написано без занепокоєння генеруванням вмісту на стороні клієнта. Коли ми хотіли зробити розділи додатка турбозарядженим, генеруючи сторону клієнта, ми обрали Backbone. Причини були однакові: ми хотіли, щоб полегшений фреймворк допомагав підтримувати код упорядкованим, але не змушував нас переосмислювати всю програму.
Ми розпочали зміни на початку цього року з великим успіхом і з тих пір співаємо хвалу Backbones.
Додаткові ресурси
У Backbone є набагато більше, ніж те, що я описав у цій статті, частина C (контролер) MVC (контролер перегляду моделі) для початківців, що насправді є R (маршрутизатором) в останній версії. І все це висвітлено в документації до Backbone.
documentcloud.github.com/backbone/
Якщо вам потрібні більш традиційні підручники, тоді перевірте дуже добре задокументований код цього додатка todo, написаний на Backbone:
documentcloud.github.com/backbone/docs/todos.html
