Backbone.js on minimalistlik raamistik, mille eesmärk on pakkuda lihtsat andmestruktuuride ja -funktsioonide komplekti, mida saate kasutada struktureeritud veebirakenduse kasutajaliidese loomiseks. Karbist välja pakkuvad Backbone.js komponendid intuitiivse keskkonna, mis võib teile juba tuttav olla, kui töötate mudelite ja taustavaadetega. Backbone.js-i mudelid ja kollektsioonid on lihtsad, kuid neil on mõned väga kasulikud funktsioonid, näiteks võimalus neid hõlpsasti integreerida REST JSON-i API-dega. Kuid need on ka piisavalt paindlikud, et neid saaks kohandada peaaegu igale praktilisele otstarbele.
m&a teenida välja struktuure
Selles Backbone.js õpetuses heidame pilgu mõnele levinud veale, mille sageli teevad vabakutselised arendajad esimest korda torgates õppima Backbone.js-i ja võimalusi nende vältimiseks.
Backbone.js võib olla minimalistlik raamistik, kuid see (koos Underscore.js-iga) pakub paljusid funktsioone ja funktsioone, mis suudavad hõlpsasti katta kõige põhilisemad ja mõned kriitilised vajadused, mis tekivad kaasaegse veebirakenduse väljatöötamisel. Üks levinud viga, mida algajad arendajad sageli teevad, on see, et nad peavad Backbone.js-i olema järjekordne MVC-laadne veebiraamistiku klient. Kuigi selles osas räägitakse millestki väga ilmsest, on Backbone.js-i osas raamistiku põhjaliku uurimata jätmisega tõeliselt kriitiline viga. Raamistik võib olla väikese suurusega, kuid see teebki sellest suurepärase kandidaadi põhjalikuks uurimiseks. Eriti selle väike ja kenasti kommenteeritud lähtekood .
Backbone.js pakub vajalikku miinimumi, et anda teie veebirakendusele struktuur, millest see võib kasu saada. Oma laiendatavusega ja hulgaliselt pistikprogramme , õppides Backbone.js-i saab kasutada hämmastavate veebirakenduste loomiseks. Mõned Backbone.js-i kõige ilmsematest omadustest paljastatakse mudelite, kollektsioonide ja vaadete kaudu. Ruuteri ja ajaloo komponendid pakuvad lihtsat, kuid elegantset mehhanismi kliendipoolse marsruutimise toetamiseks. Kuigi Alajoon.js on Backbone.js-i sõltuvus, see on raamistikku üsna hästi integreeritud, kuna mudelid ja kollektsioonid saavad sellest JavaScripti hämmastavast turvavööst palju kasu ja on saadaval ka teie käsutuses.
Raamistiku lähtekood on nii hästi kirjutatud ja kommenteeritud, et tõenäoliselt võiks seda kõike tassi kohvi juues lugeda. Algajatele on allikamärkuste lugemisest palju kasu, kuna nad saavad palju teada, kuidas raamistik sisemiselt töötab, ja ka võtta kasutusele korralik parimate tavade kogum kui asi puudutab JavaScripti.
Midagi, mida me kipume tegema, kui hakkame Backbone.js-i esimest korda õppima, on see, et ärge tehke asju nagu Backbone.js soovitas. Näiteks kipume käitlema sündmusi ja vaatama värskendusi nii nagu jQuery puhul lihtsatel veebisaitidel. Backbone.js eesmärk on anda teie veebirakendusele jäik struktuur murede nõuetekohase eraldamise kaudu. Mida me Backbone.js-iga sageli tegema kipume, on vaate värskendamine vastuseks meelevaldsetele DOM-i sündmustele:
var AudioPlayerControls = Backbone.View.extend({ events: { ‘click .btn-play, .btn-pause’: function(event) { $(event.target).toggleClass(‘btn-play btn-pause’) } }, // ... }) See on asi, mida tuleks iga hinna eest vältida. Võib osutuda ebaselgeteks näideteks, kus see võib olla mõttekas; kuid enamasti on selleks palju paremaid viise. Tegelikult on üks viis, mida ma võiksin siin näiteks tuua, kasutada mudelit audiopleieri oleku jälgimiseks ja selle oleku teabe abil nupu (või täpsemalt selle klassinimede) renderdamiseks:
var AudioPlayerControls = Backbone.View.extend({ events: { ‘click .btn-play, .btn-pause’: function(event) { this.model.set(‘playing’, !this.model.get(‘playing’)) } }, initialize: function() { this.listenTo(this.model, ‘change’, this.render) this.render() }, // ... }) Võib juhtuda haruldasi olukordi, kus sündmusekäitlejate otsene manipuleerimine DOM-iga on mõistlik, kuid sündmuste käitlejate keerukate DOM-i manipulatsioonide haldamisega seotud kulud ei ole peaaegu kunagi seda väärt. See on asi, mille Backbone.js eesmärk on lahendada. Backbone.js-i kasutamiseks midagi sellist on viga.
Kuna Backbone.js teeb DOM-i renderdamise ja uuesti renderdamise oma äranägemise järgi või sündmustele vastuseks väga lihtsaks, jätame sageli tähelepanuta, kui suurt mõju see veebirakenduse üldisele toimivusele avaldab. On palju viise, kuidas lõpuks võime renderdamismeetodi oma vaadetesse visata. Sageli ei tundu see olevat palju, kuna kaasaegsed veebibrauserid on muutumas suure jõudlusega tarkvaraks. Kuid kui veebirakendus kasvab ja sellega tegelevate andmete hulk kasvab, ilmneb jõudluse langus üha enam.
Me näeme seda toimides väljamõeldud näite kaudu, kus alustame väikese mudelite kogumiga ja muudame selle loendivaates:
segatäisarvuline lineaarse programmeerimise näide
var AudioPlayerPlaylist = Backbone.View.extend({ template: _.template(‘
’), initialize: function() { this.listenTo(this.collection, ‘add’, this.render) }, // ... }) Selles Backbone.js näites renderdame uuesti, kui mudelile lisatakse kogu. See töötab hästi. Kuna aga sündmus „lisa” käivitatakse iga kord, kui mudel loendisse lisatakse, kujutage ette, et tooksite serverist suure mudeli loendi. Renderdusmeetodit kutsutakse serveri vastuses mitu korda järjest, üks kord iga mudeli kohta. Piisavalt suurest mudelist piisab, et teie rakendus kokkuma panna ja kasutuskogemust rikkuda. Mõnikord piisab väikesest vastusest, sõltuvalt esitatava vaate keerukusest.
Väga kiire lahendus on see, et renderdamismeetodit lihtsalt ei kutsuta iga lisatud mudeli puhul. Sellistes olukordades lisatakse mudelid pakkidena ja renderdamismeetodi käivitamiseks saate tegelikult midagi teha ainult siis, kui seda kasutatakse, kuid määratud aja jooksul uuesti ei kutsuta. Backbone.js-i sõltuvusel Underscore.js on selle jaoks mugav utiliidifunktsioon: '_.debounce'. Selle kasutamiseks on vaja ainult muuta sündmuse siduva JavaScripti rida sellega:
this.listenTo(this.collection, ‘add’, _.debounce(_.bind(this.render), 128)) See põhjustab sündmuse tagasihelistamise iga kord, kui juhtub 'lisamine', kuid see ootab enne renderdamismeetodi tegelikku käivitamist 128 millisekundit viimasest sündmusest.
Enamasti loetakse seda kiirparanduse laadseks lahenduseks. Tegelikult on renderdamise viskamise vältimiseks sobivamaid viise. Arendajad Trello taga üks kord kirjutas blogipostituse arutades nende kogemusi ja lähenemisviisi renderduse jõudluse parandamisel, kasutades Backbone.js-i.
Kasutamata sündmuste kuulajate siduma jätmine võib tõenäoliselt juhtuda olenemata sellest, millist JavaScripti raamistikku te kasutate või kas te seda üldse kasutate. Ehkki Backbone.js muudab selle probleemi vältimise lihtsaks, on kindlasti viga jätta oma veebirakendusse lihtsad mälulekked võimalike aukude juurde. Backbone.js komponent “Event” on kindlasti päris korralik rakendus. See võimaldab JavaScripti objektidel sündmuspõhiseid funktsioone hõlpsasti rakendada. Kuna vaated on seal, kus enamasti toimub meie ürituste tarbimine, on seda viga seal lihtne teha:
var AudioPlayerControl = Backbone.View.extend({ initialize: function() { this.model.on(‘change’, _.bind(this.render, this)) // ... }, // ... }) Selle koodijupi sündmuste sidumisrida ei erine eriti esimeses näites toodud joonest. Kõik, mida me siin teinud oleme, oleme muutnud „this.listenTo (this.model,…)” nimeks „this.model.on (…)”. Kuna oleme väga harjunud .on () üleskutsega sündmuste sidumiseks oma kogemustest mõne muu JavaScripti raamistiku ja teegiga, siis Backbone.js-i kasutama asudes kipume sidumiseks sageli kasutama .on () -kutseid sündmused. See oleks olnud tore vaid siis, kui viitsiksime helistada „.off ()” -le, et ürituste läbiviijad lahti siduda, kui neid enam vaja pole. Kuid me teeme seda harva ja see on lõpuks mälulekete allikas.
Backbone.js pakub lihtsat viisi selle probleemi lahendamiseks. Seda meetodi „object.listenTo ()” abil. See võimaldab objektil, millele te helistate “listenTo ()”, jälgida, milliseid sündmusi ta kuulab, ja hõlbustada ka kõigi nende sündmuste korraga lahtihaakimist. Näiteks lõpetavad vaated kõigi seotud sündmuste kuulamise kohe, kui sellele helistate „eemalda ()”.
Kui järele mõelda, pakub Backbone.js-i minimalism tohutult paindlikkust selles, kuidas soovite oma veebirakenduse esiotsa üles ehitada. Kuna mudelid, kollektsioonid ja vaated on teie komponentide ehituskivid, on oluline hoida neid võimalikult kergete ja konkreetsetena. Sageli muutuvad just vaated koodide osas teie veebirakenduse kõige raskemaks aspektiks. Kuid on väga oluline, et te ei jõuaks lõpuks luua hiiglaslikke monoliitseid vaateid, mis lõpuks proovivad teha kõike, mida teie rakendus pakub. Selle asemel, et teha hiiglaslik vaade „AudioPlayer“, milles on kogu loogika täis, jagage see mitmeks loogiliseks vaateks, näiteks esitusloendi vaade, juhtnuppude vaade, visualiseerija vaade ja nii edasi. See, millist täpsust soovite tagada, sõltub tõenäoliselt rakendusest, mida proovite luua.
javascript, mis on sõlm
Seda seetõttu, et üksikasjalike vaadete korral, kus iga vaade teeb midagi konkreetset ja teeb seda õigesti, muutub Backbone.js-iga veebirakenduse arendamine imelihtseks. Teie kood peaks olema hooldatavam ja tulevikus hõlpsasti laiendatav või muudetav. Siis on teine äärmus, kus sa lõpuks üle pingutad. Vaated Backbone.js on loodud selleks, et teil oleks mugav mudeli või kollektsiooniga töötada, ja see võib tõenäoliselt toimida vihjena sellele, kuidas peaksite oma rakendust üles ehitama. Ian Storm Taylor jagas väärtuslikke ideid tema ajaveebis, mida peaksite ilmselt seisukohti rakendades meeles pidama.
panete graafiku jaoks kokku süsteemi
Backbone.js töötab koos JSON-põhiste RESTful API-dega kastist väljas. Selle jaoks on vaja ainult jQuery (või midagi muud, mis on selle asendaja, näiteks Zepto). Kuid Backbone.js on äärmiselt laiendatav. Tegelikult saab Backbone.js-i kohandada isegi teist tüüpi API-de ja muud tüüpi kodeerimisvormingute kasutamiseks.
Komponent Backbone.js, mis käsitleb eessüsteemi ja tagateenuste vastastikmõjusid, on sünkroonimine. See komponent paljastab hulga atribuute, mida saate Backbone.js API-punktidega suhtlemise viisi kohandamiseks hõlpsasti alistada. Tegelikult on ka vaikesünkroonimismehhanism võimalik asendada millegagi, mis pole pehmelt öeldes eriti traditsiooniline, näiteks kasutada andmete säilitamiseks localStorage'i tagateenuste asemel.
Arvukalt pistikprogrammid olemas, mis muudavad Backbone.js sünkroonimiskäitumise kohandamise lihtsaks. Näiteks pistikprogramm nimega Backbone.dualStorage võimaldab andmete säilitamiseks kasutada nii tagateenuseid kui ka localStorage'i. Kui teie rakendus läheb võrguühenduseta, kasutab pistikprogramm vahemällu salvestatud päringute esitamise jätkamiseks localStorage'i ja jälgib muudatusi, mida võite hiljem võrgus olles serveriga sünkroonida.
Kuigi Backbone.js-i kasutamist RESTfuli ja sellega ühilduva taustaga on lihtsam kasutada, ei tähenda see, et kõik, mida Backbone.js saaks kasutada. Backbone.js-i vaikesünkroonimismehhanismi mõningate muudatustega saate seda kohandada paljude back-end-teenuse API-de ja kodeerimisvormingutega.
Tasub mainida, et ka muud Backbone.js-i osad on paindlikud ja omal moel valikulised. Näiteks ei pea te kasutama vaikimisi mallimootorit, mis on kaasas Underscore.js-ga. Te ei pea isegi Backbone.js vaate komponenti kasutama ja saate selle soovi korral täielikult millegi muuga asendada.
Üks viga, mille võime Backbone.js-i õppimisel sageli teha, on andmete salvestamine atribuutidena otse vaadetele. Need andmed võivad olla olemas mõne oleku või kasutaja valiku jälgimiseks. Seda tuleks vältida.
täistoidu hinnad vs Walmart
var AudioPlayerVisualizer = Backbone.View.extend({ events: { ‘click .btn-color’: function(event) { this.colorHex = $(event.target).data(‘color-hex’) this.render() } }, // ... }) Alati saate luua mõned täiendavad mudelid ja kogumid ilma lõpp-punktideta. Need võivad aidata teil salvestada andmeid, mida ei pea tingimata taustal püsima või mis võivad olla ajutised. Nende mudelitesse salvestamine annab teile eelise, kui saate muudatusi kuulata. Asjakohane vaade või isegi mitu vaadet võib neid mudeleid jälgida ja vajadusel end uuesti renderdada.
Kujutage ette, kui olete tegelikult vaadetele olekujälgimise muutujad salvestanud ja pidite renderdamismeetodit kutsuma iga kord, kui neid muutsite. Selle renderdamismeetodi jaoks vaid ühe kõne puudumine võib jätta teie rakenduse rikkis olekusse, lähtudes sellest, mida kasutaja ekraanil kogeb. Veelgi enam, väikeste vaadete korral peate võib-olla sünkroonima need olekumuutujad mitmel vaateobjektil ja seejärel kutsuma renderdamismeetodit ka neile.
Backbone.js-l on minu arvates üks suurepärane viis DOM-i sündmuste käsitlemiseks. Selle mittekasutamine toob kaasa hulga puudusi. jQuery sündmuste sidumisfunktsioon „.on ()” võib tunduda mugav, kuid osutub pikemas perspektiivis sageli tüliks. Näiteks kui elemendid lahutatakse DOM-ist, viskab jQuery automaatselt kõik elementidega seotud sündmuste käitlejad, kasutades „.on ()”. See tähendab, et kõik DOM-sündmused, millega üritate vaates seonduda, peavad taastuma, kui eemaldate juurelemendi DOM-ist ja kinnitate selle uuesti.
var AudioPlayerControls = Backbone.View.extend({ events: { ‘click .btn-play, .btn-pause’: function() { /* ... */ }, ‘click .btn-prev’: function() { /* ... */ }, ‘click .btn-next’: function() { /* ... */ }, ‘click .btn-shuffle’: function() { /* ... */ }, ‘click .btn-repeat’: function() { /* ... */ } }, // ... }) Kui sellele vaatele vastav element on DOM-i uuesti kinnitatud, peate vaid kõigi nende sündmuste sidumiseks vaates kutsuma vaate “delegateEvents ()”.
Pange tähele, et on oluline mõista, kuidas need sündmused on seotud. Selle asemel, et siduda sündmus valija määratud elementidele, seob Backbone.js tegelikult sündmuste käitleja vaate juurelemendiga. See töötab peaaegu kõigil juhtudel hästi ja töötab enamiku meie vajaduste rahuldamiseks paremini. Vaate DOM-i alampuus alamelementide muutmine või asendamine ei nõua, et Backbone.js iga sündmuse uuesti uutele elementidele siduks. Olemasolevad kuulajad muudkui töötavad.
See aga takistab teatud sündmuste kuulamist. Üks näide on see, kuhu võiksite minna soovite kuulata kerimisüritusi aknas või lapsel keritava elemendi peal. Lapseelementide puhul saate selle elemendi jaoks teha alavaate ja seal toimuvate sündmustega hakkama saada.
Backbone.js, mis on väga kompaktne, kuid laiendatav raamistik, on suurepärane valik veebirakenduste jaoks, mis nõuavad stseeni taga palju paindlikkust. Erinevalt sellistest raamistikest nagu Angular.js ja Ember.js, mis on alati olemas ja ütlevad teile, kuidas teha seda, mida soovite teha, astub Backbone.js sammu tagasi, annab teile võimsa tööriistakomplekti ja võimaldab teil otsustada, kuidas kasutada neid. Loodan, et see algajatele mõeldud Backbone.js õpetus aitab teil vältida mõnda tavalist arenguvead ja ehitada sellega midagi hämmastavat.
