Šablóna je dôležitou súčasťou práce s aplikáciami JavaScriptu. Je celkom bežné, že údaje máte k dispozícii, ale nie vo formáte, ktorý je pripravený na zobrazenie na obrazovke. To sú bežne (ale nie vždy) údaje vo formáte JSON. Je to vynikajúci formát pre prácu s jazykom JavaScript, ale stále ho musíme naformátovať do podoby, ktorú môžeme použiť.
Tu je napríklad niekoľko fiktívnych údajov, ktoré by sme mohli mať po ruke:
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" ),… ) )A nakoniec by sme z toho chceli urobiť:
Ender's Game
Gavin Hood
Možno si myslíte, že jQuery je v tom úžasný. jQuery je plný nástrojov na prechádzanie / manipuláciu s DOM. Ale nemá veľmi robustnú sadu nástrojov na vytváranie DOM, čo by ste povedali. Verím, že tím jQuery v určitom okamihu uvažoval o pridaní šablónovania, ba dokonca sa pohrával s „oficiálnym“ doplnkom, ktorý sa však nerozbehol.
V tomto videu jednoducho nerobíme to, čo sa dnes tradične považuje za šablónu. Jednoducho sme postavili nový pomocou jQuery a pomocou reťazenia reťazcov vytvorili potrebné HTML a nakoniec ho vložili na stránku. Nie je na tom nič technicky nesprávne, ale snažím sa jazdiť domov, ako sa tento prístup môže rýchlo vymknúť spod kontroly.
Len v troche JS, ktorú píšeme v tomto videu, miešame rôzne starosti / úlohy:
- Získavanie údajov. Len to tu máme po ruke, ale pravdepodobne je to o niečo zložitejšie. Možno asynchrónna požiadavka Ajaxu so spracovaním chýb a ukladaním do pamäti a podobne.
- Zobraziť logiku. Rozhodujeme sa, čo musíme ukázať. Koľko? Ktoré časti? Na základe čoho?
- Riešenie udalostí. Naše novo vložené divy mali namiesto vytvárania delegácií pridané spracovanie udalostí, keď sme ich vytvorili.
- Šablóna. HTML, ktoré tvoríme, aby sme dosiahli dizajn, štruktúru dát a vyhoveli potrebám.
Toto je špagetový kód, ktorý sme dokončili:
Pozrite si pero 31b07f30dce13b31904da36693b29b41 od Chrisa Coyiera (@chriscoyier) na stránkach CodePen
Ďalší blok videí sa zameria na veľa šablón, pretože je to veľmi dôležité, ale nakoniec všetky tieto obavy rozdelíme a skončíme s oveľa organizovanejším a udržiavateľnejším kódom.