Per anni gli sviluppatori hanno sfruttato framework PHP come CakePHP, CodeIgniter e persino i framework Ruby basati sul pattern MVC. Ma se ci pensate, non ci sono stati molti framework JavaScript per aiutarci nello stesso modo.
Forse perché JavaScript viene spesso sottovalutato dai programmatori "reali", ma i framework JavaScript sono sempre rimasti indietro di un po '. Spina dorsale ha cambiato questo aspetto e, come vedrete in questa introduzione, utilizza il pattern MVC per separare il codice JavaScript e aiutarci a creare applicazioni strutturate. In effetti, fornisce il pattern MVC allo sviluppo front-end.
Backbone è una libreria JavaScript leggera dello stesso creatore di CoffeeScript. Ma non lasciare che il fatto che si tratti di una libreria ti fa confondere con jQuery, Backbone è lontano da jQuery quando si tratta di funzionalità. Backbone non gestisce gli elementi DOM, motivo per cui molti sviluppatori lo usano mano nella mano con jQuery; Struttura organizzativa di backbone e jQuery che manipolano il DOM.
Quello che Backbone fa veramente bene è fornire la struttura alle tue applicazioni JavaScript e, poiché funziona con JSON, è semplice da inserire in quasi tutti i sistemi di front-end.
MVC è sinonimo di modelli, viste e collezioni; e in Backbone, con anche router.
In Backbone un modello rappresenta ed entità, quindi per esempio, se abbiamo a che fare con gli utenti, ogni utente sarebbe un modello; è come una riga in un database.
Per creare un modello semplice usando Backbone dovremmo digitare:
var user = Backbone.Model.extend({});Quel codice è tecnicamente corretto ma quel Modello non avrebbe alcuna funzionalità, quindi abbiamo bisogno di aggiungere qualcosa per questo Modello da fare quando viene istanziato e per farlo, useremmo un codice leggermente più complesso:
User = Backbone.Model.extend({initialize: function(){alert('Welcome to {$lang_domain} ');}, default: {name:' John Doe ', età: 30,}}); var user = new User; Nel codice precedente, la funzione di inizializzazione verrà attivata ogni volta che creiamo una nuova istanza di questo modello, dopo l'inizializzazione tutto ciò che abbiamo fatto è aggiungere alcune impostazioni predefinite nel caso in cui nessun dato sia passato per il Modello. Fatto ciò, per creare un'istanza del modello useremmo il codice come:
var dave = new User({name:'Dave Smith', age:25});Per recuperare un attributo di una determinata istanza, utilizzeremmo:
var name = dave.get('name');E per cambiare un attributo useremo:
dave.set({age:31});Questo è il fondamento di come i Modelli funzionano in Backbone, c'è molto di più che possono ottenere, ma si spera che si possa già vedere il potenziale per strutturare il codice.
Ricordi che ho detto che un modello era come un utente? Bene, seguendo quell'analogia una Collezione è tutti gli utenti che abbiamo. Le raccolte sono essenzialmente insiemi di Modelli e, poiché abbiamo già il nostro modello utente, costruiremo una raccolta da lì:
var Users = Backbone.Collection.extend({model: User});Attualmente questa raccolta è vuota, ma è semplice creare alcuni utenti e aggiungerli alla raccolta:
var barney = new User({ name: 'Barney Stinson', age: 30});var ted = new User({ name: 'Ted Mosby', age:32});var lily = new User({ name: 'Lily Aldrin', age: 29});var himym = new Users([barney, ted, lily]);Ora, se console.log himym.models otterremo i valori da barney, ted e giglio.
Le viste sono associate a una parte del DOM, sono progettate per essere legate ai Modelli che sono essenzialmente i dati dell'applicazione e servono a presentare questi dati all'utente finale.
Creare una vista è semplice:
UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){}});Questa è la struttura di base di una vista. Il tagName è l'elemento che verrà utilizzato per avvolgere la vista, la classe viene impostata usando className e infine aggiungiamo una funzione di rendering, anche se in questo caso la funzione era vuota. È la funzione di rendering che usiamo per aggiungere allo stage, in questo modo:
UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){this.el.innerHTML = this.model.get('age');}});L'elemento el nella funzione di rendering fa riferimento al wrapper che abbiamo creato e utilizzando la funzione innerHTML abbiamo inserito l'età dell'utente all'interno del div.
Questo esempio non ha utilizzato alcun sistema di template, ma se lo desideri puoi sfruttare Underscore.js fornito con Backbone.
Possiamo anche ascoltare gli eventi collegando un listener di eventi alla nostra vista e in questo esempio creeremo un semplice listener di clic per il nostro div (questo codice va subito dopo la nostra funzione di rendering):
events:{'click.user': 'divClicked'},divClicked: function(event){alert('You clicked the div');}I router backbone vengono utilizzati per il routing degli URL nell'applicazione quando si utilizzano hashtag (#). Per definire un router, devi sempre aggiungere almeno una rotta e almeno una funzione che verrà eseguita quando l'URL desiderato viene raggiunto, in questo modo:
var appRouter = Backbone.Router.extend({routes:{'user': 'userRoute'},userRoute: function() {// the code to run when http://example.com/#user}});Backbone.history.start();Questo è un router estremamente semplice che eseguirà un'azione quando viene raggiunto l'hash dell'utente #. La chiamata al metodo Backbone.history.start () chiede a Backbone di monitorare gli hashtag in modo che i vari stati del sito siano bookmarkable e possano essere navigati con il browser.
Questo articolo copre solo le basi di Backbone, che può essere utilizzato per creare applicazioni strutturate in JavaScript. Ti consiglio di controllare il sistema di template da utilizzare insieme a Backbone per vedere tutto il potenziale di questa libreria. Spero che questa breve introduzione ti abbia mostrato quanto può essere utile MVC sul front-end.
Hai costruito applicazioni con Backbone? Che tipo di applicazioni ti piacerebbe costruire? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine di ponteggio via Shutterstock.