Vi har indtil videre gjort et ret godt stykke arbejde med at blive organiseret. At få vores HTML brudt ud i en skabelon var et stort skridt. Vi mudrer længere vandet for at sige det. Vores forskellige bits funktionelt i JavaScript er opdelt i diskrete sektioner, hvilket gør tingene lettere at forstå og vedligeholde. Jeg ved, at vi har arbejdet med en ret lille demo, men jeg håber, du kan forestille dig, hvordan en organisation er utrolig værdifuld, da en app bliver mere kompliceret og flere linjer med kode.
JavaScript har ikke nogen "mening" som om organisation. Det er sandsynligt, hvorfor nogle mennesker elsker det, og nogle mennesker føler sig fortabt i det. Hvordan du vælger at organisere det er helt op til dig. Det er også sandsynligt, hvorfor nogle mennesker virkelig klæber til rammer, der, meningsfuldt eller ej, giver en organisationsstruktur. For eksempel Backbone. Men det er en anden serie!
Til vores demo organiserer vi simpelthen et objekt, som vi simpelthen opretter.
var Movies = ( )Hver ting, vi laver her, er relateret til at få nogle film på siden, så vi indeholder den inden for en "ting", der hedder Film. Husk, at vi bare gør det, der giver mening for os organisatorisk. Dette har fordelen ved kun at placere en variabel også i det "globale anvendelsesområde". Hvis vi gjorde alt på verdensplan, ville det være et rod af utilsigtet overordnede variabler (og funktioner og hvad som helst), der blev erklæret andetsteds.
Et sådant objekt “gør” faktisk ikke noget. Vi bliver nødt til at "sparke det af".
var Movies = ( init: function() ( ) ) Movies.init();At have en funktion ved navn init er lidt af en standard, der gør det muligt for alle, der læser denne kode, at vide, at koden derinde er, hvad der kører, når denne gruppe kode udføres. Det skal læse lidt som en indholdsfortegnelse over, hvad der sker med denne gruppe kode. Derefter laver vi andre funktioner (flere egenskaber for Movies-objektet), der gør ting, som vi skal gøre, i diskrete stykker. Husk, at vi kan kalde ting, hvad vi vil, hvad der giver mening for os.
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();Temmelig klar, ikke? Du bemærker muligvis, at appendMovesToPageder ikke kaldes i init. Det er fordi vi ikke kan ringe til det, før vi har data til at sende det. Disse data kommer fra et Ajax-opkald, hvilket betyder, at vi har brug for en tilbagekaldelse. Så getDatavil ende med at kalde den ene.
Alt andet, der udfyldes her, er bare at flytte bit kode, som vi allerede har skrevet til det rigtige 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 færdig.
Lad os se på de fire bekymringer, vi skitserede tidligere, og se hvad vi gjorde ved dem.
- Få dataene. Vi flyttede JSON ind i en fil, vi kunne ramme med
$.getJSON, da det sandsynligvis ville være nødvendigt at gøre det i en reel situation. Bortset fra bare at øve det, vil dette give os mulighed for at skrive tests rundt om det. - Vis logik. Vi har nu en meget specifik funktion appendMoviesToPage, som kaldes, når vi er klar til at tilføje vores film til siden. Enkeltfunktioner er gode til (igen) organisering, forståelighed og vedligeholdelsesevne.
- Begivenhedshåndtering. Ved hjælp af begivenhedsdelegering blander vi ikke længere denne "forretningslogik" ind med displaylogikken eller skabelonen. Vi behøver ikke engang at bekymre os om udførelse af kildeordre, fordi vi i sidste ende knytter begivenhederne til
document. Vores funktionalitet fungerer, uanset hvornår / hvordan skabelonen føjes til siden. - Skabeloner. Fuldstændig flyttet til at bruge biblioteker, der er beregnet specifikt til skabeloner.
Jeg vil kalde den gevinst. Her endte vi:
Se Pen BwbhI af Chris Coyier (@chriscoyier) på CodePen