Шаблонування - важлива частина роботи з програмами 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, який ми створюємо для проектування, структурування даних, а також для задоволення чи потреб.
Це код спагетті, який ми закінчили:
Дивіться Ручку 31b07f30dce13b31904da36693b29b41 Кріса Койєра (@chriscoyier) на CodePen
Наступний блок відео збирається зосередити купу на шаблонах, тому що це надзвичайно важливо, але в кінцевому підсумку ми начебто розіб'ємо всі ці проблеми і закінчимо набагато більш організованим та ремонтопридатним кодом.