JavaRush /Курсы /Модуль 1: Web Core /Теги шаблонов

Теги шаблонов

Модуль 1: Web Core

6 уровень , 4 лекция

Открыта

5.1 Тег <template>

Тег <template> в HTML предоставляет разработчикам возможность определять фрагменты HTML-кода, которые не будут отображаться при загрузке страницы, но могут быть использованы позже через JavaScript. Это особенно полезно для динамического создания и вставки контента, таких как элементы списка, карточки продуктов и другие повторяющиеся структуры.

Элемент <template> используется для хранения HTML-кода, который не будет отображаться на странице сразу. Содержимое внутри <template> не рендерится браузером при загрузке страницы, но доступно через DOM (Document Object Model) и может быть клонировано и вставлено в документ с помощью JavaScript.

Синтаксис:

HTML

    
      <template>
        <!-- Содержимое шаблона -->
      </template>

Основные особенности тега <template>

Скрытие содержимого: содержимое тега <template> не отображается на странице при ее загрузке.
Использование JavaScript: содержимое тега <template> можно клонировать и вставлять в DOM через JavaScript.
Отложенная загрузка: позволяет загружать и отображать содержимое только по мере необходимости, что может улучшить производительность страницы.

Пример использования тега <template>

В этом примере при нажатии на кнопку "Add Item" создается новый элемент списка, который добавляется в список <ul>. Шаблон для нового элемента списка определяется внутри тега <template>.

HTML

    
      <button id="addButton">Add Item</button>
      <ul id="itemList"></ul>
      <template id="itemTemplate">
        <li class="item">This is a new item</li>
      </template>

JavaScript

    
// Получаем ссылки на элементы в DOM, которые будем использовать
const addButton = document.getElementById('addButton'); // Кнопка "Добавить"
const itemList = document.getElementById('itemList'); // Список, куда будем добавлять элементы
const itemTemplate = document.getElementById('itemTemplate'); // Шаблон элемента списка

// Добавляем обработчик события на кнопку "Добавить"
addButton.addEventListener('click', () => {
  // Клонируем содержимое шаблона элемента списка
  const newItem = itemTemplate.content.cloneNode(true); // true означает глубокое клонирование (включая все дочерние элементы)

  // Добавляем новый элемент в список
  itemList.appendChild(newItem); 
});

5.2 Пример: генерация карточек товара

С помощью <template> и JavaScript можно, например, генерировать список элементов — карточек товара.

Пример использования тега <template>:

HTML

    
      <h1>Список товаров</h1>
      <div id="productList"></div>
      <template id="productTemplate">
        <div class="item">
          <h2 class="title"></h2>
          <p class="description"></p>
          <span class="price"></span>
        </div>
      </template>

JavaScript

    
// Ожидаем полной загрузки DOM перед выполнением скрипта
document.addEventListener('DOMContentLoaded', () => {
  // Массив данных о продуктах
  const products = [
    { title: 'Товар 1', description: 'Описание товара 1', price: '100 долл.' },
    { title: 'Товар 2', description: 'Описание товара 2', price: '200 долл.' },
    { title: 'Товар 3', description: 'Описание товара 3', price: '300 долл.' },
  ];

  // Получаем ссылки на элементы в DOM
  const productList = document.getElementById('productList'); // Контейнер для списка продуктов
  const template = document.getElementById('productTemplate').content; // Шаблон элемента продукта

  // Перебираем массив продуктов и для каждого создаем элемент в списке
  products.forEach(product => {
    // Клонируем шаблон продукта
    const clone = document.importNode(template, true); // true - глубокое клонирование

    // Заполняем данные в клонированном шаблоне
    clone.querySelector('.title').textContent = product.title;
    clone.querySelector('.description').textContent = product.description;
    clone.querySelector('.price').textContent = product.price;

    // Добавляем заполненный шаблон в список продуктов
    productList.appendChild(clone);
  });
});

Объяснение

Тег <template>: содержит HTML-код, который не отображается на странице при загрузке.
Метод document.importNode(template, true): клонирует содержимое шаблона.
Методы querySelector и textContent: используются для изменения содержимого клонированного шаблона перед вставкой его в документ.

5.3 Преимущества тега <template>

Улучшение производительности

Использование шаблонов позволяет предварительно загружать HTML-код, который будет использоваться позже. Это может улучшить производительность страницы, так как содержимое шаблонов не рендерится и не влияет на начальную загрузку страницы.

Упрощение динамического контента

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

Удобство и читаемость

Шаблоны делают код более читаемым и структурированным, так как HTML-код для повторяющихся элементов можно хранить отдельно, а не вставлять его в JavaScript.

Пример с условным отображением контента:

HTML

    
      <h1>Результаты операции</h1>
      <div id="messageContainer"></div>

      <template id="messageTemplate">
        <div class="message">
          <p class="content"></p>
        </div>
      </template>

JavaScript

    
document.addEventListener('DOMContentLoaded', () => {
  // Получаем ссылки на элементы в DOM
  const messageContainer = document.getElementById('messageContainer'); // Контейнер для сообщений
  const template = document.getElementById('messageTemplate').content; // Шаблон сообщения

  // Функция для отображения сообщения
  function showMessage(type, text) {
    // Клонируем шаблон сообщения
    const clone = document.importNode(template, true); // true - глубокое клонирование

    // Получаем ссылку на элемент сообщения внутри клона
    const messageDiv = clone.querySelector('.message');

    // Добавляем класс, соответствующий типу сообщения (success или error)
    messageDiv.classList.add(type);

    // Устанавливаем текст сообщения
    messageDiv.querySelector('.content').textContent = text;

    // Добавляем сообщение в контейнер
    messageContainer.appendChild(clone);
  }

  // Вызываем функцию для отображения сообщений
  showMessage('success', 'Операция выполнена успешно!');
  showMessage('error', 'Произошла ошибка при выполнении операции.');
});

Объяснение:

Функция showMessage(): принимает тип сообщения (успех или ошибка) и текст сообщения, клонирует шаблон и добавляет его в контейнер сообщений.
Классы .success и .error: применяются к клонированному шаблону в зависимости от типа сообщения для стилизации.