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>

---

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

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

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Вебинар «Как самостоятельно учиться»