Usa Backbone.js per accelerare le interazioni

Autore: Monica Porter

Data Della Creazione: 13 Marzo 2021

Data Di Aggiornamento: 15 Maggio 2024

Video: 5 YouTuber consigliano le 5 MIGLIORI UTILITY per Mac

Contenuto

Allora cominciamo
Il nostro primo modello
Una raccolta di immagini
Il FlickrBombImage
Il livello di visualizzazione
Il FlickrBombImageView
L'Home Stretch
Funziona alla grande anche con grandi app web
Risorse addizionali

Se stai cercando di creare rapidamente un piccolo strumento JavaScript, probabilmente non stai pensando di utilizzare un framework. È più facile hackerare un po 'di codice jQuery piuttosto che installare e imparare un nuovo framework, giusto? Sbagliato, Backbone.js è un framework di colla super leggero che assomiglia al normale vecchio JavaScript che sei abituato a scrivere.

Facciamo molti prototipi statici qui a ZURB, perché ci piace essere in grado di fare clic sulle pagine senza dover scrivere alcun codice di backend. Spesso, inserivamo immagini segnaposto grigie, o talvolta andavamo a cercare su Flickr immagini di esempio che ci aiutassero a visualizzare cosa potrebbe andare nella bozza finale. Questo fino a un magico venerdì, quando abbiamo deciso che sarebbe stato fantastico scrivere un po 'di JavaScript per risolvere i nostri problemi. Volevamo essere in grado di cercare e selezionare le foto su Flickr, direttamente dalle immagini segnaposto stesse. Lo chiameremmo FlickrBomb, e questa è la storia di come l'abbiamo costruito utilizzando Backbone.js.

Si consiglia vivamente di dare una rapida occhiata a FlickrBomb prima di leggere. È uno di quei tipi di offerte "un clic vale più di mille parole". Avanti, aspetteremo.

Ci sono molti framework JavaScript sul blocco in questi giorni, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Ma ci è piaciuto Backbone.js per questo particolare progetto per diversi motivi:

1. È leggero (infatti è privo di grassi al 100%)

di peso, con l'ultima versione imballata di circa 4.6kb
nel codice, essendo poco più di 1.000 righe di codice, non è terribilmente difficile seguire una traccia dello stack all'interno senza perdere la testa

2. Sembra JavaScript

perché è JavaScript, ecco tutto
usa jQuery, che anche tua nonna conosce in questi giorni

3. Super semplice persistenza

out of the box persiste i dati in un backend (tramite REST), ma rilasciando un singolo plug-in salverà invece nella memoria locale
poiché astrae l'API di persistenza, potremmo farla persistere su un backend REST rimuovendo semplicemente il plug-in di archiviazione locale

Allora cominciamo

Poiché Backbone.js è solo JavaScript, tutto ciò che dobbiamo fare è includerlo insieme a Underscore.js nella pagina. jQuery non è una dipendenza difficile per Backbone di per sé, ma lo useremo quindi lo includeremo qui. Collegheremo anche il plug-in di archiviazione locale, poiché non vogliamo preoccuparci di configurare un backend. Tieni presente che collegavi direttamente i file qui per semplicità, ma dovresti sempre ospitare le tue risorse in produzione.

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>

Tutto il codice seguente in questo articolo è specifico per la nostra applicazione, quindi possiamo includerlo in un file app.js o semplicemente in linea se questo è il tuo genere. Ricorda solo di includerlo dopo Backbone. Backbone consente di astrarre parti della nostra applicazione, per renderle modulari per un facile riutilizzo e più leggibili per gli altri. Per illustrare al meglio questa astrazione, stavamo per spiegare il design di FlickrBomb dal basso verso l'alto, iniziando con i modelli e finendo con le viste.

Il nostro primo modello

Il primo compito che dovremmo affrontare è quello di estrarre le foto da Flickr. La modellazione di un'immagine Flickr in backbone è abbastanza semplice, creeremo un nuovo modello chiamato FlickrImage e aggiungeremo alcuni metodi per aiutarci a ottenere pollici di dimensioni diverse.

