Vi har gjort en ganske god jobb så langt med å bli organisert. Å få HTML-en vår brutt ut i en mal var et stort skritt. Vi gjør lengre tid på å søle vannet. Våre forskjellige biter av funksjonelt i JavaScript er delt inn i diskrete seksjoner, noe som gjør ting lettere å forstå og vedlikeholde. Jeg vet at vi har jobbet med en ganske liten demo, men jeg håper du kan forestille deg hvordan en app blir mer komplisert og flere linjer med kode, og denne organisasjonen er utrolig verdifull.
JavaScript har ikke noen "mening" som det var om organisering. Det er sannsynlig hvorfor noen elsker det, og noen føler seg tapt i det. Hvordan du velger å organisere det er helt opp til deg. Det er også sannsynlig hvorfor noen mennesker virkelig henger på rammer som, meningsfylt eller ikke, gir en organisasjonsstruktur. For eksempel Backbone. Men det er en annen serie!
For vår demo organiserer vi ganske enkelt et objekt som vi bare lager.
var Movies = ( )Hver ting vi gjør her er relatert til å få noen filmer på siden, så vi inneholder den i en “ting” som heter Filmer. Husk at vi bare gjør det som er fornuftig for oss organisatorisk. Dette har fordelen av å bare sette en variabel i det "globale omfanget" også. Hvis vi gjorde alt på verdensbasis, ville det være et rot av uforvarende variabler (og funksjoner og hva som helst) som er erklært andre steder.
Et objekt som det "gjør" faktisk ikke noe skjønt. Vi må "sparke den av".
var Movies = ( init: function() ( ) ) Movies.init();Å ha en funksjon som heter init er litt av en standard som lar alle som leser denne koden vite at koden der inne er det som kjører når denne gruppen av koder blir utført. Det skal lese litt som en innholdsfortegnelse over hva som skjer med denne kodegruppen. Deretter lager vi andre funksjoner (flere egenskaper for Movies-objektet) som gjør ting vi trenger å gjøre, i diskrete biter. Husk at vi kan kalle ting hva vi vil, hva som er fornuftig for oss.
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();Ganske klart va? Du kan legge merke til at appendMovesToPagedet ikke kalles i init. Det er fordi vi ikke kan ringe det før vi har data for å sende det. Disse dataene kommer fra et Ajax-anrop, noe som betyr at vi trenger tilbakeringing. Så getDatavil ende opp med å kalle den.
Alt annet som skal fylles ut her er bare å flytte biter av kode som vi allerede har skrevet til riktig sted.
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();
Og ferdig.
La oss se på de fire bekymringene vi skisserte tidligere, og se hva vi gjorde med dem.
- Få dataene. Vi flyttet JSON til en fil vi kunne slå med
$.getJSON, da det er sannsynlig at vi vil trenge å gjøre det i en reell situasjon. Annet enn bare å praktisere det, vil dette tillate oss å skrive tester rundt det. - Vis logikk. Vi har nå en veldig spesifikk funksjon appendMoviesToPage som kalles når vi er klare til å legge filmene våre til siden. Enkeltfunksjoner er gode for (igjen) organisering, forståelighet og vedlikeholdsevne.
- Hendelsesbehandling. Ved bruk av hendelsesdelegering blander vi ikke lenger denne "forretningslogikken" med visningslogikken eller malen. Vi trenger ikke engang å bekymre oss for utførelse av kildebestilling, fordi vi til slutt knytter hendelsene til
document. Funksjonaliteten vår fungerer uansett når / hvordan malen er lagt til på siden. - Mal. Helt flyttet til å bruke biblioteker ment spesielt for mal.
Jeg vil kalle den seieren. Her havnet vi:
Se Pen BwbhI av Chris Coyier (@chriscoyier) på CodePen