Супрепростые шаблоны на jQuery без дополнительных библиотек
2 ноября 2016
Шаблоны — это удобно. Особенно когда альтернатива — формировать HTML конкатенацией. Если в проекте есть jQuery, а отдельный шаблонизатор использовать не хочется, реализовать простые шаблоны очень просто.
Для начала задаём сам шаблон прямо в HTML страницы:
<script type="html/tpl" id="my-template"> <div class="item"> <h1>{title}</h1> <p class="description">{description}</p> </div> </script>
Далее реализовываем сам метод получения строки с заменёнными плейсхолдерами:
function renderTemplate(name, data) { var template = document.getElementById(name).innerHTML; for (var property in data) { if (data.hasOwnProperty(property)) { var search = new RegExp('{' + property + '}', 'g'); template = template.replace(search, data[property]); } } return template; }
Использовать можно так:
var html = renderTemplate('my-template', { title: "My cool thing", description: "It is really cool, isn't it?" });
Стоит отметить, что экранирование спецсимволов не делается, так что будьте осторожны.
Комментарии RSS по email OK
На самом деле, jquery здесь не нужен, ибо найти элемент по id и на обычно vanilla.js можно.
JiLiZART: выросло поколение, без фреймворков уже и элемент по id взять не могут.
Добрый день, уважаемый {userName}, как вы обратили внимание, на странице {pageTitle} нами был применен {secretWay} для шаблонов.
Дело в том, что {secretWay} бывает очень полезен в простых приложениях, и в то же время очень {simple}.
Спасибо за ваше обращение, {userName}, оно очень {importanceDegree} для нас.
Действительно :) Вот вариант без библиотек: rmcreative.ru/blog/post/supreprostye-shchablony-bez-dopolnitelnykh-bibliotek
Очень похоже на то, что опубликовал John Resig в 2008 — ejohn.org/blog/javascript-micro-templating/ :)
Но штука полезная, сам периодически пользуюсь
Есть очень и очень простые, до безобразия, шаблонизаторы, например, mustache.js (без ГМО). Рано или поздно эти пару строк перерастут в нечто большое, что уже давно реализовано и отлажено вдоль и поперек.
Василий, конечно. Задача этого поста больше показать, что шаблонизатор — это просто.