I modelli in Backbone sono oggetti che possono essere persistenti e hanno alcune funzioni ad essi associate, in modo molto simile ai modelli in altri framework MVC. La parte magica dei modelli Backbone è che possiamo legare gli eventi agli attributi, in modo che quando quell'attributo cambia, possiamo aggiornare le nostre viste per riflettere quello. Ma stiamo andando un po 'più avanti di noi stessi.

Quando estraiamo le foto da Flickr, otterremo informazioni sufficienti per creare URL per tutte le dimensioni. Tuttavia quell'assembly è lasciato a noi, quindi abbiamo implementato la funzione .image_url () che accetta un parametro di dimensione e restituisce un collegamento pubblico. Poiché si tratta di un modello di spina dorsale, possiamo utilizzare this.get () per accedere agli attributi sul modello. Quindi, con questo modello, possiamo fare quanto segue altrove nel codice per ottenere l'URL di un'immagine Flickr.

flickrImage.image_url (’large’)

Abbastanza conciso, eh? Poiché questo modello è specifico per la nostra applicazione, aggiungeremo alcune funzioni wrapper per le dimensioni dell'immagine a grandezza naturale e del pollice.

Una raccolta di immagini

FlickrBomb si occupa di raccolte di immagini, non di immagini singole, e Backbone ha un modo conveniente per modellarlo. La Collection, giustamente chiamata, è ciò che useremo per raggruppare le immagini di Flickr insieme per un singolo segnaposto.

Ci sono un paio di cose da notare qui. Prima di tutto, il modello attributo dice alle collezioni quale tipo di modello sta raccogliendo. Abbiamo anche alcuni attributi che abbiamo inizializzato per un uso successivo: key è la nostra chiave API Flickr, ti consigliamo di sostituire flickrbombAPIkey con la stringa della tua chiave API Flickr. Ottenere una chiave API Flickr è gratuito e facile, basta seguire questo link: www.flickr.com/services/api/misc.api_keys.html. L'attributo della pagina è la pagina corrente delle foto di Flickr in cui ci troviamo.

Il grande metodo qui è .fetch (), che astrae i dettagli dell'estrazione di foto dall'API di Flickr. Per evitare problemi con le richieste interdominio, utilizziamo JSONP, supportato sia dall'API di Flickr che da jQuery. Gli altri parametri che stiamo passando all'API dovrebbero essere autoesplicativi. Di particolare interesse sono le funzioni Backbone chiamate qui. Nel callback di successo stiamo usando .add (), una funzione che accetta un array di attributi del modello, crea istanze del modello da quegli attributi e quindi le aggiunge alla raccolta.

Le funzioni .nextPage () e .prevPage () cambiano prima la pagina che vogliamo visualizzare,
utilizzare la funzione di raccolta .remove (), per rimuovere tutti i modelli esistenti dal file
collection, quindi chiama fetch per ottenere le foto per la pagina corrente (che abbiamo solo
cambiato).

Il FlickrBombImage

Tornando indietro, abbiamo bisogno di un altro modello per rappresentare l'immagine segnaposto, che consisterà in una raccolta di FlickrImages e la FlickrImage corrente che è stata selezionata. Chiameremo questo modello FlickrBombImage.

Poiché questo modello è responsabile di tenere traccia dell'immagine attualmente selezionata tra i caricamenti della pagina, è necessario sapere quale negozio di localstorage utilizzare.La prima riga garantirà il supporto per localstorage, quindi creerà il negozio che useremo per rendere persistente l'immagine selezionata.

Backbone ci consente di definire una funzione .initialize () che verrà chiamata quando viene creata un'istanza del modello. Usiamo questa funzione in FlickrBombImage per creare una nuova istanza della raccolta FlickrImages, passare le parole chiave che verranno utilizzate per questa immagine e quindi recuperare le immagini da Flickr.

La funzione .loadFirstImage () è stata passata come callback da eseguire quando le immagini sono state caricate da Flickr. Come puoi probabilmente intuire, questa funzione imposta l'immagine corrente in modo che sia la prima nella raccolta di Flickr. Non lo fa se l'immagine corrente è già stata impostata.

