Мазмұны
- Содан кейін бастайық
- Біздің бірінші модель
- Суреттер жинағы
- 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 «> / скрипт>
Осы мақаладағы барлық келесі кодтар біздің қосымшамызға тән, сондықтан біз оны 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 «;}})
Backbone-дегі модельдер - бұл басқа MVC құрылымдарындағы модельдер сияқты, олармен байланысты кейбір функциялары бар объектілер. Магистральдық модельдердің сиқырлы бөлігі - біз оқиғаларды атрибуттармен байланыстыра аламыз, сондықтан бұл атрибут өзгергенде, біз оны көрсету үшін өз көзқарастарымызды жаңарта аламыз. Бірақ біз өзімізден біраз озып жатырмыз.
Flickr-ден фотосуреттерді шығарған кезде, біз барлық өлшемдерге арналған URL мекенжайларын жасау үшін жеткілікті ақпарат аламыз. Алайда, бұл жинақ бізге қалды, сондықтан біз өлшем параметрін қабылдайтын және жалпы сілтемені қайтаратын .image_url () функциясын іске асырдық. Бұл магистральдық модель болғандықтан, біз this.get () моделіндегі атрибуттарға қол жеткізу үшін пайдалана аламыз. Сонымен, осы модель арқылы біз Flickr кескінінің URL мекенжайын алу үшін кодтың басқа жерлерінде келесі әрекеттерді орындай аламыз.
flickrImage.image_url (‘үлкен’)
Өте қысқа, ә? Бұл модель біздің қолданбамызға тән болғандықтан, кескіннің толық өлшемі мен бас бармағының өлшемдеріне арналған бірнеше орауыш функцияларын қосамыз.
Суреттер жинағы
FlickrBomb бірыңғай емес, кескіндер жиынтығымен айналысады, ал магистральда мұны модельдеудің ыңғайлы әдісі бар. Flickr кескіндерін бір толтырғыш үшін топтастыруға лайықталған коллекция қолданылады.
var FlickrImages = Backbone.Collection.extend ({модель: FlickrImage, кілт: flickrbombAPIkey, бет: 1, алу: функция (кілт сөздер, сәттілік) {var self = this; muvaffaqiyat = сәттілік || $ .noop; this.keywords = кілт сөздер || бұл сөздер; $ .ajax ({url: 'http://api.flickr.com/services/rest/', деректер: {api_key: self.key, формат: 'json', әдіс: 'flickr. photos.search ', тегтер: this.keywords, per_page: 9, бет: this.page, лицензия: flickrbombLicenseTypes}, dataType:' jsonp ', jsonp:' jsoncallback ', сәттілік: функция (жауап) {self.add (жауап .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-ге жіберілетін басқа параметрлер өзін-өзі түсіндіруі керек. Мұнда шақырылатын магистраль функциялары ерекше қызығушылық тудырады. Сәтті қоңырау кезінде біз .add () функциясын қолданамыз, ол модель атрибуттарының жиымын қабылдайды, сол атрибуттардан модель даналарын жасайды, содан кейін оларды жинаққа қосады.
.NextPage () және .prevPage () функциялары алдымен біз көрсететін бетті өзгертеді,
барлық қолданыстағы модельдерді жою үшін .remove () жинау функциясын қолданыңыз
жинап, ағымдағы парақтың фотосуреттерін алу үшін «fetch» қоңырауына қоңырау шалыңыз (біз сол сияқты)
өзгертілген).
FlickrBombImage
Сақтық көшірме жасай отырып, бізге FlickrImages жинағынан және таңдалған ағымдағы FlickrImage-ден тұратын толтырғыш суретін ұсынатын тағы бір модель керек. Біз бұл модельді FlickrBombImage деп атаймыз.
var localStorage = (support_local_storage ())? жаңа дүкен («flickrBombImages»): нөл; 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 моделінің функциясы, ол модельдің атрибуттарын кез келген дүкен деңгейіне сақтайды (біздің жағдайда жергілікті дүкен). Осылайша, таңдалған сурет өзгерген сайын, ол бірден сақталады.
Көрініс қабаты
Енді біз барлық артқы кодты (жақсы, frontend backend) жазғаннан кейін, көріністерді біріктіре аламыз. Магистральдағы көріністер басқа дәстүрлі MVC құрылымдарындағы көріністерден сәл өзгеше. Әдетте көрініс тек презентацияға қатысты болса, магистраль көрінісі де мінез-құлық үшін жауап береді. Бұл дегеніміз, сіздің көзқарасыңыз тек бір нәрсенің қалай көрінетінін ғана емес, сонымен бірге ол өзара әрекеттескен кезде не істеу керектігін де анықтайды.
Көрініс кейбір мәліметтермен байланысты (бірақ әрдайым емес) және осы деректерден презентация белгілеуін жасау үшін үш кезеңнен өтеді:
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'). ауыстыру ('flickr: //', ''); бұл. $ el = $ (this.el); this.image = жаңа FlickrBombImage ({кілт сөздер: кілт сөздер, идентификатор: опциялар. img.attr ('id')}); this.image.flickrImages.bind ('қосу', this.addImage); this.image.bind ('өзгерту: src', this.updateSrc);}, оқиғалар: { «click .setupIcon»: «clickSetup», «.flickrbombFlyout a.photo»: «selectImage», «.flickrbombFlyout a.next»: «nextFlickrPhotos», «.flickrbombFlyout a.prev»: «prevFlickrPhotos»}, көрсету: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); мұны қайтару;}, ...});
Бұл көріністің функциялары қысқалығы үшін алынып тасталды, бастапқы код толығымен GitHub сайтында қол жетімді: github.com/zurb/flickrbomb
Көріністің жоғарғы жағында бізде магистральдың бірнеше төлсипаттары бар. tagName және className осы View элементіне қолданылатын тег пен сыныпты анықтау үшін қолданылады. View-ті құрудың бірінші қадамы объектіні құратынын ұмытпаңыз, және бұл жасауды Backbone басқаратындықтан, біз элемент пен класты көрсетуіміз керек. Магистральдың әдепкі мәні бар екенін ескеріңіз; егер біз осы атрибуттарды жіберіп алсақ, әдепкіде div қолданылады, егер сіз оны көрсетпесеңіз, ешқандай класс қолданылмайды.
Шаблон төлсипаты шартты болып табылады, бірақ қажет емес. Біз мұнда JavaScript шаблонының функциясын көрсету үшін қолданамыз, осы көрініске өз белгілеуімізді жасаймыз. Біз Underscore.js құрамына кіретін _.template () функциясын қолданамыз, бірақ сіз қалаған қозғалтқышты қолдана аласыз, біз сізді соттамаймыз.
.Initialize () функциясында біз сурет тегінен кілт сөздер жолын шығарамыз, содан кейін сол кілт сөздерді пайдаланып FlickrBombImage моделін құрамыз. Сонымен қатар біз .addImage () функциясын FlickrImage жиынтығына FlickrImage қосқан кезде іске қосылуға міндеттейміз. Бұл функция жаңадан қосылған FlickrImage бейнесін сурет таңдағышқа қосады. Соңғы және ең маңызды жол - таңдалған FlickrImage өзгертілгенде .updateSrc () функциясын жану үшін байланыстыру. Ағымдағы кескін модельде өзгертілгенде, бұл функция іске қосылады, сурет элементінің src атрибутын жаңартады және CSS кескіннің өлшемін өзгертеді және кескінді пайдаланушы көрсеткен кескін өлшемдеріне сәйкес келтіреді.
оқиғалар: {«click .setupIcon»: «clickSetup», «.flickrbombFlyout a.photo»: «selectImage», «.flickrbombFlyout a.next»: «nextFlickrPhotos», «.flickrbombFlyout a.prev»: «prevFlickrPhotos «}
.Initialize () кейін біз көріністің мінез-құлық бөлігін алдық. Магистраль оқиғалар объектісін пайдаланып оқиғаларды байланыстырудың ыңғайлы әдісін ұсынады. Оқиғалар объектісі View элементімен нақты байланыстыру үшін jQuery .delegate () әдісін қолданады, сондықтан көрініс ішіндегі элементке қандай манипуляция жасасаңыз да, барлық байланысты оқиғалар жұмыс істейді. Ол jQuery .live () сияқты жұмыс істейді, тек оқиғаларды бүкіл құжатпен байланыстырудың орнына оларды кез-келген элементтің шеңберінде байланыстыруға болады. Оқиғалар объектісіндегі әрбір жазбаның кілті оқиға мен селектордан тұрады, мәні осы оқиғаға байланысты болуы керек функцияны көрсетеді. .Delegate () жіберу сияқты кейбір оқиғалармен жұмыс істемейтінін ескеріңіз, қолдау көрсетілетін оқиғалардың толық тізімін jQuery .live () құжаттамасынан қараңыз.
көрсету: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); мұны қайтару;}
Соңында, бізде .render () функциясы бар, ол біздің белгілеуді құруға және View элементіне View белгісі қосылмайынша орындалмайтын кез келген қосымша жұмысты орындауға жауап береді. Үлгіні көрсеткеннен кейін бізге FlickrBombImage .fetch () қоңырау шалу керек. .fetch () - бұл моделдің соңғы көшірмесін табандылық қабатынан алатын магистральдық функция. Егер біз бұл модельді бұрын сақтаған болсақ, .fetch () бұл деректерді қазір шығарып алар еді. Кескін алынғаннан кейін оны дұрыс орналастыру үшін өлшемді өзгерту керек.
Үйге созу
Бөлшектерді орналастыра отырып, бізге тек парақтағы толтырғыш суреттерді тауып, оларды 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 кодын өз парағының төменгі жағына тастайды және Flickr-ден толтырғыш кескіндерін алады.
Үлкен веб-қосымшалармен де жақсы жұмыс істейді
Бізде айтарлықтай танымал веб-қосымшасы бар, ол клиент жағында контент жасауға алаңдамай жазылған. Мазмұны клиенттің генерациясы арқылы зарядталатын қосымшаның турбо бөлімдерін жасағымыз келгенде, біз магистральды таңдадық. Себептер бірдей болды: біз кодты жүйелендіруге көмектесетін жеңіл құрылымды алғымыз келді, бірақ барлық қосымшаны қайта қарастыруға мәжбүр етпедік.
Өзгерістерді біз осы жылдың басында үлкен жетістіктермен бастадық, содан бері Backbones әнін шырқадық.
Қосымша ресурстар
Backbone-ге осы мақалада жазғаннан гөрі көп нәрсе бар, MVC-дің C (контроллер) бөлігі (моделді қарау контроллері), бұл соңғы нұсқасында R (маршрутизатор). Мұның бәрі магистральдық құжаттамада қамтылған, сенбі күні таңертең оқыңыз:
documentcloud.github.com/backbone/
Егер сізде дәстүрлі оқулықтар көп болса, магистралда жазылған осы todo қосымшасының өте жақсы құжатталған кодын тексеріңіз:
documentcloud.github.com/backbone/docs/todos.html
