Eddig nagyon jó munkát végeztünk a szervezéssel kapcsolatban. A HTML-fájlunk sablonokba bontása nagy lépés volt. Úgyszólván tovább sárosítjuk a vizeket. A funkcionálisan a JavaScript különböző bitjeit diszkrét részekre bontjuk, ami megkönnyíti a dolgok megértését és fenntartását. Tudom, hogy egy elég kicsi bemutatóval dolgoztunk, de remélem, el tudjátok képzelni, hogy egy alkalmazás bonyolultabbá és több kódsorral bővülve rendkívül értékes.
A JavaScriptnek nincs semmilyen „véleménye”, mint a szervezetről. Valószínűleg ezért szeretik egyesek, mások pedig elveszettnek érzik magukat. Teljesen rajtad múlik, hogy hogyan szervezed. Valószínűleg ez az oka annak, hogy egyesek valóban olyan keretekhez ragadnak, amelyek véleményezetten vagy sem, de szervezeti felépítést biztosítanak. Például a Gerinc. De ez egy másik sorozat!
A bemutatónkhoz egyszerűen egy objektum köré szervezkedünk, amelyet egyszerűen létrehozunk.
var Movies = ( )Minden dolog, amit itt csinálunk, kapcsolatban áll azzal, hogy filmeket jelenítünk meg az oldalon, így azokat egy „Filmek” nevű dologban fogjuk tartalmazni. Ne feledje, hogy csak azt tesszük, amire értelme van szervezeti szempontból. Ennek az az előnye, hogy csak egy változót helyezünk a „globális hatókörbe” is. Ha mindent globális szinten tennénk, akkor véletlenül felülbíráló változók (és függvények és bármi más) deklarált rendetlensége lenne másutt.
Egy ilyen tárgy valójában nem „csinál” semmit. Meg kell „rúgni”.
var Movies = ( init: function() ( ) ) Movies.init();Az init nevű függvény kissé standard, amely lehetővé teszi, hogy bárki, aki ezt a kódot olvassa, tudja, hogy az ott található kód akkor fut, amikor a kódcsoport végrehajtásra kerül. Ennek kicsit úgy kell olvasnia, mint egy tartalomjegyzék, mi történik ezzel a kódcsoporttal. Ezután más funkciókat (a Filmek objektum további tulajdonságait) készítünk, amelyek diszkrét darabokban hajtják végre a szükséges dolgokat. Ne feledje, hogy bármit hívhatunk, amit csak akarunk, bármi értelme is van nekünk.
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();Nagyon világos, igaz? Lehet, hogy észre appendMovesToPagenem hívják a init. Ez azért van, mert addig nem hívhatjuk ezt, amíg nincs adatunk a küldéshez. Ezek az adatok egy Ajax hívásból származnak, vagyis visszahívásra van szükségünk. Így getDatavégül felhívja ezt.
Minden más, ami itt kitöltődik, csak mozgó kódbitek, amelyeket már a megfelelő helyre írtunk.
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();
És kész.
Vizsgáljuk meg a korábban vázolt négy problémát, és nézzük meg, mit tettünk ezekkel kapcsolatban.
- Az adatok megszerzése. Áthelyeztük a JSON-t egy fájlba, amellyel el tudtunk ütni
$.getJSON, mivel valószínűleg valós helyzetben kell ezt tennünk. Ezen kívül a gyakorlaton kívül ez lehetővé teszi számunkra, hogy teszteket írjunk köré. - Logika megjelenítése. Most van egy nagyon specifikus függvényünk, az appendMoviesToPage, amelyet akkor hívunk meg, amikor készen állunk a filmjeinket az oldalra fűzni. Az egycélú funkciók kiválóan alkalmasak (ismét) szervezésre, érthetőségre és fenntarthatóságra.
- Eseménykezelés. Az események delegálásával már nem keverjük ezt az „üzleti logikát” a megjelenítési logikával vagy a sablonnal. Nem is kell aggódnunk a forrásmegbízás végrehajtása miatt, mert az eseményeket végül a
document. Funkcióink működni fognak, függetlenül attól, hogy a sablon mikor / hogyan kerül az oldalhoz. - Sablonozás. Teljesen átköltöztem a kifejezetten sablonokhoz szánt könyvtárak használatába.
Hívnám ezt a győzelmet. Itt hova kerültünk:
Lásd Chris Coyier (@chriscoyier) Pen BwbhI című cikkét a CodePen-en