Vi har gjort ett ganska bra jobb hittills med att ordna oss. Att få ut vår HTML i en mall var ett stort steg. Vi ler längre vattnet så att säga. Våra olika bitar av funktionellt i JavaScript är uppdelade i diskreta avsnitt, vilket gör saker lättare att förstå och underhålla. Jag vet att vi har arbetat med en ganska liten demo, men jag hoppas att du kan föreställa dig hur en app blir mer komplicerad och fler kodrader, den här organisationen är oerhört värdefull.
JavaScript har inte någon "åsikt" som om organisation. Det är troligt varför vissa människor älskar det och andra känner sig förlorade i det. Hur du väljer att organisera det är helt upp till dig. Det är också troligt varför vissa människor verkligen hänger fast vid ramar som, meningsfulla eller inte, ger en organisationsstruktur. Till exempel ryggrad. Men det är en annan serie!
För vår demo organiserar vi helt enkelt ett objekt som vi helt enkelt skapar.
var Movies = ( )Allt vi gör här är relaterat till att få några filmer på sidan, så vi kommer att innehålla det i en “sak” som heter Filmer. Kom ihåg att vi bara gör vad som är vettigt för oss organisatoriskt. Detta har fördelen att också bara lägga in en variabel i det "globala omfånget". Om vi gjorde allt på det globala planet skulle det vara en röra av oavsiktliga övergripande variabler (och funktioner och vad som helst) som deklareras någon annanstans.
Ett sådant föremål ”gör” faktiskt ingenting dock. Vi måste "sparka igång".
var Movies = ( init: function() ( ) ) Movies.init();Att ha en funktion som heter init är lite av en standard som gör det möjligt för alla som läser den här koden att veta att koden där inne är vad som körs när denna kodgrupp körs. Det borde läsa lite som en innehållsförteckning över vad som händer med denna grupp kod. Vi gör sedan andra funktioner (fler egenskaper för filmerobjektet) som gör saker som vi behöver göra, i diskreta bitar. Kom ihåg att vi kan kalla saker vad vi vill, vad som är vettigt för 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();Ganska tydligt va? Du kanske märker att det appendMovesToPageinte kallas i init. Det beror på att vi inte kan ringa det förrän vi har data för att skicka det. Den informationen kommer från ett Ajax-samtal, vilket innebär att vi behöver en återuppringning. Så getDatakommer att sluta ringa den.
Allt annat som kommer att fyllas i här är bara att flytta bitar av kod som vi redan har skrivit till rätt plats.
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();
Och gjort.
Låt oss titta på de fyra frågorna som vi skisserade tidigare och se vad vi gjorde åt dem.
- Få data. Vi flyttade JSON till en fil som vi kunde träffa med
$.getJSON, eftersom det är troligt att vi skulle behöva göra i en verklig situation. Bortsett från att bara öva det, kommer detta att tillåta oss att skriva tester kring det. - Visa logik. Vi har nu en mycket specifik funktion appendMoviesToPage som kallas när vi är redo att lägga till våra filmer på sidan. Enfunktionsfunktioner är utmärkta för (igen) organisation, förståelse och underhåll.
- Händelsehantering. Med hjälp av eventdelegering blandar vi inte längre denna "affärslogik" med visningslogiken eller mallen. Vi behöver inte ens oroa oss för körning av källorder, eftersom vi i slutändan fäster händelserna till
document. Vår funktionalitet fungerar oavsett när / hur mallen läggs till på sidan. - Mallar. Helt flyttad för att använda bibliotek avsedda speciellt för mallar.
Jag skulle kalla den vinsten. Här hamnade vi:
Se Pen BwbhI av Chris Coyier (@chriscoyier) på CodePen