Zatiaľ sme odviedli celkom dobrú prácu, keď sme sa zorganizovali. Získanie nášho kódu HTML v šablóne bol veľkým krokom. Dlhšie takpovediac bahnitíme vody. Naše rôzne funkčné časti v JavaScripte sú rozdelené do diskrétnych častí, čo uľahčuje porozumenie a údržbu. Viem, že sme pracovali s celkom malou ukážkou, ale dúfam, že si dokážete predstaviť, ako je aplikácia zložitejšia a obsahuje viac riadkov kódu, táto organizácia je neuveriteľne cenná.
JavaScript nemá žiadny „názor“, ako by bol na organizáciu. Je pravdepodobné, že niektorí ľudia ju milujú a niektorí sa v nej cítia stratení. Ako sa rozhodnete ho usporiadať, je úplne na vás. To je tiež pravdepodobné, prečo sa niektorí ľudia skutočne pripájajú k rámcom, ktoré, či už názorovo alebo nie, poskytujú organizačnú štruktúru. Napríklad Backbone. Ale to je už iná séria!
Pre našu ukážku sa jednoducho zoradíme okolo objektu, ktorý jednoducho vytvoríme.
var Movies = ( )Každá vec, ktorú tu robíme, súvisí so získaním niektorých filmov na tejto stránke, takže ich budeme obsahovať v rámci jednej „veci“ s názvom Filmy. Pamätajte, že robíme len to, čo nám dáva organizačne zmysel. To má výhodu v tom, že sa do „globálneho rozsahu“ tiež vloží iba jedna premenná. Keby sme robili všetko v globálnom rozsahu, bol by to neporiadok s náhodnými prepismi premenných (a funkcií a všetkého iného) deklarovaných inde.
Takýto objekt v skutočnosti nič „nerobí“. Budeme to musieť „naštartovať“.
var Movies = ( init: function() ( ) ) Movies.init();Funkcia s názvom init je trochu štandard, ktorý umožňuje každému, kto číta tento kód, vedieť, že tam je kód, ktorý sa spustí, keď sa vykoná táto skupina kódu. To by malo znieť trochu ako obsah toho, čo sa stane s touto skupinou kódu. Potom urobíme ďalšie funkcie (ďalšie vlastnosti objektu Movies), ktoré budú robiť veci, ktoré musíme robiť, v samostatných častiach. Pamätajte, že môžeme volať veci, ako chceme, bez ohľadu na to, čo nám dáva zmysel.
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();Celkom jasné hm? Môžete si všimnúť, že appendMovesToPagenie je volaný v init. Je to preto, že to nemôžeme nazvať, kým nebudeme mať dáta na ich odoslanie. Tieto údaje pochádzajú z volania Ajaxu, čo znamená, že potrebujeme spätné volanie. Takže getDatanakoniec zavoláte tomu.
Všetko ostatné, čo sa tu vyplní, sú iba presunuté kúsky kódu, ktoré sme už napísali na správne miesto.
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();
A hotovo.
Pozrime sa na štyri obavy, ktoré sme načrtli skôr, a pozrime sa, čo sme s nimi urobili.
- Získavanie údajov. Presunuli sme JSON do súboru, do ktorého sme mohli zasiahnuť
$.getJSON, pretože je pravdepodobné, že by sme to museli urobiť v reálnej situácii. Okrem toho, že to budeme iba praktizovať, nám to umožní napísať okolo toho testy. - Zobraziť logiku. Teraz máme veľmi špecifickú funkciu appendMoviesToPage, ktorá sa volá, keď sme pripravení pridať naše filmy na stránku. Jednoúčelové funkcie sú skvelé pre (opäť) organizáciu, zrozumiteľnosť a udržiavateľnosť.
- Riešenie udalostí. Pomocou delegovania udalostí už nemiešame túto „obchodnú logiku“ s logikou alebo šablónou zobrazenia. Nemusíme sa báť ani vykonania zdrojovej objednávky, pretože udalosti nakoniec pripájame k
document. Naša funkčnosť bude fungovať bez ohľadu na to, kedy a ako bude šablóna pripojená k stránke. - Šablóna. Úplne presunuté do používania knižníc určených špeciálne pre šablóny.
Nazval by som to výhrou. Tu sme skončili:
Prezrite si Pen BwbhI od Chrisa Coyiera (@chriscoyier) na stránkach CodePen