10 Модуль - Библиотеки. Шаблонизация. JSON. WebStorage -- 02 Шаблонизация

Question 1

Шаблонизация (templating) —

Answer 1

генерации HTML по шаблону.

Question 2

Использование шаблонизации требует нескольких простых шагов:

Answer 2

• • Наличие данных которыми будет наполнятся элемент интерфейса
• • Шаблон по которому будет составлена разметка элемента
• • Библиотека которая предоставляет средства шаблонизации

Question 3

Шаблон — это

Answer 3

строка в специальном формате, которая путём подстановки значений превращается в HTML.

Question 4

Внешние шаблоны имеют много преимуществ, главным образом в том, что

Answer 4

шаблоны никогда не будут загружаться клиенту, если они не нужны на странице.

Question 5

Методы хранения Шаблону ему не место в файле скриптов. Один из способов — записать его это в

Answer 5

в HTML-файле, в тег template.

Question 6

Подключение библиотеки в проект происходит очень просто. Есть несколько вариантов.

Answer 6

• • Скачать файл библиотеки и подключить его в index.html
• • Использовать CDN-сервис для получения ссыки на файл библиотеки
• • Если используется инструмент вроде Webpack, можно ставить библиотеку как npm-пакет

Question 7

У нас уже есть библиотека и шаблон из которого мы изъяли текстовый контент. Для работы с шаблоном в библиотеке Handlebars есть функция

Answer 7

compile. Эта функция запускает компиляцию шаблона source и возвращает результат в виде функции, которую далее можно запустить с данными и получить строку-результат.
Handlebars.compile(source)

Question 8

Вызов Handlebars.compile(source) разбивает

Answer 8

HTML-строку по разделителям и, при помощи new Function создаёт на её основе функцию.

Question 9

Теперь используя функцию-шаблон template можем

Answer 9

Следующим шагом будет вызвать функцию-шаблон и передать ей menuData как аргумент. В результате получим строку с подставлеными значениями, поместим ее в тег и браузер, распарсив ее, создаст HTML-разметку.

Question 10

Шаблоны и Webpack:

Чтобы настроить Webpack на работу с библиотекой Handlebars нужно:

Answer 10

-- Добавляем библиотеку:
npm install handlebars
-- Добавляем загрузчик handlebars-loader.
npm install --save-dev handlebars-loader
-- Обновляем конфигурацию Webpack, добавляя настройки загрузчика.
{
  ...
  module: {
    rules: [
      ...
      { test: /\.hbs$/, exclude: /node_modules/, use: "handlebars-loader" }
    ]
  }
}

Question 11

Шаблоны и Webpack:

В папке src создаем папку templates, в которой добавляем файлы шаблонов с расширением

Answer 11

.hbs. Для нашего меню это будет menu.hbs. Помещаем разметку шаблона в файл, без тега tempalte.

Question 12

Шаблоны и Webpack:

Там где хотим использовать шаблон,

Answer 12

импортируем файл с шаблоном. Особенность в том, что при импорте, handlebars-loader обработает файл шаблона и в menuTemplate уже будет лежать скомпилированная функция-шаблон готовая к использованию.
import menuTemplate from ‘/path/to/templates/menu.hbs’;

const menuData = {
title: ‘Eat it createElement, templates rule!’,
items: [‘Handlebars’, ‘LoDash’, ‘Pug’, ‘EJS’, ‘lit-html’],
};

const markup = menuTempalte(menuData); // html разметка с подставленным значениями