Šablona je důležitou součástí práce s aplikacemi JavaScriptu. Je docela běžné, že máte k dispozici data, ale ne ve formátu, který je připraven k zobrazení na obrazovce. To jsou běžně (ale ne vždy) data ve formátu JSON. To je skvělý formát pro práci s JavaScriptem, ale stále ho musíme naformátovat na něco, co můžeme použít.
Zde jsou například některá fiktivní data, která můžeme mít po ruce:
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 nakonec bychom z toho chtěli udělat:
Ender's Game
Gavin Hood
Možná si myslíte, že jQuery je v tom úžasný. jQuery je plný nástrojů pro procházení / manipulaci DOM. Ale nemá moc robustní sadu nástrojů pro vytváření DOM, které byste mohli říct. Věřím, že tým jQuery v určitém okamžiku uvažoval o přidání šablonování, a dokonce si pohrával s „oficiálním“ pluginem, ale nevypadl.
V tomto videu prostě neděláme to, co je dnes tradičně považováno za šablonování. Právě jsme vytvořili nový s jQuery a pomocí zřetězení řetězců vytvořili potřebný HTML a nakonec ho vložili na stránku. Na tom není nic technicky nesprávného, ale snažím se jet domů, jak se tento přístup může rychle vymknout z rukou.
V malém množství JS, které píšeme v tomto videu, mícháme různé záležitosti / pracovní místa:
- Získávání dat. Právě to tu máme po ruce, ale pravděpodobně je to trochu složitější. Možná asynchronní požadavek Ajax s zpracováním chyb a ukládáním do mezipaměti a podobně.
- Zobrazit logiku. Rozhodování, co musíme ukázat. Kolik? Které části? Na základě čeho?
- Zpracování událostí. Naše nově vložené divy měly přidávání zpracování událostí, jak jsme je vytvářeli, namísto delegování.
- Šablona. HTML, které vytváříme, abychom dosáhli designu, strukturovali data a vyhověli potřebám.
Toto je špagetový kód, který jsme dokončili:
Podívejte se na pero 31b07f30dce13b31904da36693b29b41 od Chris Coyier (@chriscoyier) na CodePen
Další blok videí se zaměří na šablonování, protože je to velmi důležité, ale nakonec všechny tyto obavy trochu rozbijeme a skončíme s mnohem organizovanějším a udržovatelnějším kódem.