Share
I motsetning til sine webutviklingspartnere har JavaScript aldri hatt mye i veien for rammer for å gi struktur. Heldigvis har de siste årene begynt å forandre seg.
I dag vil jeg gjerne introdusere deg til Backbone.JS, et søtt lite bibliotek som gjør prosessen med å lage komplekse, interaktive og data-drevne apps så mye lettere. Det gir en ren måte å kirurgisk skille dataene dine fra presentasjonen din.
Opprettet av Jeremy Ashkenas, JS ninjaen som bygget CoffeeScript, Backbone, er et super lettbibliotek som lar deg lage enkle å vedlikeholde forender. Det er backend agnostic og fungerer godt med noen av de moderne JavaScript-bibliotekene du allerede bruker.
Ryggraden er en samling av sammenhengende gjenstander, veier inn i en nyanse under 4KB, som låne strukturen til koden din og i utgangspunktet hjelper deg med å bygge en skikkelig MVC-app i nettleseren. Det offisielle nettstedet beskriver sin hensikt som sådan:
Backbone leverer struktur til JavaScript-tunge applikasjoner ved å tilby modeller med nøkkelverdige bindende og egendefinerte hendelser, samlinger med en rik API av tallrike funksjoner, visninger med declarative event handling og kobler alt sammen til din eksisterende applikasjon over et RESTful JSON-grensesnitt.
La oss innse det: ovennevnte er litt vanskelig å analysere og gi mening om. Så la oss gå videre og dekonstruere sjargongen litt, med hjelp fra Jeremy.
Når en modells innhold eller tilstand endres, blir andre objekter som har abonnert på modellen, varslet slik at de kan fortsette tilsvarende. Her ser visningen på endringer i modellen, og oppdaterer seg tilsvarende i stedet for at modellen må håndtere visningene manuelt.
Ryggraden leveres med en rekke svært nyttige funksjoner for å håndtere og jobbe med dataene dine. I motsetning til annen implementering er arrayer i JavaScript ganske nøytrale, noe som virkelig er et hinder for å håndtere data.
Dine dager med å skrive spaghettibindingsanrop er over. Du kan programmelt deklarere hvilken tilbakeringing som skal knyttes til bestemte elementer.
Selv om standardmetoden er å bruke et standard AJAX-anrop når du vil snakke med serveren, kan du enkelt bytte ut det til alt du trenger. En rekke adaptere har spratt opp dekker de fleste favorittene, inkludert Websockets og lokal lagring.
Å bryte det ned til enda enklere vilkår:
Ryggraden gir en ren måte å kirurgisk skille dataene dine fra presentasjonen din. Modellen som fungerer med dataene, er bare opptatt av synkronisering med en server, mens visningen er primærplikt, lytter til endringer i den abonnerte modellen og gjengir HTML-koden.
Jeg gjetter at du sannsynligvis er litt fazed på dette punktet, så la oss fjerne noen ting:
Nei. De er ganske komplementære i deres rekkevidde, med nesten ingen overlapper i funksjonalitet. Ryggraden håndterer alle høyere abstraksjoner, mens jQuery - eller lignende biblioteker - jobber med DOM, normaliserer hendelser og så videre.
Deres målestokk og brukssaker er ganske forskjellige, og fordi du vet at det ikke betyr at du ikke skal lære den andre. Som en JavaScript-utvikler bør du vite hvordan man effektivt kan jobbe med begge.
Fordi oftere enn ikke, overlater den forreste endekoden til en dampende, skitten haug med nestede tilbakeringinger, DOM-manipulasjoner, HTML for presentasjonen blant andre uopprettelige handlinger.
Backbone tilbyr en vesentlig ren og elegant måte å håndtere dette kaoset på.
Backbone er ideell for å lage tunge, datastyrte applikasjoner på fronten. Tenk GMail-grensesnittet, ny Twitter eller en annen åpenbaring de siste årene. Det gjør å skape komplisert apps lettere.
Mens du kan skohorn det for mer vanlig web sider, dette er virkelig et bibliotek som er skreddersydd for webapps.
Ja og nei.
Ja, for som de ovennevnte rammeverkene, er dette primært ment å skape komplekse forender til webapplikasjoner.
Det er forskjellig i at Ryggraden er ganske magert, og skiper med ingen av widgeten som de andre sender med.
Ryggraden er utrolig lett, på under 4kb.
Det er også det faktum at Cappuccino tvinger deg til å skrive koden i Objective-J, mens Sproutcore synspunkter må deklareres programmatisk i JS. Selv om ingen av disse tilnærmingene er feil, med Backbone, blir normal JavaScript utnyttet av kjøringen av møllen HTML og CSS for å få ting gjort, noe som fører til en mildere læringskurve.
Absolutt. Ikke bare den typiske DOM-tilgangen din, AJAX-wrapping-typen, men også resten av din templerende og skriptlastende type. Det er veldig, veldig løst koblet, noe som betyr at du kan bruke nesten alle verktøyene dine i forbindelse med Backbone.
Nei beklager. Men her er noe for å oppmuntre deg.
Ok, nå med det ute av veien, la oss dykke inn!
MVC i Backbone sto opprinnelig for Modeller, Visninger og Samlinger, siden det ikke var noen kontrollører i rammen. Dette har siden endret seg.
Backbone kjernen består av fire hovedklasser:
Siden vi er litt strapped for tid, la oss ta en titt på bare kjerneklassene i dag. Vi skal gjøre en oppfølgingstut med en super enkel app for å demonstrere konseptene som læres her siden det ville være for mye å sette alt i en enkelt artikkel og forventer at leseren skal analysere alt.
Hold øynene skli i løpet av de neste ukene!
Modeller kan bety forskjellige ting i ulike implementeringer av MVC. I Backbone representerer en modell en entall enhet - en post i en database hvis du vil. Men det er ingen harde og raske regler her. Fra Backbone nettsiden:
Modeller er hjertet til enhver JavaScript-applikasjon, som inneholder de interaktive dataene, samt en stor del av logikken som omgir den: konverteringer, valideringer, beregnede egenskaper og tilgangskontroll.
Modellen gir deg bare en måte å lese og skrive vilkårlige egenskaper eller attributter på et datasett. Med det for øye, er den enkle formen nedenfor helt funksjonell:
var Game = Backbone.Model.extend ();
La oss bygge på dette litt.
Accentsconagua
var Game = Backbone.Model.extend (initialiser: funksjon () alarm ("Oh hei!");, standard: navn: 'Standard tittel', releaseDate: 2011,); initial vil bli sparket når en gjenstand er instantiated. Her er jeg bare advarsel om inanities - i appen din bør du sannsynligvis starte opp dataene dine eller utføre annen rengjøring. Jeg definerer også en masse standardverdier, hvis ingen data er bestått.
La oss ta en titt på hvordan du leser og skriver attributter. Men først, la oss lage en ny forekomst.
// Opprett et nytt spill var portal = nytt spill (navn: "Portal 2", releaseDate: 2011); // release vil holde releaseDate verdi - 2011 her var release = portal.get ('releaseDate'); // Endrer navnet attributtet portal.set (navn: "Portal 2 by Valve"); Hvis du la merke til get / set mutators, ha en informasjonskapsel! En modells attributter kan ikke leses gjennom det typiske object.attribute formatet. Du må gå gjennom getter / setter siden det er en lavere sjanse for at du bytter data ved en feil.
På dette tidspunktet holdes alle endringene bare i minnet. La oss gjøre disse endringene permanente ved å snakke med serveren.
portal.save ();
Det er det. Var du forventer mer? En-liner over vil nå sende en forespørsel til serveren din. Husk at typen forespørsel vil endres intelligent. Siden dette er et nytt objekt, vil POST bli brukt. Ellers brukes PUT.
Det er mange flere funksjoner, Backbone-modeller gir deg som standard, men dette bør definitivt komme i gang. Treff dokumentasjonen for mer informasjon.
Samlinger i Backbone er egentlig bare en samling av modeller. Å gå med vår databaseanalyse fra tidligere, samlinger er resultatet av en spørring der resultatene består av en rekke poster [modeller]. Du kan definere en samling som sådan:
var GamesCollection = Backbone.Collection.extend (modell: Spill,);
Den første ting å merke seg er at vi definerer hvilken modell dette er en samling av. Utvidelse på vårt eksempel tidligere, gjør jeg denne samlingen en samling av spill.
Nå kan du fortsette å leke med dataene dine til hjerteinnholdet ditt. For eksempel, la oss utvide samlingen for å legge til en metode som bare returnerer bestemte spill.
var GamesCollection = Backbone.Collection.extend (modell: Game, old: function () return this.filter (funksjon (spill) return game.get ('releaseDate') < 2009; ); ); Det var lett, ikke sant? Vi kontrollerer bare om et spill ble utgitt før 2009 og i så fall, returner spillet.
Du kan også direkte manipulere innholdet i en samling slik:
var games = new GamesCollection games.get (0);
Ovennevnte stykke instantiates en ny samling og henter modellen med en ID på 0. Du kan finne et element i en bestemt posisjon ved å referere indeksen til på metode slik: games.at (0);
Og til slutt kan du dynamisk fylle samlingen din slik:
var GamesCollection = Backbone.Collection.extend (modell: Spill, url: '/ spill'); var games = new GamesCollection games.fetch ();
Vi leter bare Backbone hvor å få dataene fra gjennom url eiendom. Med det gjort, oppretter vi bare et nytt objekt og ringer til hente metode som brenner av et asynkront anrop til serveren og fyller samlingen med resultatene.
Det bør dekke grunnleggende om samlinger med ryggrad. Som nevnt, er det tonnevis av goodies her, hva med Backbone aliasing mange fine verktøy fra Underscore biblioteket. En rask gjennomlasting av den offisielle dokumentasjonen bør komme i gang.
Visninger i Backbone kan være litt forvirrende ved første øyekast. Til MVC-purister ser de ut som en kontroller i stedet for en visning selv.
En visning håndterer to plikter fundamentalt:
La oss gå videre og skape en veldig enkel visning.
GameView = Backbone.View.extend (tagName: "div", className: "game", render: funksjon () // kode for å gjengi HTML for visningen);
Ganske enkelt hvis du har fulgt denne opplæringen så langt. Jeg angir bare hvilket HTML-element som skal brukes til å vikle visningen gjennom TagNavn attributt så vel som ID for det gjennom klassenavn.
La oss gå videre til gjengivelsesdelen.
gjengi: funksjon () this.el.innerHTML = this.model.get ('name'); // Eller jQuery-veien $ (this.el) .html (this.model.get ('name')); el refererer til DOM-elementet referert av visningen. Vi åpner ganske enkelt spillets navn til elementets innerhtml eiendom. For å si det enkelt, div Elementet inneholder nå navnet på spillet vårt. Åpenbart er jQuery-veien enklere hvis du har brukt biblioteket før.
Med mer kompliserte oppsett er håndtering av HTML innenfor JavaScript ikke bare kjedelig, men også dumt. I disse scenariene er templering veien å gå.
Ryggraden skip med en minimal templating løsning med tak i Underscore.JS, men du er mer enn velkommen til å bruke noen av de gode templerende løsningene som er tilgjengelige..
Til slutt, la oss se på hvordan visninger lytter til hendelser. DOM hendelser først.
hendelser: 'klikk .navn': 'handleClick', handleClick: function () alert ('I navnet på science? you monster'); // Andre handlinger som nødvendig Skal være enkelt nok hvis du har jobbet med hendelser før. Vi definerer i utgangspunktet og kobler sammen arrangementer gjennom hendelsesobjektet. Som du kan se over, refererer den første delen til hendelsen, den neste angir utløserelementene, mens den siste delen refererer til funksjonen som skal avfyres.
Og nå på bindende til modeller og samlinger. Jeg vil dekke bindende til modeller her.
GameView = Backbone.View.extend (initialiser: funksjon (args) _.bindAll (dette, 'changeName'); this.model.bind ('endre: navn', this.changeName);,); Den første tingen å merke seg er hvordan vi legger inn bindende koden i initial funksjoner. Det er selvfølgelig best å gjøre dette fra farten.
bindAll er et verktøy som tilbys av Underscore som vedvarer verdien av en funksjon dette verdi. Dette er spesielt nyttig siden vi overfører en rekke funksjoner rundt og funksjoner som er angitt som tilbakeringinger, har denne verdien slettet.
Nå når en modell er Navn Attributtet er endret, endre navn funksjon kalles. Du kan også gjøre bruk av Legg til og fjerne verker for å studere for endringer.
Lytte til endringer i en samling er like enkelt som erstatning modell med samling mens du binder håndtereren til tilbakeringingen.
Controllers i Backbone lar deg i hovedsak lage bookmarkable, stateful apps ved å bruke hashbangs.
var Hashbangs = Backbone.Controller.extend (ruter: "! /": "root", "! / games": "spill",, root: function () // Forbered hjemmesiden og gjeng saker , spill: funksjon () // Gjenta visninger for å vise en samling av bøker,);
Dette er veldig kjent for ruting i tradisjonelle serverside MVC-rammer. For eksempel, !/ spill vil kartlegge til spill fungere mens nettadressen i nettleseren selv vil være domene / #! / spill.
Gjennom intelligent bruk av hashbangs, kan du lage apper som er tungt JS-baserte, men også bokmerket.
Hvis du er bekymret for å bryte tilbakeknappen, har du også dekket Backbone.
// Start kontrolleren som så var ApplicationController = ny kontroller; Backbone.history.start ();
Med den ovennevnte koden kan Backbone overvåke hashbangene dine og i forbindelse med rutene du har angitt tidligere, gjøre appen din bemerkelsesverdig.
Totalt sett er det noen leksjoner jeg lærte av Backbone-måten å lage programmer på:
Det er nok å si at Backbone har forårsaket et paradigmeskifte i hvordan frontender skal bygges, i hvert fall for meg. Gitt det meget brede omfanget av dagens artikkel, er jeg sikker på at du har massevis av spørsmål. Hit kommentarseksjonen nedenfor for å chime inn. Takk så mye for å lese og forventer mange flere Backbone-opplæringsprogrammer i fremtiden.!
