Zatím jsme odvedli docela dobrou práci, protože jsme se organizovali. Získání našeho kódu HTML v šabloně byl velkým krokem. Už takřka déle blátíme vody. Naše různé funkční části v JavaScriptu jsou rozděleny do diskrétních sekcí, což usnadňuje pochopení a údržbu. Vím, že pracujeme s docela malou ukázkou, ale doufám, že si dokážete představit, jak je aplikace komplikovanější a více řádků kódu, tato organizace je neuvěřitelně cenná.
JavaScript nemá žádný „názor“ na organizaci. To je pravděpodobně důvod, proč to někteří lidé milují a někteří se v tom cítí ztraceni. Jak se rozhodnete to uspořádat, je zcela na vás. To je také pravděpodobné, proč se někteří lidé opravdu upínají na rámce, které, ať už s názorem nebo ne, poskytují organizační strukturu. Například Backbone. Ale to je jiná série!
Pro naši ukázku se jednoduše uspořádáme kolem objektu, který jednoduše vytvoříme.
var Movies = ( )Každá věc, kterou zde děláme, souvisí se získáním některých filmů na stránce, takže to budeme obsahovat do jedné „věci“ zvané Filmy. Pamatujte, že děláme jen to, co nám dává organizační smysl. To má tu výhodu, že do „globálního rozsahu“ také vložíte pouze jednu proměnnou. Pokud bychom udělali vše v globálním rozsahu, byl by to nepořádek náhodných přepsání proměnných (a funkcí a všeho jiného) deklarovaných jinde.
Objekt jako takový vlastně nic „nedělá“. Budeme to muset „nastartovat“.
var Movies = ( init: function() ( ) ) Movies.init();Mít funkci s názvem init je trochu standard, který umožňuje komukoli, kdo čte tento kód, vědět, že kód uvnitř je to, co běží, když je tato skupina kódu spuštěna. To by mělo číst trochu jako obsah toho, co se stane s touto skupinou kódu. Poté provedeme další funkce (více vlastností objektu Movies), které dělají věci, které musíme dělat, v diskrétních blocích. Pamatujte, že můžeme nazývat věci, jak chceme, ať nám to dává smysl.
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();Docela jasné, hm? Můžete si všimnout, že appendMovesToPagenení povolán v init. To proto, že to nemůžeme zavolat, dokud nebudeme mít data k odeslání. Tato data pocházejí z volání Ajaxu, což znamená, že potřebujeme zpětné volání. Takže getDataten nakonec zavoláte.
Všechno ostatní, co se zde vyplní, jsou jen přesunutí bitů kódu, které jsme již napsali na správné místo.
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.
Pojďme se podívat na čtyři obavy, které jsme nastínili dříve, a uvidíme, co jsme s nimi udělali.
- Získávání dat. Přesunuli jsme JSON do souboru, do kterého jsme mohli zasáhnout
$.getJSON, protože je pravděpodobné, že to budeme muset udělat ve skutečné situaci. Kromě toho, že to procvičujeme, nám to umožní psát kolem toho testy. - Zobrazit logiku. Nyní máme velmi specifickou funkci appendMoviesToPage, která se volá, když jsme připraveni připojit naše filmy na stránku. Jednoúčelové funkce jsou skvělé pro (opět) organizaci, srozumitelnost a udržovatelnost.
- Zpracování událostí. Pomocí delegování událostí již nemícháme tuto „obchodní logiku“ s logikou nebo šablonou zobrazení. Nemusíme si dělat starosti ani s prováděním zdrojové objednávky, protože události nakonec připojujeme k
document. Naše funkce bude fungovat bez ohledu na to, kdy a jak je šablona připojena ke stránce. - Šablona. Úplně přesunuto k použití knihoven určených speciálně pro šablonování.
Říkal bych tomu vítězství. Zde jsme skončili:
Podívejte se na Pen BwbhI od Chris Coyier (@chriscoyier) na CodePen