Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

JavaScript HTML: Препроцессор Pug

Pug позволяет использовать JavaScript для придания логики шаблону. В курсе по SASS мы рассматривали множество вариантов создания дополнительной логики: переменные, функции, циклы, условные конструкции. JavaScript внутри Pug позволяет делать всё то же самое, но немного с другим синтаксисом и особенностями. Это очень важная часть работы с шаблонизатором, которая позволяет раскрыть его на все сто процентов.

Если вы совсем не знакомы с тем, как работает и выглядит JavaScript, то можете пройти вводный курс Введение в программирование. В нём вы узнаете об основных конструкциях языка.

Весь JavaScript код внутри препроцессора можно разделить на три основные группы:

  1. Буферизованный код
  2. Неэкранированный буферизованный код
  3. Небуферизованный код

За этими страшными словами стоят простые концепции. Разберём каждую из них в отдельности.

Небуферизованный код

Отличительная особенность небуферизованного кода — отсутствие вывода в конечном HTML. Любой код, который написан в таком стиле не добавит в итоговый код ни единой строчки кода — он нужен для создания дополнительной логики внутри препроцессора. Это могут быть переменные, массивы, циклы и так далее. Для создания небуферизованного кода используется символ - после которого добавляется JavaScript код.

Создадим переменную с текстом и добавим её в параграф:

- const title = "Программы обучения на Хекслете"; // JavaScript код

.container
  .row
    .col-12
      h1 #{title}
<div class="container">
  <div class="row">
    <div class="col-12">
      <h1>Программы обучения на Хекслете</h1>
    </div>
  </div>
</div>

Интерполяция переменных и выражений

Для вывода значения переменной в прошлом примере использовалась конструкция h1 #{title}. Это важная часть синтаксиса Pug. Конструкция #{} выводит содержимое переменной или значение выражения в виде строки.

- const one = 1;
- const two = 2;
- const action = "plus";

.calculation
  | #{one} #{action} #{two} = #{one + two}
<div class="calculation">1 plus 2 = 3</div>

Особенность интерполяции — экранирование HTML-тегов. Вместо них используются специальные символы-мнемоники. Это сделано в целях безопасности — при выводе тегов «как есть» высока вероятность подстановки нежелательных тегов.

- const html = "<p>Текст параграфа</p>";

.result
  | #{html}
<div class="result">
  &lt;p&gt;Текст параграфа&lt;/p&gt;
</div>

Pug предоставляет возможность изменить это поведение и выводить неэкранированные символы. Для этого используется конструкция !{}, но будьте аккуратны — использование такого кода является потенциальной проблемой, особенно при получении данных от пользователя.

- const html = "<p>Текст параграфа</p>";

.result
  | !{html}
<div class="result">
  <p>Текст параграфа</p>
</div>

Буферизованный код

Если небуферизованный код не взаимодействует напрямую с вёрсткой, то задача буферизованного кода — обработать JavaScript и подставить результат в вёрстку. Не бойтесь — на практике понять разницу намного проще. Буферизованный код начинается с символа =.

.plus
  p= 2 + 2
<div class="plus">
  <p>4</p>
</div>

Как и в случае с интерполяцией, Pug экранирует весь HTML при использовании буферизованного вывода для обеспечения безопасности.

.buffer
  p= "<span>Hello</span>, Hexlet"
<div class="buffer">
  <p>&lt;span&gt;Hello&lt;/span&gt;, Hexlet</p>
</div>

Для отмены такого эффекта используется неэкранированный буферизованный код. Как и в случае с интерполяцией, для этого достаточно подставить символ !. Хоть это действие и возможно, но не лишним будет ещё раз напомнить: использование неэкранированного вывода является плохой практикой, так как создаёт потенциальные проблемы с безопасностью.

.buffer
  p!= "<span>Hello</span>, Hexlet"
<div class="buffer">
  <p><span>Hello</span>, Hexlet</p>
</div>

На первый взгляд нет существенной разницы между буферизованным и небуферизованным кодом. С одной стороны да, и тот и другой способ позволяют добавить JavaScript логику в существующий код, но можно определить ключевое отличие — буферизованный код должен вначале получить результат, а только потом он будет выведен. Небуферизованный код может быть исполнен в любое удобное время или не быть исполнен вовсе.

  • Небуферизованный код удобно использовать при создании функций, массивов, объектов.
  • Буферизованный код чаще всего используется при создании однострочных функций или строк, которые состоят только из JavaScript кода

Дополнительное задание

Используя знания из курса Введение в программирование создайте переменную со счётчиком и, с помощью цикла, увеличивайте его на два. Результаты запишите в виде списка. Количество итераций выберите самостоятельно. Определите, где будет буферизованный и небуферизованный код.

Примерный результат:

<ul>
  <li>1</li>
  <li>3</li>
  <li>5</li>
  <li>7</li>
  <li>9</li>
</ul>

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнения
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Изображение Тото

Задавайте вопросы, если хотите обсудить теорию или упражнения. Команда поддержки Хекслета и опытные участники сообщества помогут найти ответы и решить задачу