Finora abbiamo fatto un ottimo lavoro nell'organizzarci. La suddivisione del codice HTML in un modello è stato un grande passo. Stiamo più intorbidendo le acque per così dire. Le nostre diverse parti funzionali in JavaScript sono suddivise in sezioni discrete, rendendo le cose più facili da capire e mantenere. So che abbiamo lavorato con una demo piuttosto piccola, ma spero che tu possa immaginare come, man mano che un'app diventa più complicata e più righe di codice, questa organizzazione è incredibilmente preziosa.
JavaScript non ha alcuna "opinione" per così dire sull'organizzazione. Questo è probabilmente il motivo per cui alcune persone lo adorano e altre si sentono perse. Il modo in cui scegli di organizzarlo dipende totalmente da te. Questo è probabilmente anche il motivo per cui alcune persone si attaccano davvero a strutture che, supponenti o meno, forniscono una struttura organizzativa. Ad esempio, Backbone. Ma questa è un'altra serie!
Per la nostra demo, ci organizzeremo semplicemente attorno a un oggetto che creiamo semplicemente.
var Movies = ( )Ogni cosa che stiamo facendo qui è correlata all'ottenere alcuni film sulla pagina, quindi la conterremo in una "cosa" chiamata Film. Ricorda che stiamo solo facendo tutto ciò che ha senso per noi a livello organizzativo. Ciò ha il vantaggio di inserire solo una variabile nello "scopo globale". Se facessimo tutto nell'ambito globale, sarebbe un pasticcio di sovrascrivere accidentalmente variabili (e funzioni e quant'altro) dichiarate altrove.
Un oggetto del genere però non “fa” nulla. Avremo bisogno di "dare il via".
var Movies = ( init: function() ( ) ) Movies.init();Avere una funzione chiamata init è un po 'uno standard che consente a chiunque legga questo codice di sapere che il codice al suo interno è ciò che viene eseguito quando viene eseguito questo gruppo di codice. Dovrebbe essere un po 'come un sommario di ciò che accade con questo gruppo di codice. Quindi creiamo altre funzioni (più proprietà dell'oggetto Movies) che fanno le cose che dobbiamo fare, in blocchi discreti. Ricorda che possiamo chiamare le cose come vogliamo, qualunque cosa abbia senso per noi.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( // Templating here ), getData: function() ( // Data getting here ), appendMoviesToPage: function(data) ( // Display logic here ), bindUIActions: function() ( // Event delegating binding here. ) ) Movies.init();Abbastanza chiaro eh? Potresti notare che appendMovesToPagenon viene chiamato nel file init. Questo perché non possiamo chiamarlo finché non abbiamo i dati per inviarlo. Quei dati proverranno da una chiamata Ajax, il che significa che abbiamo bisogno di una richiamata. Quindi getDatafinirà per chiamare quello.
Tutto il resto che verrà compilato qui è solo lo spostamento di bit di codice che abbiamo già scritto nel posto giusto.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( Movies.compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " ); ), getData: function() ( $.getJSON("http://codepen.io/chriscoyier/pen/0b21d5b4f7fbf4e7858b2ffc8890e007.js", function(data) ( Movies.appendMoviesToPage(data); )); ), appendMoviesToPage: function(data) ( var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += Movies.compiled(data.movies(i)); ) $("#movies").append(html); ), bindUIActions: function() ( $(document).on("click", ".module-movie", function() ( alert("movie added"); )); ) ) Movies.init();
E fatto.
Diamo un'occhiata alle quattro preoccupazioni che abbiamo delineato in precedenza e vediamo cosa ne abbiamo fatto.
- Recupero dei dati. Abbiamo spostato il JSON in un file con cui avremmo potuto colpire
$.getJSON, poiché è probabile che avremmo bisogno di fare in una situazione reale. Oltre alla pratica, questo ci consentirà di scrivere test attorno ad esso. - Logica di visualizzazione. Ora abbiamo una funzione molto specifica appendMoviesToPage che viene chiamata quando siamo pronti per aggiungere i nostri filmati alla pagina. Le funzioni monouso sono ottime per (di nuovo) organizzazione, comprensibilità e manutenibilità.
- Gestione degli eventi. Utilizzando la delega degli eventi, non stiamo più mescolando questa "logica aziendale" con la logica di visualizzazione o il modello. Non dobbiamo nemmeno preoccuparci dell'esecuzione dell'ordine di origine, perché in definitiva colleghiamo gli eventi al file
document. La nostra funzionalità funzionerà indipendentemente da quando / come il modello viene aggiunto alla pagina. - Modelli. Completamente spostato per utilizzare librerie pensate specificamente per la creazione di modelli.
La chiamerei vittoria. Ecco dove siamo finiti:
Guarda la Pen BwbhI di Chris Coyier (@chriscoyier) su CodePen