Utilizzeremo anche i callback degli attributi di Backbone per attivare la nostra funzione .changeSrc () quando l'attributo src di questo modello cambia. Tutto ciò che fa il callback è chiamare .save (), una funzione del modello Backbone che mantiene gli attributi del modello su qualunque livello di negozio sia stato implementato (nel nostro caso localstore). In questo modo, ogni volta che l'immagine selezionata viene modificata, viene immediatamente mantenuta.

Il livello di visualizzazione

Ora che abbiamo scritto tutto il codice backend (beh, frontend backend), possiamo mettere insieme le viste. Le viste in Backbone sono leggermente diverse dalle viste in altri framework MVC tradizionali. Mentre una vista in genere riguarda solo se stessa con la presentazione, anche una vista Backbone è responsabile del comportamento. Ciò significa che la tua vista non solo definisce l'aspetto di qualcosa, ma anche cosa dovrebbe fare quando interagisce.

Una vista è comunemente (ma non sempre) legata ad alcuni dati e passa attraverso tre fasi per generare markup di presentazione da quei dati:

1. L'oggetto Visualizza viene inizializzato e viene creato un elemento vuoto.
2. Viene chiamata la funzione render, generando il markup per la vista inserendolo nell'elemento creato nel passaggio precedente.
3. L'elemento è allegato al DOM.

Potrebbe sembrare un lavoro impegnativo per generare del markup e non siamo ancora alla parte relativa al comportamento della vista, ma è importante ed ecco perché. Ogni volta che modifichi elementi che si trovano nel DOM, attivi qualcosa chiamato reflow del browser. Un reflow è il browser che ricalcola il modo in cui ogni cosa sulla pagina è posizionata. I reflow del browser possono essere dannosi per le prestazioni se chiamati all'interno di un evento di trascinamento o ridimensionamento, che si attiva a un intervallo molto breve, ma peggio, sembrano sciatti. Con una manipolazione complessa della pagina, puoi effettivamente vedere gli elementi aggiunti alla pagina e il riposizionamento degli elementi interessati. Seguendo il modello di inizializzazione, rendering e collegamento di Backbone, garantisci un unico reflow e le modifiche alla pagina saranno percettivamente istantanee, indipendentemente dalla complessità della manipolazione degli elementi.

Il FlickrBombImageView

Le funzioni di questa vista sono state omesse per brevità, il codice sorgente nella sua interezza è disponibile su GitHub: github.com/zurb/flickrbomb

Nella parte superiore della vista, abbiamo un paio di attributi specifici di Backbone. tagName e className vengono utilizzati per definire il tag e la classe che verranno applicati all'elemento di questa vista. Ricorda che il primo passaggio della creazione della vista è la creazione di un oggetto, e poiché tale creazione è gestita da Backbone, dobbiamo specificare l'elemento e la classe. Notare che Backbone ha impostazioni predefinite ragionevoli; se omettiamo questi attributi, per impostazione predefinita viene utilizzato un div e nessuna classe verrà applicata a meno che non ne venga specificata una.

L'attributo template è una convenzione, ma non è obbligatorio. Lo stiamo usando qui per specificare la funzione del template JavaScript che useremo per generare il nostro markup per questa vista. Usiamo la funzione _.template () inclusa in Underscore.js, ma puoi usare il motore di template che preferisci, non ti giudicheremo.

Nella nostra funzione .initialize () estraiamo la stringa delle parole chiave dal tag dell'immagine, quindi creiamo un modello FlickrBombImage utilizzando quelle parole chiave. Stiamo anche vincolando la funzione .addImage () da eseguire quando una FlickrImage viene aggiunta alla raccolta FlickrImages. Questa funzione aggiungerà la FlickrImage appena aggiunta al riquadro a comparsa del selettore di immagini. L'ultima e più importante riga è quella di associare la funzione .updateSrc () in modo che venga attivata quando viene modificata l'immagine Flickr attualmente selezionata. Quando l'immagine corrente viene modificata nel modello, questa funzione verrà eseguita, aggiornerà l'attributo src dell'elemento immagine e CSS ridimensionerà e ritaglierà l'immagine per adattarla alle dimensioni dell'immagine specificate dall'utente.

