A sablonozás fontos része a JavaScript alkalmazások használatának. Elég gyakori, hogy az adatok rendelkezésre állnak, de nem olyan formátumban, amely készen áll a képernyőn való megjelenítésre. Ez általában (de nem mindig) adat JSON formátumban. Ez egy nagyszerű formátum a JavaScript használatához, de mégis meg kell formáznunk valamire, amelyet használhatunk.
Például íme néhány kitalált adat, amely rendelkezésünkre áll:
var data = ( movies: ( ( movieTitle: "Ender's Game", movieDirector: "Gavin Hood", movieImage: "http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/movie-endersgame.jpg.webp" ),… ) )Végül pedig ezt szeretnénk csinálni:
Ender's Game
Gavin Hood
Azt gondolhatja, hogy a jQuery ebben fantasztikus. A jQuery tele van DOM bejárási / manipulációs eszközökkel. De nem rendelkezik túl robusztus DOM-létrehozó eszközökkel, amelyeket mondhatna. Úgy gondolom, hogy a jQuery csapata valamikor fontolgatta a sablonok hozzáadását, és még egy „hivatalos” pluginnal is játszott, de ez nem indult el.
Ebben a videóban csak azt nem tesszük meg, amit ma hagyományosan sablonnak gondolunk. Egyszerűen felépítünk egy újat a jQuery segítségével, és karaktersorozat-összefűzéssel készítjük el a szükséges HTML-t, és végül az oldalra fecskendezzük. Ebben nincs semmi technikailag helytelen, de megpróbálom hazavezetni, hogy ez a megközelítés hogyan kerülhet ki gyorsan a kezéből.
Csak egy kis JS-ben, amelyet ebben a videóban írunk, különféle aggályokat / munkákat keverünk össze:
- Az adatok megszerzése. Itt csak kéznél van, de valószínűleg ez egy kicsit összetettebb. Talán aszinkron Ajax kérés hibakezeléssel, gyorsítótárral és ilyesmivel.
- Logika megjelenítése. Annak eldöntése, hogy mit kell megmutatnunk. Mennyi? Melyik alkatrészeket? Mi alapján?
- Eseménykezelés. Az újonnan befecskendezett div-eket az eseménykezeléssel egészítettük ki, amikor létrehoztuk őket, ahelyett, hogy delegáltuk volna.
- Sablonozás. Az a HTML, amelyet a tervezés, az adatok strukturálása és az igények kielégítése érdekében hozunk létre.
Ez a spagetti-ish kód, amellyel elkészültünk:
Lásd a Pen 31b07f30dce13b31904da36693b29b41 című cikket, Chris Coyier (@chriscoyier) a CodePen-en
A videók következő blokkja a sablonokra összpontosít, mert ez nagyon fontos, de végül valamilyen módon szét fogjuk bontani ezeket az aggályokat, és sokkal szervezettebb és karbantarthatóbb kóddal állunk elő.