# 22: Необходимостта от шаблони - CSS-трикове

Anonim

Шаблонирането е важна част от работата с JavaScript приложения. Доста често се случва, че данните са достъпни за вас, но не във формат, който е готов за показване на екрана. Това са често (но не винаги) данни във формат JSON. Това е чудесен формат за работа с JavaScript, но все пак трябва да го форматираме в нещо, което можем да използваме.

Например, ето някои измислени данни, които може да имаме под ръка:

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" ),… ) )

И в крайна сметка бихме искали да превърнем това в:



Ender's Game


Gavin Hood

Може би си мислите, че jQuery е страхотен в това. jQuery е пълен с DOM траверсинг / инструменти за манипулиране. Но няма много силен набор от инструменти за създаване на DOM, които бихте могли да кажете. Вярвам, че екипът на jQuery обмисля да добави шаблони в даден момент и дори се заигра с „официален“ плъгин, но не излетя.

В това видео ние просто не правим това, което днес традиционно се смята за шаблон. Просто направо създаваме нов с jQuery и използваме конкатенация на низове, за да изградим HTML-а, от който се нуждаем, и в крайна сметка да го инжектираме на страницата. В това няма нищо технически неправилно, но се опитвам да се прибера вкъщи как този подход може бързо да излезе извън контрол.

Само в малкото JS, което пишем в това видео, смесваме различни опасения / работни места:

  1. Получаване на данните. Тук просто го имаме под ръка, но вероятно това е малко по-сложно. Може би асинхронна заявка Ajax с обработка на грешки и кеширане и други подобни.
  2. Логика на дисплея. Решавайки какво трябва да покажем. Колко? Кои части? Въз основа на какво?
  3. Обработка на събития. Нашите новоинжектирани divs бяха добавили обработка на събития, докато ги създавахме, вместо да делегираме.
  4. Шаблониране. HTML, който създаваме, за да изпълним дизайна, да структурираме данните и да приспособим или нуждите.

Това е кодът за спагети, който завършихме:

Вижте писалката 31b07f30dce13b31904da36693b29b41 от Chris Coyier (@chriscoyier) на CodePen

Следващият блок от видеоклипове ще фокусира куп върху шаблонирането, защото това е изключително важно, но в крайна сметка ще разделим всички тези опасения и ще завършим с много по-организиран и поддържаем код.