Использование 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><script>alert("Небезопасно!")</script></h1>
Тщательное обращение с пользовательскими данными защитит ваши шаблоны от потенциальных угроз.
Полезные материалы
- Underscore.js — официальная документация по шаблонам Underscore.js.
- Учебник от DigitalOcean — подробное руководство по шаблонизации Underscore.js.
- Использование Underscore.js для рендеринга HTML-фрагментов — советы по оптимизации шаблонов для удобной производительности и обслуживания.
- GitHub – jashkenas/underscore — присоединяйтесь к сообществу, следите за обновлениями и обсуждениями проекта Underscore.js.
- JSFiddle — пример использования шаблона Underscore.js — практикуйте на интерактивных платформах для уверенного освоения Underscore.js.