eventi: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos "}

Dopo .initialize () abbiamo la parte relativa al comportamento della vista. Backbone fornisce un modo conveniente per associare gli eventi utilizzando un oggetto events. L'oggetto events utilizza il metodo jQuery .delegate () per eseguire l'associazione effettiva all'elemento View, in modo che, indipendentemente dalla manipolazione che si esegue sull'elemento all'interno della visualizzazione, tutti gli eventi associati continueranno a funzionare. Funziona proprio come jQuery .live (), tranne per il fatto che invece di associare eventi all'intero documento, puoi associarli nell'ambito di qualsiasi elemento. La chiave di ogni voce nell'oggetto events è costituita dall'evento e dal selettore, il valore indica quella funzione che dovrebbe essere associata a quell'evento. Nota che .delegate () non funziona con alcuni eventi come submit, consulta la documentazione di jQuery .live () per un elenco completo degli eventi supportati.

render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); restituisci questo;}

Infine, abbiamo la funzione .render () che è responsabile della creazione del nostro markup e di qualsiasi lavoro aggiuntivo che non può essere eseguito fino a quando il markup View non è stato aggiunto all'elemento View. Dopo aver renderizzato il nostro modello, dobbiamo chiamare .fetch () sulla nostra FlickrBombImage. .fetch () è una funzione Backbone che ottiene l'ultima copia del modello dal livello di persistenza. Se avessimo salvato questo modello prima, .fetch () recupererebbe quei dati ora. Dopo che l'immagine è stata recuperata, dobbiamo chiamare resize per posizionarla correttamente.

L'Home Stretch

Con tutti i pezzi a posto, tutto ciò che dobbiamo fare ora è trovare le immagini segnaposto sulla pagina e sostituirle con le viste FlickrBombImage renderizzate.

$ ("img [src ^ = 'flickr: //']") .each (function () {var img = $ (this), flickrBombImageView = new FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView. render (). el);});

Questo piccolo ritaglio deve essere eseguito in fondo alla pagina, o in un callback pronto per il documento, per garantire che possa trovare le immagini segnaposto che sostituirà. Usiamo la convenzione di specificare flickr: // [KEYWORD] nell'attributo src di un tag immagine per indicare che dovrebbe essere popolato con immagini da Flickr. Troviamo elementi immagine con un attributo src corrispondente, creiamo un nuovo FlickrBombImageView e quindi sostituiamo l'immagine con la nostra. Prendiamo una copia dell'immagine originale e la passiamo al nostro FlickrBombView, in modo da poter estrarre alcune opzioni di configurazione aggiuntive che potrebbero essere state specificate sull'elemento.

Il risultato finale di tutto quel duro lavoro è un'API molto semplice per le persone che utilizzano la libreria. Possono semplicemente definire tag immagine utilizzando la convenzione flickr: //, rilasciare il codice FlickrBomb in fondo alla pagina e, bam, ottengono immagini segnaposto da Flickr.

Funziona alla grande anche con grandi app web

Abbiamo una grande app web chiamata Notable, che è stata scritta senza preoccuparsi di generare contenuti lato client. Quando volevamo rendere turbo le sezioni dell'app generando contenuti lato client, abbiamo scelto Backbone. Le ragioni erano le stesse: volevamo un framework leggero che aiutasse a mantenere il codice organizzato, ma non ci costringesse a ripensare l'intera applicazione.

Abbiamo lanciato le modifiche all'inizio di quest'anno con grande successo e da allora abbiamo cantato le lodi di Backbones.

Risorse addizionali

C'è molto di più in Backbone rispetto a quello che ho trattato in questo articolo, la parte C (controller) di MVC (controller di visualizzazione del modello) per i principianti, che in realtà è un R (router) nell'ultima versione. Ed è tutto trattato nella documentazione di Backbone, una leggera lettura di sabato mattina:
documentcloud.github.com/backbone/

Se ti piacciono i tutorial più tradizionali, controlla il codice molto ben documentato di questa applicazione di cose da fare scritta in Backbone:
documentcloud.github.com/backbone/docs/todos.html

Articolo Precedente