Tarkib
- Keyin boshlaymiz
- Bizning birinchi modelimiz
- Tasvirlar to'plami
- FlickrBombImage
- Ko'rish qatlami
- FlickrBombImageView
- Uyga cho'zish
- Katta ol veb-ilovalari bilan ham yaxshi ishlaydi
- Qo'shimcha manbalar
Agar siz tezda kichik JavaScript vositasini yaratmoqchi bo'lsangiz, ehtimol ramkadan foydalanish haqida o'ylamaysiz. O'rnatishdan va yangi ramkani o'rganishdan ko'ra, ba'zi jQuery kodlarini sindirish osonroqmi, to'g'rimi? Noto'g'ri, Backbone.js - bu yozishda ishlatiladigan odatdagi eski JavaScript-ga o'xshab ko'rinadigan super engil yopishqoq ramka.
Biz bu erda juda ko'p statik prototiplarni ZURB-da qilamiz, chunki biz hech qanday orqa kod yozmasdan sahifalarni bosishni yaxshi ko'ramiz. Ko'pincha, biz kulrang to'ldiruvchi rasmlarni tushirar edik yoki ba'zida Flickr-ni qidirib topib, yakuniy qoralamada nima bo'lishi mumkinligini tasavvur qilishimiz mumkin. Bu sehrli juma kunigacha, biz muammolarni hal qilish uchun biron bir JavaScript-ni yozishni ajoyib deb bilganimizda. To'g'ridan-to'g'ri to'ldiruvchi rasmlarning o'zlaridan Flickr-da fotosuratlarni qidirish va tanlash imkoniyatiga ega bo'lishni xohladik. Biz buni FlickrBomb deb atagan bo'lar edik va bu Backbone.js yordamida qanday qilib qurilganimiz haqida hikoya.
O'qishdan oldin FlickrBomb-ga tezkorlik bilan qarash tavsiya etiladi. Bu "bosish ming so'zga arziydi" bitimlarning turlaridan biridir. Davom eting, biz kutamiz.
Hozirgi kunda blokda juda ko'p JavaScript ramkalari mavjud, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Ammo biz Backbone.js-ni ushbu loyiha uchun bir nechta sabablarga ko'ra yoqtirdik:
1. Bu engil (aslida 100% yog'siz)
- og'irlikda, eng so'nggi qadoqlangan versiyasi taxminan 4.6kb
- kodda 1000 satrdan bir oz ko'proq bo'lganligi sababli, aqlni yo'qotmasdan, ichki qismga izni kuzatib borish juda qiyin emas.
2. JavaScript-ga o'xshaydi
- chunki bu JavaScript-ni, shu va shu narsa
- u jQuery-dan foydalanadi, uni hatto sizning buvingiz ham biladi
3. Super oddiy qat'iyat
- qutidan tashqarida ma'lumotlar orqa tomonda saqlanadi (REST orqali), lekin bitta plaginni tashlab, uning o'rniga mahalliy xotirada saqlanadi
- chunki u doimiylik API-ni o'chirib tashlaydi, biz uni mahalliy saqlash plaginini olib tashlash orqali REST backend-da davom etishimiz mumkin.
Keyin boshlaymiz
Backbone.js shunchaki JavaScript-ni bo'lgani uchun, biz uni faqat Underscore.js bilan birga sahifaga qo'shishimiz kerak. jQuery - bu Backbone-ning o'ziga bog'liqligi emas, lekin biz uni ishlatamiz, shuning uchun biz uni shu erga kiritamiz. Shuningdek, biz mahalliy xotira plaginini bog'laymiz, chunki biz orqa tomonni o'rnatish bilan bog'liq muammolarga duch kelmaymiz. Oddiylik uchun bu erda fayllarni to'g'ridan-to'g'ri bog'lab turganligiga e'tibor bering, ammo siz har doim o'zingizning aktivlaringizni ishlab chiqarishda saqlashingiz kerak.
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>
Ushbu maqoladagi barcha kodlar bizning dasturimizga xosdir, shuning uchun biz uni app.js fayliga qo'shishimiz mumkin yoki agar bu sizning narsangiz bo'lsa. Faqat "Backbone" dan keyin qo'shishni unutmang. Magistral bizning dasturimizning mavhum qismlarini, ularni qayta ishlatish uchun modulli va boshqalar uchun qulayroq bo'lishini ta'minlaydi. Ushbu abstraktsiyani eng yaxshi ko'rsatish uchun FlickrBomb dizaynini pastdan yuqoriga, modellardan boshlab va qarashlar bilan yakunlab berishni tushuntirmoqchi edik.
Bizning birinchi modelimiz
Fotosuratlarni Flickr-dan tortib olish bilan shug'ullanadigan birinchi vazifa. FlickrImage-ni magistralda modellashtirish etarlicha sodda, biz FlickrImage nomli yangi modelni yaratamiz va turli o'lchamdagi bosh barmoqlarni olishga yordam beradigan ba'zi usullarni qo'shamiz.
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 eng uzun tomonda 'katta ': size_code =' _b '; break; // eng uzun tomoni bo'yicha 1024 sukut bo'yicha: size_code =' ';} return "http: // farm" + this.get (' farm ') + ".static.flickr.com / "+ this.get ('server') +" / "+ this.get ('id') +" _ "+ this.get ('secret') + size_code +" .webp ";}})
Backbone-dagi modellar - bu boshqa MVC doiralaridagi modellar singari, ular bilan bog'liq bo'lgan ba'zi funktsiyalarga ega bo'lgan ob'ektlar. Magistral modellarning sehrli qismi shundaki, biz hodisalarni atributlar bilan bog'lay olamiz, shuning uchun ushbu xususiyat o'zgarganda biz o'z fikrlarimizni aks ettirish uchun yangilay olamiz. Ammo biz o'zimizdan biroz oldinga o'tmoqdamiz.
Fotosuratlarni Flickr-dan tortib olsak, barcha o'lchamlar uchun URL yaratish uchun etarli ma'lumotga ega bo'lamiz. Ammo bu yig'ilish bizda qoladi, shuning uchun biz o'lcham parametrini oladigan va umumiy havolani qaytaradigan .image_url () funktsiyasini amalga oshirdik. Bu magistral model bo'lganligi sababli biz this.get () dan foydalanib modeldagi atributlarga kirishimiz mumkin. Shunday qilib, ushbu model yordamida biz Flickr tasvirining URL manzilini olish uchun kodning boshqa joylarida quyidagilarni bajarishimiz mumkin.
flickrImage.image_url ('katta')
Juda qisqa, ha? Ushbu model bizning dasturimizga xos bo'lganligi sababli, biz to'liq o'lchamdagi va bosh barmog'idagi rasm o'lchamlari uchun ba'zi bir o'ram funktsiyalarini qo'shamiz.
Tasvirlar to'plami
FlickrBomb bitta rasm bilan emas, balki tasvirlar to'plamlari bilan shug'ullanadi va Backbone-da buni modellashtirish uchun qulay usul mavjud. Tegishli nomdagi To'plam - biz Flickr rasmlarini bitta plomba uchun guruhlash uchun foydalanamiz.
var FlickrImages = Backbone.Collection.extend ({model: FlickrImage, key: flickrbombAPIkey, page: 1, fetch: function (keywords, muvaffaqiyat) {var self = this; muvaffaqiyat = muvaffaqiyat || $ .noop; this.keywords = kalit so'zlar || bu kalit so'zlar; $ .ajax ({url: 'http://api.flickr.com/services/rest/', ma'lumotlar: {api_key: self.key, format: 'json', usul: 'flickr. photos.search ', teglar: this.keywords, per_page: 9, sahifa: this.page, litsenziya: flickrbombLicenseTypes}, dataType:' jsonp ', jsonp:' jsoncallback ', muvaffaqiyat: funktsiya (javob) {self.add (javob .photos.photo); muvaffaqiyat ();}});}, nextPage: function (qayta qo'ng'iroq qilish) {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);}});
Bu erda ikkita narsani ta'kidlash kerak. Birinchidan, the model atribut kollektsiyalarda qaysi turdagi modelni yig'ayotganligini aytib beradi. Bundan tashqari bizda keyinroq ishlatishni boshlagan ba'zi bir atributlar mavjud: kalit bizning Flickr API kalitimiz, siz flickrbombAPIkey-ni o'zingizning Flickr API kalitingiz qatoriga almashtirishni xohlaysiz. Flickr API kalitini olish bepul va oson, faqat quyidagi havolaga o'ting: www.flickr.com/services/api/misc.api_keys.html. Sahifa atributi biz turgan Flickr fotosuratlarining joriy sahifasi.
Bu erda katta usul .fetch () bo'lib, u Flickr API-dan fotosuratlarni olish tafsilotlarini qisqartiradi. Domenlararo so'rovlar bilan bog'liq muammolarni oldini olish uchun biz Flickr API va jQuery-ni qo'llab-quvvatlaydigan JSONP-dan foydalanmoqdamiz. API-ga o'tayotgan boshqa parametrlar o'z-o'zidan tushunarli bo'lishi kerak. Bu erda "Backbone" funktsiyalari alohida qiziqish uyg'otmoqda. Muvaffaqiyatni qayta chaqirishda biz .add () funktsiyasidan foydalanamiz, bu model atributlari qatorini oladi, bu atributlardan model nusxalarini yaratadi va keyin ularni to'plamga qo'shadi.
.NextPage () va .prevPage () funktsiyalari avval biz ko'rsatmoqchi bo'lgan sahifani o'zgartiradi,
dan mavjud bo'lgan barcha modellarni olib tashlash uchun .remove () yig'ish funktsiyasidan foydalaning
To'plamga o'ting va keyin joriy sahifadagi fotosuratlarni olish uchun fetch-ga qo'ng'iroq qiling (biz shunchaki
o'zgartirildi).
FlickrBombImage
Orqaga qaytish jarayonida FlickrImages to'plamidan va tanlangan joriy FlickrImage-dan iborat bo'lgan joyni to'ldiruvchi tasvirini namoyish etish uchun yana bitta model kerak. Ushbu modelni FlickrBombImage deb ataymiz.
var localStorage = (support_local_storage ())? yangi Store ("flickrBombImages"): null; var FlickrBombImage = Backbone.Model.extend ({localStorage: localStorage, initialize: function () {_.bindAll (this, 'loadFirstImage'); this.flickrImages = yangi FlickrImages (); this.flickrImages.fetch (this.get ('kalit so'zlar'), 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). birinchi (). image_url ()});}}});
Ushbu model hozirda tanlangan rasmni sahifa yuklamalari o'rtasida kuzatib borish uchun javobgar bo'lganligi sababli, qaysi mahalliy do'kon do'konidan foydalanishni bilishi kerak.Birinchi satr localstorage-ni qo'llab-quvvatlashini ta'minlaydi va keyin tanlangan tasvirni saqlab qolish uchun foydalanadigan do'konni yaratadi.
Magistral bizga modelning nusxasi yaratilganda chaqiriladigan .initialize () funktsiyasini belgilashga imkon beradi. FlickrBombImage-da ushbu funktsiyadan foydalanib, FlickrImages to'plamining yangi nusxasini yaratamiz, ushbu rasm uchun ishlatiladigan kalit so'zlar bo'ylab o'tamiz va keyin Flickr-dan rasmlarni olamiz.
.LoadFirstImage () funktsiyasi Flickr-dan rasmlar yuklanganda qayta ishlash uchun qayta chaqiruv sifatida qabul qilindi. Ehtimol, taxmin qilishingiz mumkinki, ushbu funktsiya hozirgi tasvirni Flickr-dan to'plamdagi birinchi bo'lib o'rnatadi. Agar joriy rasm allaqachon o'rnatilgan bo'lsa, buni qilmaydi.
Ushbu modelning src atributi o'zgarganda biz .changeSrc () funktsiyasini yoqish uchun Backbone-ning atributli qo'ng'iroqlarini ishlatamiz. Ushbu qayta qo'ng'iroqni amalga oshiradigan narsa - bu ".save" ("Backbone" modelining funktsiyasi, bu modelning atributlarini har qanday do'kon qatlamida saqlanib turadigan (bizning holatimizda localstore). Shunday qilib, har doim tanlangan rasm o'zgarganda, u darhol saqlanib qoladi.
Ko'rish qatlami
Endi biz barcha backend (shuningdek, frontend backend) kodini yozib oldik, biz Views-ni birlashtira olamiz. Backbone-dagi qarashlar boshqa an'anaviy MVC doiralaridagi qarashlardan biroz farq qiladi. Ko'rinish odatda faqat taqdimotga tegishli bo'lsa, "Backbone View" ham xatti-harakatlar uchun javobgardir. Demak, sizning Ko'rishingiz nafaqat biron bir narsaning ko'rinishini belgilaydi, balki u bilan o'zaro aloqada nima qilish kerakligini ham belgilaydi.
Ko'rinish odatda ba'zi ma'lumotlarga bog'langan (lekin har doim ham emas) va ushbu ma'lumotlardan taqdimot belgilarini yaratish uchun uch bosqichdan o'tadi:
1. View ob'ekti ishga tushiriladi va bo'sh element yaratiladi.
2. Render funktsiyasi chaqirilib, oldingi bosqichda yaratilgan elementga kiritish orqali ko'rinish uchun belgi hosil qiladi.
3. Element DOMga biriktirilgan.
Bu ba'zi bir tuzatishlarni yaratish uchun juda ko'p ish bo'lib tuyulishi mumkin va biz hali "View" ning xatti-harakatlariga tegishli emasmiz, ammo bu juda muhim va shuning uchun nima uchun. DOM-dagi elementlarni har safar o'zgartirganingizda, siz brauzerni qayta oqim deb nomlanadigan narsani ishga tushirasiz. Qayta oqim - bu sahifadagi har bir narsaning qanday joylashishini qayta hisoblovchi brauzer. Brauzerni qayta oqimlari juda qisqa vaqt oralig'ida otilib chiqadigan yoki tortib olinadigan yoki o'lchamdagi voqea paytida chaqirilsa, ishlash uchun yomon bo'lishi mumkin, ammo yomonroq, ular sustkash ko'rinadi. Murakkab sahifa manipulyatsiyasi yordamida siz aslida sahifaga elementlar qo'shilishini va elementlarning o'rnini o'zgartirishni ko'rishingiz mumkin. Backbone-ning boshlang'ich, renderlash va biriktirish uslubidan kelib chiqib, siz bitta qayta oqimga kafolat berasiz va sahifadagi o'zgarishlar elementlar bilan ishlashning murakkabligidan qat'i nazar, darhol sezgir bo'ladi.
FlickrBombImageView
var FlickrBombImageView = Backbone.View.extend ({tagName: "div", className: "flickrbombContainer", lock: false, template: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), ishga tushirish: function (options) {_.bindAll (this,' addImage ',' updateSrc ',' setDimentions ',' updateDimentions '); var keywords = options. img.attr ('src'). almashtirish ('flickr: //', ''); bu. $ el = $ (this.el); this.image = yangi FlickrBombImage ({kalit so'zlar: kalit so'zlar, id: variantlar. img.attr ('id')}); this.image.flickrImages.bind ('add', this.addImage); this.image.bind ('o'zgartirish: src', this.updateSrc);}, hodisalar: { "click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", ".flickrbombFlyout a.prev": "prevFlickrPhotos"}, render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); return this;}, ...});
Ushbu ko'rinish funktsiyalari qisqartirilganligi sababli chiqarib tashlangan, manba kodi to'liq GitHub-da mavjud: github.com/zurb/flickrbomb
Ko'rinishning yuqori qismida bizda bir nechta "Backbone" o'ziga xos atributlari mavjud. tagName va className bu View elementiga tatbiq etiladigan yorliq va sinfni aniqlash uchun ishlatiladi. Shuni esda tutingki, "View" yaratilishining birinchi bosqichi ob'ektni yaratmoqda va bu yaratilish "Backbone" tomonidan ishlanganligi sababli, element va sinfni ko'rsatishimiz kerak. Shuni yodda tutingki, magistralning oqilona standartlari mavjud; agar biz ushbu atributlarni tashlab qo'ysak, sukut bo'yicha div ishlatiladi va siz ko'rsatmasangiz, hech qanday sinf qo'llanilmaydi.
Andoza atributi odatiy holdir, lekin shart emas. Biz bu erda biz ushbu ko'rinish uchun markirovkamizni yaratish uchun foydalanadigan JavaScript shablon funksiyasini ko'rsatish uchun foydalanmoqdamiz. Biz Underscore.js-ga kiritilgan _.template () funktsiyasidan foydalanamiz, lekin siz istagan shablonni qidiruv vositasidan foydalanishingiz mumkin, biz sizni hukm qilmaymiz.
.Initialize () funktsiyamizda biz rasm yorligidan kalit so'zlar qatorini chiqaramiz va shu kalit so'zlar yordamida FlickrBombImage modelini yaratamiz. Shuningdek, biz FlickrImage to'plamiga FlickrImage qo'shilganda bajariladigan .addImage () funktsiyasini bog'laymiz. Ushbu funktsiya yangi qo'shilgan FlickrImage-ni rasm tanlagichimizga qo'shib beradi. Oxirgi va eng muhim satr .updateSrc () funktsiyasini hozirda tanlangan FlickrImage o'zgartirilganda o'chirish uchun bog'laydi. Modeldagi joriy rasm o'zgartirilganda, bu funktsiya ishlaydi, rasm elementining src atributini yangilaydi va CSS o'lchamini o'zgartiradi va foydalanuvchi tomonidan belgilangan rasm o'lchamlariga mos ravishda kesadi.
hodisalar: {"click .setupIcon": "clickSetup", ".flickrbombFlyout a.photo": "selectImage", ".flickrbombFlyout a.next": "nextFlickrPhotos", ".flickrbombFlyout a.prev": "prevFlickrPhotos "}
.Initialize () dan so'ng biz View-ning xatti-harakatlar qismiga egamiz. Magistral voqealar ob'ekti yordamida voqealarni bog'lashning qulay usulini taqdim etadi. Voqealar ob'ekti jQuery .delegate () usulidan View elementi bilan haqiqiy bog'lanishni amalga oshiradi, shunda ko'rinish ichidagi elementga qanday manipulyatsiya qilishingizdan qat'i nazar, barcha bog'langan hodisalaringiz ishlaydi. Bu xuddi jQuery .live () kabi ishlaydi, faqat voqealarni butun hujjat bilan bog'lash o'rniga, ularni har qanday element doirasida bog'lashingiz mumkin. Voqealar ob'ektidagi har bir yozuvning kaliti voqea va selektordan iborat bo'lib, qiymati ushbu hodisaga bog'liq bo'lishi kerak bo'lgan funktsiyani bildiradi. .Delegate () ba'zi bir yuborish kabi hodisalar bilan ishlamasligini unutmang, qo'llab-quvvatlanadigan voqealarning to'liq ro'yxati uchun jQuery .live () hujjatlariga qarang.
render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); buni qaytaring;}
Va nihoyat, bizda .render () funktsiyasi mavjud bo'lib, u bizning ko'rinishimizni yaratish va View elementi View elementiga qo'shilguncha bajarib bo'lmaydigan har qanday qo'shimcha ishni bajarish uchun javobgardir. Shablonni ko'rsatgandan so'ng, biz FlickrBombImage-ga .fetch () raqamiga qo'ng'iroq qilishimiz kerak. .fetch () - bu qat'iylik qatlamidan modelning so'nggi nusxasini oladigan Backbone funktsiyasi. Agar ilgari ushbu modelni saqlaganimizda, .fetch () ushbu ma'lumotlarni hoziroq qaytarib olardi. Rasm olinganidan so'ng, biz uni to'g'ri joylashtirish uchun o'lchamlarini chaqirishimiz kerak.
Uyga cho'zish
Barcha qismlar joyida bo'lsa, endi biz faqat sahifadagi to'ldiruvchi rasmlarni topish va ularni FlickrBombImage ko'rinishlari bilan almashtirishimiz kerak.
$ ("img [src ^ = 'flickr: //']") .each (function () {var img = $ (this), flickrBombImageView = new FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView). render (). el);});
Ushbu kichkina snaypni o'rnini to'ldiruvchi rasmlarni topishini ta'minlash uchun uni sahifaning pastki qismida yoki hujjatni qayta qo'ng'iroq qilishda ishlatish kerak. Rasm yorlig'ining src atributida flickr: // [KEYWORD] ni belgilash konventsiyasidan foydalanib, uni Flickr-dan olingan rasmlar bilan to'ldirish kerak. Biz mos keladigan src atributiga ega rasm elementlarini topamiz, yangi FlickrBombImageView-ni yaratamiz va keyin rasmni biznikiga almashtiramiz. Biz asl rasmning nusxasini olamiz va FlickrBombView-ga uzatamiz, shunda elementda ko'rsatilgan bo'lishi mumkin bo'lgan qo'shimcha konfiguratsiya parametrlarini olishimiz mumkin.
Ushbu mashaqqatli ishlarning yakuniy natijasi kutubxonadan foydalanadigan odamlar uchun juda oddiy API. Ular shunchaki flickr: // Convention yordamida rasm yorliqlarini aniqlay olishadi, FlickrBomb kodini o'z sahifalarining pastki qismiga tashlaydilar va bam, ular Flickr-dan plomba rasmlarini oldilar.
Katta ol veb-ilovalari bilan ham yaxshi ishlaydi
Bizda "e'tiborga loyiq" deb nomlangan katta veb-ilovamiz mavjud bo'lib, ular mijozlar tomonidan kontent yaratish uchun tashvishlanmasdan yozilgan. Ilova turbo bo'limlarini kontentni mijoz tomonidan ishlab chiqarish orqali zaryad qilishni xohlaganimizda, biz "Backbone" ni tanladik. Sabablari bir xil edi: biz kodni tartibli saqlashga yordam beradigan engil ramkani xohladik, lekin bizni butun dasturni qayta ko'rib chiqishga majburlamaymiz.
O'zgarishlarni biz bu yil boshida katta muvaffaqiyat bilan boshladik va shu vaqtdan beri "Backbones" qo'shig'ini kuylaymiz.
Qo'shimcha manbalar
Backbone-ga ushbu maqolada yozganimdan ko'ra ko'proq narsa bor, yangi boshlanuvchilar uchun MVC-ning C (kontroller) qismi (model ko'rinishini boshqarish), bu so'nggi versiyada aslida R (yo'riqnoma). Va barchasi "Backbone" hujjatlarida ko'rsatilgan, shanba kuni ertalab shunday o'qilgan:
documentcloud.github.com/backbone/
Agar ko'proq an'anaviy o'quv qo'llanmalari sizning narsangiz bo'lsa, unda Backbone-da yozilgan ushbu todo dasturining juda yaxshi hujjatlashtirilgan kodini tekshiring:
documentcloud.github.com/backbone/docs/todos.html
