Использование underscore.js как шаблонизатора: гайд для новичков

Быстрый ответ

Библиотека underscore.js предоставляет эффективный способ создания надежных HTML-структур с использованием функции _.template. Ваши шаблоны могут содержать плейсхолдеры для данных, которые впоследствии заполняются соответствующими значениями. Это позволяет создавать шаблоны и формировать HTML следующим образом:

// Почему использовать PHP или JSP, если есть JavaScript?
var compiledTemplate = _.template('<h1><%= title %></h1><p><%= content %></p>');
var htmlOutput = compiledTemplate({ title: 'Привет, Underscore!', content: 'Элегантность шаблонов — это красиво.' });
// Результат: <h1>Привет, Underscore!</h1><p>Элегантность шаблонов — это красиво.</p>

Для вставки данных используйте <%= %>, для экранирования HTML — <%- %>, а для выполнения JavaScript внутри шаблона подходят теги <% %>.

Внедрение в HTML

Для сохранения порядка в мире шаблонизации underscore.js теги <script> оказываются очень полезными. Ваши шаблоны можно размещать внутри тегов <script>, присвоив им тип "text/template":

<script type="text/template" id="myTemplate">
  <h2><%= heading %></h2>
  <p><%= content %></p>
</script>

Позже эти шаблоны можно извлекать с использованием jQuery-метода .html() или DOM-методов, а затем обрабатывать методом _.template для выполнения кода.

Кастомизация под свои нужды

Underscore.js можно легко адаптировать под свои потребности. Если вас не устраивает стандартный выбор разделителей, вы можете изменить их с помощью _.templateSettings:

_.templateSettings.interpolate = /\{\{(.+?)\}\}/g;
var compiled = _.template('<div>{{ title }}</div>');

Теперь в шаблонах можно использовать {{ title }} вместо <%= title %>.

Предкомпиляция для улучшения производительности

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

var precompiledTemplate = _.template($('#myTemplate').html());

$('#container').html(precompiledTemplate({ heading: 'Производительность важна', content: 'Скомпилировано заранее для скорости.' }));

Это позволяет браузеру продолжать работу без необходимости многократной компиляции шаблона.

Профессиональный подход

Расширьте свои возможности в шаблонизации underscore, используя регулярные выражения для управления поведением шаблонов, а также настройки evaluate, interpolate и escape. Это поможет создавать сложные шаблоны замены и персонализировать их работу.

Для упрощения кода используйте синтаксис вроде Mustache, а параметр переменной шаблона позволит вам напрямую обращаться к данным. Это становится особенно важно при работе с большими наборами данных или сложными JSON-структурами.

Изучите другие возможности

Мир разработки бурлит возможностями. Отправьтесь на поиски других шаблонизаторов, таких как Mustache.js или Handlebars.js. Изучите их уникальные особенности и возможности, чтобы лучше понять, что каждый из них может предложить.

Исследуйте альтернативы

Хотите пробовать что-то необычное? Ознакомьтесь с laconic.js — инновационным подходом к созданию DOM, который позволяет описывать HTML-структуры простым, лаконичным и выразительным способом.

Визуализация

Работа с шаблонами underscore.js напоминает готовку "гурманского бутерброда" 🥪:

Рецепт: 🍞 %{ингредиент} 🍞

Добавьте {ингредиент} — вашу любимую начинку:

_.template("🍞 <%= ingredient %> 🍞")({ingredient: '🍗🥒🍅🧀'});

И вуаля – ваш собственный бутерброд готов:

Результат: 🍞 🍗🥒🍅🧀 🍞

Underscore.js позволяет с легкостью вставлять и экранировать содержимое, создавая ровно тот результат, который вам нужен.

Безопасность – превыше всего

Всегда используйте <%- %> для экранирования пользовательских данных перед их вставкой в документ, чтобы защититься от XSS-атак:

var templateString = '<h1><%- title %></h1>';
_.template(templateString)({ title: '<script>alert("Небезопасно!")</script>' });
// Результат: <h1>&lt;script&gt;alert("Небезопасно!")&lt;/script&gt;</h1>

Тщательное обращение с пользовательскими данными защитит ваши шаблоны от потенциальных угроз.

Полезные материалы

1. Underscore.js — официальная документация по шаблонам Underscore.js.
2. Учебник от DigitalOcean — подробное руководство по шаблонизации Underscore.js.
3. Использование Underscore.js для рендеринга HTML-фрагментов — советы по оптимизации шаблонов для удобной производительности и обслуживания.
4. GitHub – jashkenas/underscore — присоединяйтесь к сообществу, следите за обновлениями и обсуждениями проекта Underscore.js.
5. JSFiddle — пример использования шаблона Underscore.js — практикуйте на интерактивных платформах для уверенного освоения Underscore.js.