Создание шаблонов - важная часть работы с приложениями 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, который мы пишем в этом видео, мы смешиваем множество задач / задач:
- Получение данных. Просто он у нас здесь под рукой, но, вероятно, это немного сложнее. Возможно, асинхронный запрос Ajax с обработкой ошибок и кешированием и тому подобное.
- Логика отображения. Решаем, что нам нужно показать. Как много? Какие части? На чем основано?
- Обработка событий. В наши недавно введенные divы добавлялась обработка событий по мере их создания, а не делегирование.
- Создание шаблонов. HTML-код, который мы создаем для выполнения дизайна, структурирования данных и приспособления или потребностей.
Это спагетти-код, которым мы закончили:
См. Pen 31b07f30dce13b31904da36693b29b41 Криса Койера (@chriscoyier) на CodePen
В следующем блоке видео мы сосредоточим внимание на шаблонах, потому что это очень важно, но в конечном итоге мы разберем все эти проблемы и в итоге получим гораздо более организованный и поддерживаемый код.