Tworzenie szablonów jest ważną częścią pracy z aplikacjami JavaScript. Dość często zdarza się, że dane są dostępne, ale nie w formacie gotowym do wyświetlenia na ekranie. Są to powszechnie (ale nie zawsze) dane w formacie JSON. To świetny format do pracy w JavaScript, ale nadal musimy sformatować go w coś, czego będziemy mogli użyć.
Na przykład, oto kilka fikcyjnych danych, które możemy mieć pod ręką:
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" ),… ) )Ostatecznie chcielibyśmy przekształcić to w:
Ender's Game
Gavin Hood
Możesz pomyśleć, że jQuery jest w tym niesamowity. jQuery jest pełen narzędzi do przechodzenia / manipulacji DOM. Ale można powiedzieć, że nie ma bardzo solidnego zestawu narzędzi do tworzenia DOM. Wydaje mi się, że zespół jQuery rozważał w pewnym momencie dodanie szablonów, a nawet bawił się „oficjalną” wtyczką, ale to się nie udało.
W tym filmie po prostu nie robimy tego, co dziś tradycyjnie uważa się za szablon. Po prostu budujemy nowy za pomocą jQuery i używamy konkatenacji ciągów do zbudowania potrzebnego kodu HTML i ostatecznie wstawiamy go na stronę. Nie ma w tym nic niepoprawnego technicznie, ale próbuję pojechać do domu, jak to podejście może szybko wymknąć się spod kontroli.
W małym fragmencie JS, który piszemy w tym filmie, mieszamy różne problemy / zadania:
- Pobieranie danych. Mamy go tutaj tylko pod ręką, ale prawdopodobnie jest to nieco bardziej złożone. Być może żądanie asynchroniczne Ajax z obsługą błędów i buforowaniem i tym podobne.
- Logika wyświetlania. Decydowanie, co musimy pokazać. Ile? Które części? Bazując na czym?
- Obsługa zdarzeń. Nasze nowo wprowadzone elementy div miały obsługę zdarzeń podczas ich tworzenia, zamiast delegowania.
- Szablony. HTML, który tworzymy, aby ukończyć projekt, ustrukturyzować dane i dostosować lub zaspokoić potrzeby.
Oto kod spaghetti z którym skończyliśmy:
Zobacz Pen 31b07f30dce13b31904da36693b29b41 autorstwa Chrisa Coyiera (@chriscoyier) na CodePen
Następny blok filmów skupi się na tworzeniu szablonów, ponieważ jest to bardzo ważne, ale ostatecznie będziemy w pewnym sensie rozbijać wszystkie te obawy i kończyć na znacznie lepiej zorganizowanym i łatwiejszym w utrzymaniu kodzie.