Мазмун
- Анда баштайлы
- Биздин биринчи модель
- Сүрөттөрдүн жыйнагы
- FlickrBombImage
- The View Layer
- FlickrBombImageView
- Home Stretch
- Ири веб колдонмолору менен дагы жакшы иштейт
- Кошумча ресурстар
Эгер сиз кичинекей JavaScript куралын тез арада курууну көздөп жатсаңыз, анда фреймворк колдонуу жөнүндө ойлонбосоңуз керек. Жаңы алкакты орнотуп, үйрөнгөндөн көрө, jQuery кодун бузуп кирүү оңойбу, туурабы? Туура эмес, Backbone.js - супер жеңил желим алкагы, ал кадимки JavaScript жазууга көнүп калган окшойт.
Биз бул жерде ZURBда көптөгөн статикалык прототиптерди жасайбыз, анткени биз эч кандай арткы код жазбай баракчаларды басканды жакшы көрөбүз. Көбүнчө, биз толтура боз түстөгү толтургуч сүрөттөрдү түшүрүп алмакпыз, же кээде акыркы долбоордо эмне болушу мүмкүн экендигин элестетүү үчүн Flickr үлгүсүндөгү сүрөттөрдү издей баштадык. Бул бир сыйкырдуу жума күнгө чейин, биз көйгөйлөрүбүздү чечиш үчүн JavaScript жазсак сонун болот деп чечтик. Фликрдеги сүрөттөрдү түздөн-түз толтургуч сүрөттөрдүн ичинен издеп, тандап алгыбыз келди. Биз аны 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 backend бойдон кала алабыз.
Анда баштайлы
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 файлына киргизсек болот, же эгерде бул сиз болсо. Жөн гана аны Омурткадан кийин кошууну унутпаңыз. Магистраль колдонмобуздун абстрактуу бөлүктөрүн колдонуп, аларды оңой колдонууга жана башкаларга окууга ыңгайлуураак болот. Ошол абстракцияны мыкты чагылдыруу үчүн 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 эң узун капталдагы чоң 'чоң' ': 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 ";}})
Магистралдагы моделдер - бул башка MVC алкагындагы моделдер сыяктуу эле, туруктуу иштей турган жана алар менен байланышкан айрым функциялары бар объектилер. Backbone моделдеринин сыйкырдуу бөлүгү - окуяларды атрибуттарга байлай алабыз, ошондуктан ал атрибут өзгөргөндө, биз ошону чагылдыруу үчүн көз карашыбызды жаңырта алабыз. Бирок биз өзүбүздөн бир аз алдыга кетип жатабыз.
Сүрөттөрдү Flickrден тартып жатканда, бардык өлчөмдөргө URL түзүү үчүн жетиштүү маалымат алабыз. Бирок, бул ассамблея бизге калтырылгандыктан, көлөм параметрин кабыл алып, жалпыга ачык шилтемени кайтарган .image_url () функциясын ишке ашырдык. Бул магистралдык модель болгондуктан, this.get () моделиндеги атрибуттарга жетүү үчүн колдонсок болот. Ошентип, ушул модель менен, биз Flickr сүрөтүнүн URL алуу үчүн коддун башка жерлеринде төмөнкүлөрдү жасай алабыз.
flickrImage.image_url ('чоң')
Абдан кыска, ээ? Бул модель биздин колдонмого мүнөздүү болгондуктан, толук көлөмү жана бармагынын сүрөтүнүн көлөмү үчүн ороочу функцияларды кошобуз.
Сүрөттөрдүн жыйнагы
FlickrBomb бирдиктүү эмес, сүрөттөрдүн коллекциялары менен алектенет жана магистралда муну моделдөө үчүн ыңгайлуу жол бар. Ылайыктуу деп аталган Коллекция - бул 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, format: 'json', method: 'flickr. photos.search ', тэгдер: this.keywords, per_page: 9, бет: this.page, лицензия: flickrbombLicenseTypes}, dataType:' jsonp ', jsonp:' jsoncallback ', ийгилик: 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);}});
Бул жерде белгилей кетүүчү бир нече нерсе бар. Биринчиден, модель атрибут коллекцияларга моделдин кайсы түрүн топтогонун айтып берет. Кийинчерээк колдонууга даярдаган айрым касиеттерибиз бар: ачкыч биздин Flickr API ачкычыбыз, сиз flickrbombAPIkey файлын өзүнүн Flickr API ачкычынын сабына алмаштыргыңыз келет. Flickr API ачкычын алуу бекер жана оңой, бул шилтеме аркылуу өтүңүз: www.flickr.com/services/api/misc.api_keys.html. Барактын атрибуту - биз жайгашкан Flickr сүрөттөрүнүн учурдагы бети.
Бул жерде чоң ыкма .fetch () болуп саналат, анда Flickr APIден сүрөттөрдү тартуунун деталдары алынып салынат. Домендер аралык өтүнүчтөргө жол бербөө үчүн, Flickr API жана jQuery колдогон JSONP колдонуп жатабыз. Биз APIге өтүп жаткан башка параметрлер өзүн өзү түшүндүрүп бериши керек. Бул жерде Backbone функциялары өзгөчө кызыгууну туудурат. Ийгиликтеги кайра чакырууда биз .add () функциясын колдонуп, моделдин атрибуттарынын массивин алып, ошол атрибуттардан моделдин инстанцияларын жаратып, аларды жыйнакка кошот.
.NextPage () жана .prevPage () функциялары алгач биз көрсөтө турган баракты өзгөртөт,
колдонуу моделдеринин бардыгын алып салуу үчүн .remove () чогултуу функциясын колдонуңуз
чогултуп, андан соң учурдагы барактын сүрөттөрүн алуу үчүн fetch чакырыңыз (биз жөн гана)
өзгөртүлдү).
FlickrBombImage
Артка кайтуу менен, FlickrImages жыйнагынан жана учурдагы тандалган FlickrImageден турган толтургуч сүрөтүн көрсөтүү үчүн дагы бир модель керек. Бул моделди FlickrBombImage деп атайбыз.
var localStorage = (support_local_storage ())? жаңы Дүкөн ("flickrBombImages"): null; var FlickrBombImage = Backbone.Model.extend ({localStorage: localStorage, initialize: function () {_.bindAll (this, 'loadFirstImage'); this.flickrImages = жаңы 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. биринчи (). image_url ()});}}});
Бул модель учурда жүктөлгөн барактын жүктөлүшүн көзөмөлдөө үчүн жооптуу болгондуктан, кайсы жергиликтүү дүкөндү колдонууну билиши керек.Биринчи сап жергиликтүү сактоону колдоого алып, андан кийин дүкөндү түзүп, тандалган сүрөттү сактап калабыз.
Магистраль моделдин нускасы түзүлгөндө чакырыла турган .initialize () функциясын аныктоого мүмкүндүк берет. Бул функцияны FlickrBombImage колдонуп, FlickrImages жыйнагынын жаңы нускасын түзүп, ушул сүрөт үчүн колдонулуучу ачкыч сөздөрдү өткөрүп, андан кийин сүрөттөрдү Flickrден алабыз.
.LoadFirstImage () функциясы сүрөттөр Flickrдан жүктөлгөндө иштетүү үчүн кайра чакыруу катары кабыл алынган. Балким, болжолдоп жаткандай, бул функция учурдагы сүрөттү Flickr жыйнагындагы биринчиси деп коет. Эгер учурдагы сүрөт мурунтан эле коюлган болсо, муну жасабайт.
Бул моделдин src атрибуту өзгөргөндө, .changeSrc () функциясын өчүрүү үчүн Backbone'дун атрибуттуу чалууларын колдонобуз. Кайра чакыруунун бардыгы - бул .save (), бул Backbone моделинин функциясы, ал дүкөндүн кайсы катмарында болбосун сакталып кала берет (биздин учурда localstore). Ошентип, тандалган сүрөт өзгөргөн сайын, ошол замат сакталып калат.
The View Layer
Эми биз бардык backend (ошондой эле, frontend backend) кодун жазып бүткөндөн кийин, Көрүнүштөрдү бириктире алабыз. Backbone'догу көрүнүштөр башка MVC алкактарындагы көрүнүштөрдөн бир аз айырмаланып турат. Адатта, көрүнүш презентацияга гана тиешелүү болсо, магистралдык көрүнүш, ошондой эле жүрүм-турум үчүн жооп берет. Демек, сиздин Көрүнүшүңүз бир нерсенин сырткы көрүнүшүн гана аныктабастан, аны менен мамиле түзгөндө эмне кылуу керектигин дагы билдирет.
Көрүнүш кээ бир маалыматтарга байланат (бирок дайыма эле эмес), жана ошол маалыматтардан презентация белгилөөсүн түзүү үчүн үч фазадан өтөт:
1. View объектиси инициализацияланып, бош элемент түзүлөт.
2. Көрсөтүү функциясы мурунку этапта түзүлгөн элементтин ичине киргизүү менен белгилөөнү жаратып, көрсөтүү функциясы деп аталат.
3. Элемент DOMго тиркелет.
Бул кандайдыр бир кошумча белгилөөнү түзүү үчүн көп жумуш болуп сезилиши мүмкүн, биз View'дун жүрүм-турум бөлүгүнө дагы деле кире элекпиз, бирок бул маанилүү, жана ушул себептен. DOMдогу элементтерди өзгөрткөн сайын, сиз браузердин кайра агымы деп аталган нерсени козгойсуз. Reflow - бул беттеги бардык нерселердин жайгашуусун кайрадан эсептөөчү браузер. Браузердин кайра агып чыгуусу иштин начарлашына алып келиши мүмкүн, эгер сүйрөө же көлөмүн өзгөртүү иш-чарасы деп аталып калса, анда кыска аралыкта өрт чыгат, бирок начар болсо, алар шалаакы көрүнөт. Комплекстүү баракча манипуляциясы менен сиз баракчага элементтердин кошулуп жаткандыгын жана элементтердин ордун алмаштырууну көрө аласыз. 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 ('кошуу', this.addImage); this.image.bind ('өзгөртүү: src', this.updateSrc);}, окуялар: { "чыкылдатуу .setupIcon": "чыкылдатуу", "чыкылдатуу .flickrbombFlyout a.photo": "selectImage", "чыкылдатуу .flickrbombFlyout a.next": "nextFlickrPhotos", "чыкылдатуу .flickrbombFlyout a.prev": "prevFlickrPhotos"}, render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); return this;}, ...});
Бул көрүнүштүн функциялары кыска экендиги үчүн алынып салынган, баштапкы код толугу менен GitHub сайтында жеткиликтүү: github.com/zurb/flickrbomb
Көрүнүштүн жогору жагында, бизде жубайлардын белгилүү бир сыпаттары бар. tagName жана className бул Көрүнүштүн элементине колдонула турган тэгди жана классты аныктоо үчүн колдонулат. Көрүнүштү түзүүнүн биринчи кадамы объект жаратып жаткандыгын унутпаңыз жана ал жаратууну Backbone башкаргандыктан, биз элементти жана классты көрсөтүшүбүз керек. Белгилей кетүүчү нерсе, магистралдын демейки жөндөөлөрү бар; эгерде биз ушул атрибуттарды калтырсак, анда демейки шартта div колдонулат жана эгер сиз аны көрсөтпөсөңүз, анда эч кандай класс колдонулбайт.
Шаблон атрибуту шарттуу, бирок талап кылынбайт. Биз бул жерде JavaScript шаблон функциясын көрсөтүү үчүн колдонуп, ушул көрүнүш үчүн белгилөөбүздү түзөбүз. Underscore.js-ге киргизилген _.template () функциясын колдонобуз, бирок сиз кайсынысы азгырган кыймылдаткычты колдонсоңуз болот, биз сизди соттобойбуз.
.Initialize () функциясыбызда биз сүрөттүн тегинен ачкыч сөздөр сабын чыгарып, андан кийин ошол ачкыч сөздөрдүн жардамы менен FlickrBombImage моделин түзүп жатабыз. FlickrImage жыйнагына FlickrImage кошулганда .addImage () функциясын иштетебиз. Бул функция жаңы кошулган FlickrImage файлын сүрөт тандоочу учууга кошот. Акыркы жана эң маанилүү сызык .updateSrc () функциясын, учурда тандалган FlickrImage өзгөргөндө, күйгүзөт. Учурдагы сүрөт моделде өзгөртүлгөндө, бул функция иштейт, сүрөт элементинин src атрибутун жаңыртат жана CSS сүрөттүн көлөмүн өзгөртүп, колдонуучу көрсөткөн сүрөттүн өлчөмдөрүнө туура келет.
окуялар: {"чыкылдатуу .setupIcon": "чыкылдатуу", "чыкылдатуу .flickrbombFlyout a.photo": "selectImage", "чыкылдатуу .flickrbombFlyout a.next": "nextFlickrPhotos", "чыкылдатуу .flickrbombFlyout a.prev": "prevFlickrPhotos "}
.Initialize () артынан Көрүнүштүн жүрүм-турум бөлүгүнө ээ болдук. Магистраль окуялар объектисин колдонуп, окуяларды байланыштыруунун ыңгайлуу жолун сунуштайт. Окуялар объектиси jQuery .delegate () ыкмасын колдонуп, View элементине чыныгы милдеттенмени жасайт, ошондо көрүнүштүн ичиндеги элементке кандай манипуляция жасашыңызга карабастан, бардык байланышкан окуялар иштей берет. Ал jQuery .live () сыяктуу эле иштейт, башкача айтканда, окуяларды бүтүндөй документ менен байланыштыруунун ордуна, аларды каалаган элементтин чегинде байлай аласыз. Окуялар объектисиндеги ар бир жазуунун ачкычы окуядан жана селектордон турат, мааниси ошол окуяга байланыштуу болушу керек болгон функцияны көрсөтөт. .Delegate () тапшыруу сыяктуу айрым иш-чаралар менен иштебей тургандыгын эске алыңыз, колдоого алынган иш-чаралардын толук тизмеси үчүн jQuery .live () документтерин караңыз.
render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); муну кайтаруу;}
Акыры, бизде .render () функциясы бар, бул биздин белгилөөбүздү түзүүгө жана View элементине View markup кошулганга чейин аткарылбай турган кошумча жумуштарды жасоого жооп берет. Калыпты көрсөткөндөн кийин, биздин FlickrBombImage .fetch () чакыруу керек. .fetch () - бул туруктуулук катмарынан моделдин акыркы көчүрмөсүн алган Backbone функциясы. Эгерде биз буга чейин бул моделди сактасак, .fetch () ал маалыматты азыр алмак. Сүрөт алынгандан кийин, биз аны туура жайгаштыруу үчүн көлөмүн өзгөртүү керек.
Home Stretch
Бардык бөлүктөрдүн орду менен, эми барактагы толтургуч сүрөттөрдү таап, алардын ордуна көрсөтүлгөн FlickrBombImage көрүнүштөрү менен гана чектелишибиз керек.
$ ("img [src ^ = 'flickr: //']") .each (function () {var img = $ (this), flickrBombImageView = new FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView). render (). el);});
Бул кичинекей снайперди алмаштыра турган толтургуч сүрөттөрдү таба алышын камсыз кылуу үчүн, аны барактын ылдый жагында же документтеги кайра чалууда иштетүү керек. Сүрөттүн тегинин src атрибутунда flickr: // [KEYWORD] белгилөө конвенциясын колдонуп, аны Flickrден алынган сүрөттөр менен толтуруу керек. Дал келген src атрибуту менен сүрөт элементтерин таап, жаңы FlickrBombImageView түзүп, андан кийин сүрөттү өзүбүзгө алмаштырабыз. Баштапкы сүрөттүн көчүрмөсүн алып, FlickrBombView'ке өткөрүп беребиз, ошондо элементте көрсөтүлгөн кошумча конфигурация параметрлерин тартасыз.
Талыкпаган эмгектин акыры, китепкананы пайдаланган адамдар үчүн жөнөкөй API. Алар жөн гана flickr: // Convention аркылуу сүрөт тегдерин аныктап, FlickrBomb кодун баракчасынын төмөн жагына таштап, Blick, алар Flickrден толтургуч сүрөттөрдү алышты.
Ири веб колдонмолору менен дагы жакшы иштейт
Бизде көрүнүктүү деп аталган чоң кардар веб-колдонмосу бар, ал кардарлар тараптын контентин түзүү үчүн тынчсызданбай жазылган. Колдонмонун турбо бөлүктөрүн контент кардарларын түзүү менен заряддалгысы келгенде, биз Backbone тандадык. Себептер бирдей эле: биз кодду ирээтке келтирип, жеңилирээк алкакты түзүүнү кааладык, бирок колдонмонун бардыгын кайрадан карап чыгууга мажбурлаган жокпуз.
Өзгөртүүлөрдү ушул жылдын башында чоң ийгиликтер менен баштадык, ошондон бери Backbones мактап ырдап келе жатабыз.
Кошумча ресурстар
Бул макалада баяндалганга караганда, Backbone үчүн көп нерсе бар, MVCдин C (контролер) бөлүгү (моделди көрүү контроллери), ал акыркы нускасында R (роутер). Мунун бардыгы Backbone документинде камтылган, ишемби күнү эртең менен жарык:
documentcloud.github.com/backbone/
Эгер салттуу окуу куралдары сизге таандык болсо, анда магистралда жазылган бул Тодо колдонмонун эң жакшы документтелген кодун текшериңиз:
documentcloud.github.com/backbone/docs/todos.html
