Share
A differenza dei suoi pari per lo sviluppo web, JavaScript non ha mai avuto molto in termini di strutture per fornire una struttura. Per fortuna, negli ultimi anni, sta iniziando a cambiare.
Oggi vorrei presentarvi Backbone.JS, una piccola libreria che semplifica enormemente il processo di creazione di app complesse, interattive e basate sui dati. Fornisce un modo pulito per separare chirurgicamente i dati dalla presentazione.
Creato da Jeremy Ashkenas, il ninja JS che ha creato CoffeeScript, Backbone è una libreria super leggera che ti consente di creare front-end facili da mantenere. È backend agnostico e funziona bene con qualsiasi delle librerie JavaScript moderne che stai già utilizzando.
Backbone è una collezione di oggetti coesivi, che pesa all'ombra sotto 4kb, che fornisce una struttura al tuo codice e fondamentalmente ti aiuta a creare una app MVC corretta nel browser. Il sito ufficiale descrive il suo scopo in questo modo:
Backbone fornisce la struttura alle applicazioni pesanti di JavaScript fornendo modelli con associazione di valori-chiave e eventi personalizzati, raccolte con una ricca API di funzioni enumerabili, viste con gestione dichiarativa degli eventi e connessione all'intera applicazione esistente tramite un'interfaccia JSON RESTful.
Ammettiamolo: quanto sopra è un po 'difficile da analizzare e dare un senso. Quindi andiamo avanti e decostruiamo un po 'il gergo con l'aiuto di Jeremy.
Quando vengono modificati il contenuto o lo stato di un modello, vengono notificati altri oggetti che sono stati abbonati al modello in modo che possano procedere di conseguenza. Qui, le visualizzazioni ascoltano le modifiche nel modello e si aggiornano di conseguenza anziché il modello che deve gestire manualmente le viste.
Backbone viene fornito con un numero di funzioni molto utili per la gestione e il funzionamento dei dati. A differenza di altre implementazioni, gli array in JavaScript sono piuttosto castrati, il che è davvero un problema di intralcio quando devi gestire i dati.
I tuoi giorni di scrittura degli spaghetti bind call sono finiti. È possibile dichiarare a livello di codice quale callback deve essere associato a elementi specifici.
Anche se il metodo predefinito è utilizzare una chiamata AJAX standard quando si desidera parlare al server, è possibile passare facilmente a qualsiasi cosa sia necessaria. Un certo numero di adattatori è nato coprendo la maggior parte dei preferiti tra cui Websocket e storage locale.
Per ridurlo in termini ancora più semplici:
Backbone fornisce un modo pulito per separare chirurgicamente i dati dalla presentazione. Il modello che funziona con i dati riguarda solo la sincronizzazione con un server mentre il compito principale della vista è quello di ascoltare le modifiche al modello sottoscritto e il rendering dell'HTML.
Suppongo che tu sia un po 'stordito a questo punto, quindi chiariamo alcune cose:
No. Sono piuttosto complementari nei loro scopi con quasi nessuna sovrapposizione di funzionalità. Backbone gestisce tutte le astrazioni di livello superiore, mentre jQuery - o librerie simili - lavorano con il DOM, normalizzano eventi e così via.
I loro scopi e casi d'uso sono piuttosto diversi e perché sai che uno non significa che non si dovrebbe imparare l'altro. Come sviluppatore JavaScript, dovresti sapere come lavorare efficacemente con entrambi.
Perché il più delle volte il codice di front end si trasforma in una pila fumante e sporca di callback annidati, manipolazioni DOM, HTML per la presentazione in mezzo ad altri atti indicibili.
Backbone offre un modo significativamente pulito ed elegante per gestire questo caos.
Backbone è ideale per la creazione di applicazioni front-end pesanti e basate su dati. Pensa all'interfaccia GMail, al nuovo Twitter oa qualsiasi altra rivelazione degli ultimi anni. Rende la creazione complessa applicazioni Più facile.
Mentre puoi calzare il tutto per il web più mainstream pagine, questa è davvero una libreria su misura per le applicazioni web.
sì e no.
Sì, perché come i suddetti framework, questo è principalmente inteso per la creazione di front-end complessi per applicazioni web.
È dissimile dal fatto che Backbone è piuttosto snello e non ha il widget che gli altri spediscono.
Backbone è incredibilmente leggero, a meno di 4kb.
C'è anche il fatto che Cappuccino ti costringe a scrivere il tuo codice in Objective-J, mentre le viste di Sproutcore devono essere dichiarate programmaticamente in JS. Anche se nessuno di questi approcci è sbagliato, con Backbone, il normale JavaScript viene sfruttato dal tuo run of the mill HTML e CSS per ottenere risultati, portando a una curva di apprendimento più delicata.
Assolutamente. Non solo il tuo tipico accesso DOM, il tipo di wrapping AJAX, ma anche il resto del tuo modello di caricamento degli script e degli script. È accoppiato molto, molto liberamente, il che significa che puoi usare quasi tutti i tuoi strumenti insieme a Backbone.
No scusa. Ma ecco qualcosa per tirarti su di morale.
Ok, ora con quello fuori mano, tuffiamoci dentro!
MVC in Backbone originariamente significava modelli, viste e collezioni, poiché non c'erano controller nel framework. Questo è cambiato da allora.
Il core di Backbone consiste di quattro classi principali:
Dato che siamo un po 'a corto di tempo, diamo un'occhiata solo alle classi principali oggi. Faremo un tutorial di follow-up con un'app super semplice per dimostrare i concetti insegnati qui poiché sarebbe troppo per mettere tutto in un singolo articolo e aspettarsi che il lettore analizzi tutto.
Tieni gli occhi aperti per le prossime due settimane!
I modelli possono significare cose diverse nelle diverse implementazioni di MVC. In Backbone, un modello rappresenta un'entità singolare, un record in un database, se lo si desidera. Ma qui non ci sono regole ferree. Dal sito Web di Backbone:
I modelli sono il cuore di qualsiasi applicazione JavaScript, contenente i dati interattivi e gran parte della logica che lo circonda: conversioni, convalide, proprietà calcolate e controllo degli accessi.
Il modello fornisce semplicemente un modo per leggere e scrivere proprietà o attributi arbitrari su un set di dati. Con questo in mente, il singolo liner sottostante è completamente funzionale:
var Game = Backbone.Model.extend ();
Costruiamoci un po 'su questo.
Accentsconagua
var Game = Backbone.Model.extend (initialize: function () alert ("Oh hey!");, defaults: name: 'Default title', releaseDate: 2011,); inizializzare verrà generato quando un oggetto viene istanziato. Qui, sto solo allertando le inanità - nella tua app dovresti probabilmente fare il bootstrap dei tuoi dati o eseguire altre pulizie. Sto anche definendo un gruppo di impostazioni predefinite, nel caso in cui non vengano trasmessi dati.
Diamo un'occhiata a come leggere e scrivere attributi. Ma prima, creiamo una nuova istanza.
// Crea un nuovo gioco var portal = new Game (name: "Portal 2", releaseDate: 2011); // release manterrà il valore releaseDate - 2011 qui var release = portal.get ('releaseDate'); // Cambia l'attributo name portal.set (name: "Portal 2 by Valve"); Se hai notato i mutatori get / set, prendi un cookie! Gli attributi di un modello non possono essere letti attraverso il tipico formato object.attribute. Dovrai passare attraverso il getter / setter poiché c'è una minore possibilità di modificare i dati per errore.
A questo punto, tutte le modifiche vengono mantenute solo in memoria. Rendiamo permanenti queste modifiche parlando al server.
portal.save ();
Questo è tutto. Ti aspettavi di più? Il one-liner qui sopra invierà ora una richiesta al tuo server. Tieni presente che il tipo di richiesta cambierà in modo intelligente. Poiché si tratta di un oggetto nuovo, verrà utilizzato il POST. Altrimenti, viene utilizzato PUT.
Ci sono molte più funzioni, i modelli Backbone ti danno di default, ma questo dovrebbe sicuramente iniziare. Hit la documentazione per ulteriori informazioni.
Le raccolte in Backbone sono essenzialmente solo una raccolta di modelli. Andando con la nostra analogia con il database di prima, le collezioni sono i risultati di una query in cui i risultati sono costituiti da un numero di record [modelli]. Puoi definire una collezione in questo modo:
var GamesCollection = Backbone.Collection.extend (model: Game,);
La prima cosa da prendere in considerazione è che stiamo definendo di quale modello si tratta di una collezione. Espandendo il nostro esempio prima, sto facendo di questa collezione una collezione di giochi.
Ora puoi andare avanti e giocare con i tuoi dati ai contenuti del tuo cuore. Ad esempio, estendere la raccolta per aggiungere un metodo che restituisce solo giochi specifici.
var GamesCollection = Backbone.Collection.extend (model: Game, old: function () return this.filter (function (game) return game.get ('releaseDate') < 2009; ); ); È stato facile, no? Ci limitiamo a verificare se un gioco è stato rilasciato prima del 2009 e, in tal caso, restituire il gioco.
Puoi anche manipolare direttamente i contenuti di una raccolta in questo modo:
var games = new GamesCollection games.get (0);
Il frammento di cui sopra istanzia una nuova raccolta e quindi recupera il modello con un ID di 0. Puoi trovare un elemento in una posizione specifica facendo riferimento all'indice al a metodo in questo modo: games.at (0);
E infine, puoi popolare dinamicamente la tua collezione in questo modo:
var GamesCollection = Backbone.Collection.extend (model: Game, url: '/ games'); var games = new GamesCollection games.fetch ();
Stiamo semplicemente permettendo a Backbone dove ottenere i dati attraverso il url proprietà. Fatto ciò, stiamo semplicemente creando un nuovo oggetto e chiamando il andare a prendere metodo che genera una chiamata asincrona al server e popola la raccolta con i risultati.
Questo dovrebbe riguardare le basi delle collezioni con Backbone. Come ho già detto, ci sono un sacco di chicche qui con Backbone che aliasing un sacco di utilissime utility dalla libreria di Underscore. Una rapida lettura della documentazione ufficiale dovrebbe iniziare.
Le viste in Backbone possono essere leggermente confuse a prima vista. Per i puristi di MVC, assomigliano a un controller piuttosto che a una vista.
Una visione gestisce fondamentalmente due doveri:
Andiamo avanti e creiamo una visione molto semplice.
GameView = Backbone.View.extend (tagName: "div", className: "game", render: function () // codice per il rendering dell'HTML per la visualizzazione);
Abbastanza semplice se hai seguito questo tutorial finora. Sto solo specificando quale elemento HTML dovrebbe essere usato per avvolgere la vista attraverso il tagName attributo e l'ID per esso attraverso nome della classe.
Andiamo avanti alla porzione di rendering.
render: function () this.el.innerHTML = this.model.get ('name'); // Oppure il modo jQuery $ (this.el) .html (this.model.get ('name')); EL si riferisce all'elemento DOM a cui fa riferimento la vista. Stiamo semplicemente accedendo al nome del gioco in quello dell'elemento innerHTML proprietà. Per dirla semplicemente, il div elemento ora contiene il nome del nostro gioco. Ovviamente, il modo jQuery è più semplice se hai già usato la libreria.
Con layout più complicati, trattare con HTML all'interno di JavaScript non è solo noioso ma anche avventato. In questi scenari, il templating è la strada da percorrere.
Backbone viene fornito con una soluzione di template minimale per gentile concessione di Underscore.JS ma siete più che benvenuti ad utilizzare una delle eccellenti soluzioni di template disponibili.
Infine, diamo un'occhiata a come le visualizzazioni ascoltano gli eventi. Prima gli eventi DOM.
eventi: 'click .name': 'handleClick', handleClick: function () alert ('Nel nome della scienza? you monster'); // Altre azioni se necessarie Dovrebbe essere abbastanza semplice se hai già lavorato con eventi. Fondamentalmente stiamo definendo e collegando eventi attraverso l'oggetto eventi. Come puoi vedere sopra, la prima parte si riferisce all'evento, la successiva specifica gli elementi di attivazione mentre l'ultima parte si riferisce alla funzione che deve essere attivata.
E ora sul legame con modelli e collezioni. Tratterò il binding ai modelli qui.
GameView = Backbone.View.extend (initialize: function (args) _.bindAll (this, 'changeName'); this.model.bind ('change: name', this.changeName);,); La prima cosa da notare è il modo in cui inseriamo il codice di binding nel file inizializzare funzioni. Naturalmente, è meglio farlo fin dall'inizio.
bindAll è un'utilità fornita da Underscore che persiste sul valore di una funzione Questo valore. Ciò è particolarmente utile poiché stiamo passando un sacco di funzioni e le funzioni specificate come callback hanno cancellato questo valore.
Ora ogni volta che un modello è nome l'attributo è cambiato, il cambia nome la funzione è chiamata. Puoi anche fare uso di Inserisci e rimuovere verbi per sondare le modifiche.
Ascoltare i cambiamenti in una raccolta è semplice come la sostituzione modello con collezione mentre lega il gestore al callback.
I controller in Backbone ti consentono essenzialmente di creare app con segnalibri e stateful utilizzando hashbangs.
var Hashbangs = Backbone.Controller.extend (routes: "! /": "root", "! / games": "games",, root: function () // Prepara la home page e renderizza materiale , games: function () // Ri-rendering delle viste per mostrare una collezione di libri,);
Questo è molto familiare per il routing nei framework MVC serveride tradizionali. Per esempio, !/Giochi si mapperà al Giochi funzione mentre l'URL nel browser stesso sarà dominio / #! / giochi.
Attraverso l'uso intelligente di hashbang, è possibile creare app che sono pesantemente basate su JS ma anche bookmarkable.
Se sei preoccupato di rompere il pulsante Indietro, Backbone ti copre anche tu.
// Avvia il controller in questo modo var ApplicationController = new Controller; Backbone.history.start ();
Con lo snippet sopra riportato, Backbone può monitorare i tuoi hashbang e in combinazione con i percorsi che hai specificato in precedenza, rendi la tua app prenotabile.
Nel complesso, ecco alcune lezioni che ho imparato dal modo Backbone di creare applicazioni:
È sufficiente dire che Backbone ha causato un cambio di paradigma nel modo in cui dovrebbero essere costruiti i front end, almeno per me. Dato lo scopo molto ampio dell'articolo di oggi, sono sicuro che hai un sacco di domande. Premi la sezione commenti qui sotto per ringraziarti. Grazie mille per aver letto e aspettarti un sacco di tutorial Backbone in futuro!
