We hebben tot nu toe behoorlijk goed werk verricht door ons te organiseren. Het was een grote stap om onze HTML uit te splitsen in een sjabloon. We zijn de wateren langer aan het vertroebelen om zo te zeggen. Onze verschillende stukjes functioneel JavaScript zijn opgedeeld in discrete secties, waardoor dingen gemakkelijker te begrijpen en te onderhouden zijn. Ik weet dat we met een vrij kleine demo hebben gewerkt, maar ik hoop dat je je kunt voorstellen hoe deze organisatie ongelooflijk waardevol is naarmate een app gecompliceerder wordt en meer regels code.
JavaScript heeft als het ware geen “mening” over organisatie. Dat is waarschijnlijk waarom sommige mensen er dol op zijn en sommige mensen zich erin verloren voelen. Hoe u ervoor kiest om het te organiseren, is geheel aan u. Dat is waarschijnlijk ook de reden waarom sommige mensen echt vastklampen aan kaders die, al dan niet eigenwijs, een organisatiestructuur bieden. Bijvoorbeeld Backbone. Maar dat is een andere serie!
Voor onze demo organiseren we eenvoudigweg rond een object dat we eenvoudigweg maken.
var Movies = ( )Alles wat we hier doen, heeft te maken met het krijgen van enkele films op de pagina, dus we zullen het opnemen in één "ding" genaamd Films. Onthoud dat we gewoon doen wat organisatorisch voor ons zinvol is. Dit heeft het voordeel dat er ook maar één variabele in de "globale scope" wordt geplaatst. Als we alles op globaal niveau zouden doen, zou het een puinhoop zijn van per ongeluk overheersende variabelen (en functies en wat dan ook) die elders worden gedeclareerd.
Zo'n object “doet” echter eigenlijk niets. We moeten het aftrappen.
var Movies = ( init: function() ( ) ) Movies.init();Het hebben van een functie met de naam init is een beetje een standaard waardoor iedereen die deze code leest, weet dat de code daarin wordt uitgevoerd wanneer deze groep code wordt uitgevoerd. Dat zou een beetje moeten lijken op een inhoudsopgave van wat er gebeurt met deze groep code. We maken dan andere functies (meer eigenschappen van het Movies-object) die dingen doen die we moeten doen, in discrete stukjes. Onthoud dat we dingen kunnen noemen wat we willen, wat voor ons logisch is.
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();Vrij duidelijk hè? U merkt misschien dat het appendMovesToPageniet wordt genoemd in het init. Dat komt omdat we dat niet kunnen noemen totdat we gegevens hebben om het te verzenden. Die gegevens zullen afkomstig zijn van een Ajax-oproep, wat betekent dat we teruggebeld moeten worden. Dus getDatazal die uiteindelijk bellen.
Al het andere dat hier zal worden ingevuld, is het verplaatsen van stukjes code die we al op de juiste plaats hebben geschreven.
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();
En klaar.
Laten we eens kijken naar de vier zorgen die we eerder hebben uiteengezet en kijken wat we eraan hebben gedaan.
- De gegevens ophalen. We hebben de JSON verplaatst naar een bestand waarmee we konden raken
$.getJSON, omdat we dat waarschijnlijk in een echte situatie zouden moeten doen. Behalve dat oefenen, kunnen we er tests omheen schrijven. - Logica weergeven. We hebben nu een heel specifieke functie appendMoviesToPage die wordt aangeroepen wanneer we klaar zijn om onze films aan de pagina toe te voegen. Functies met één doel zijn geweldig voor (weer) organisatie, begrijpelijkheid en onderhoudbaarheid.
- Afhandeling van gebeurtenissen. Door eventdelegatie te gebruiken, mengen we deze "bedrijfslogica" niet langer met de weergavelogica of sjabloon. We hoeven ons zelfs geen zorgen te maken over de uitvoering van de bronorder, omdat we uiteindelijk de gebeurtenissen koppelen aan het
document. Onze functionaliteit werkt ongeacht wanneer / hoe de sjabloon aan de pagina wordt toegevoegd. - Templating. Volledig verplaatst om bibliotheken te gebruiken die specifiek bedoeld zijn voor sjablonen.
Ik zou dat winnen noemen. Hier zijn we terechtgekomen:
Zie de Pen BwbhI door Chris Coyier (@chriscoyier) op CodePen