Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

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

4 <ol><li>Буферизованный код</li>

5 <li>Неэкранированный буферизованный код</li>

6 <li>Небуферизованный код</li>

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

8 <h2>Небуферизованный код</h2>

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

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

11 <h3>Интерполяция переменных и выражений</h3>

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

13 <p>Особенность интерполяции - экранирование HTML-тегов. Вместо них используются специальные символы-мнемоники. Это сделано в целях безопасности - при выводе тегов "как есть" высока вероятность подстановки нежелательных тегов.</p>

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

15 <h2>Буферизованный код</h2>

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

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

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

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

20 <ul><li>Небуферизованный код удобно использовать при создании функций, массивов, объектов.</li>

21 <li>Буферизованный код чаще всего используется при создании однострочных функций или строк, которые состоят только из JavaScript кода</li>

22 </ul><h2>Дополнительное задание</h2>

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

24 <p>Примерный результат:</p>