Javascript, jComponent 03 декабря 2019 2 мин. 3061
Сейчас хочу Вам рассказать про шаблонизатор Tangular
, который на мой взгляд является хорошей альтернативой таким популярным шаблонизаторам, как Handlebars или Mustache.
Tangular
я в основном использую на стороне клиента в браузере, но его можно использовать и на сервере.
Шаблонизация это привычное явление, если говорить о серверной части web-приложения. Шаблоны, рендерятся на сервере, преобразуются в html, которой отдаётся клиенту. В таком подходе есть свои недостатки. Во-первых, при использовании серверной шаблонизации, на обработку шаблонов тратятся ресурсы сервера, во-вторых, сгенерированный html будет весить больше чем чистые данные, не содержащие информации о том, как их визуализировать, в-третьих при таком подходе не учитывается, что в качестве клиента может выступать не только браузер, а скажем, мобильное приложение. Поэтому в последнее время при разработке Web приложений данные отдаются на клиент в сыром виде, а рендеринг осуществляется в браузере.
Данный шаблонизатор также идёт вместе с библиотекой jComponent
, поэтому я его использую при создании компонент.
Tangular
очень компактный, размер всего ~2Kb, но при этом всё, что нужно шаблонизатору в нем есть, а если чего то не будет хватать, можно дописать самому используя механизм хелперов.
Tangular
поддерживает следующие функции:
Чтобы начать использовать Tangular
в своём проекте:
Если Вы собираетесь использовать библиотеку jComponent
, то шаблонизатор уже включен в эту библиотеку, подробнее об этом можно прочитать в теме jComponent - #Часть 1, Подключение, DataBinding.
Также можно скачать исходники с GitHub, затем подключить файл Tangular.min.js
с использованием статических путей, вставьте на странице тег <script src="js/Tangular.min.js">
Что бы использовать в проекте Node.js, необходимо установить из npm:
$ npm install tangular
Tangular
принимает на вход любую строку, состоящую из HTML-тегов и специальных выражений и компилирует их в функцию JavaScript. Эта функция в свою очередь принимает один параметр — объект данных и возвращает строку HTML, где определенные свойства объекта с данными уже вставлены в нужные места шаблона.
Tangular
не позволяет добавлять логику и произвольный JavaScript в шаблоны (кроме циклов и условных выражений, о которых мы поговорим чуть ниже), тем самым он как бы «заставляет» разработчика содержать логику отдельно от разметки.
Есть несколько способов определения шаблонов. Сейчас расмотрим каждый из способов.
//Шаблон определен в строке
//принимает шаблон и возвращает новую функцию
var template = Tangular.compile('Title: {{ title }}, Author: {{ author }}.');
console.log(template({ title: 'The Three Musketeers', author: 'Alexandre Dumas' }));
// Output: 'Title: The Three Musketeers, Author: Alexandre Dumas.'.
<!--Шаблон определен внутри тега script-->
<script type="text/html" id="book">
Title: {{ title }}, Author: {{ author }}.
</script>
<script>
//получаем шаблон
var templateScript = $('#book').html();
//принимает шаблон и возвращает новую функцию
var template = Tangular.compile(templateScript);
console.log(template({ title: 'The Three Musketeers', author: 'Alexandre Dumas' }));
//Output: 'Title: The Three Musketeers, Author: Alexandre Dumas.'.
</script>
Tangular
шаблонизатор заключен в переменную Ta
или, Tangular
определенную в window
области.
Tangular.compile(template)
- метод компилирует шаблон String
в Function
.
Tangular.compile(template);
// template {String}
// returns {Function(model, repository}
Tangular.render(template, model, [repository]);
- метод компилирует и отображает шаблон String
в String
. Этот метод медленнее, чем Tangular.compile()
потому, что каждый раз при вызове шаблон заново компилируется.
Tangular.render(template, model, [repository]);
// template {String}
// model {Object}
// repository {Object} optional
// returns {String}
Tangular.register();
- метод регистрирует новый хелпер.
Tangular.register(name, callback);
// name {String}
// callback {Function(value, arg1, argN)}
// returns {Tangular}
{{ else if ... }}
{{ if age > 30 }}
Is too old.
{{ else }}
is too young.
{{ fi }}
$index
текущий индекс в массиве{{ foreach m in items }}
<div>{{ m.name }}</div>
<div>Current index: {{ $index }}</div>
{{ end }}
Хелперы - это предварительно определенная функция, результат которой будет вставлен в шаблон. Есть встроенные и пользовательские, то есть те, которые были созданы Вами.
{{ beers | pluralize('# zero', '# one', '# few', '# more') }}
<!-- Supports environments (Array or String values separated by "," comma) -->
{{ beers | pluralize('[beers]') }}
<div>{{ datecreated | format('dd.MM.yyyy') }}</div>
<!-- The format below is inherited from "DEF.dateformat" -->
<div>{{ datecreated | format }}</div>
<div>{{ price | format(2) }}</div>
<div>{{ price | currency('eur') }}</div>
<div>{{ price | currency('usd') }}</div>
<!-- The currency below is inherited from "DEF.currency" -->
<div>{{ price | currency }}</div>
Если значение равно null
или undefined
, то выводится значение по умолчанию. Значение по умолчанию ---
, может быть изменено на собственное значение.
<div>{{ name | def }}</div>
<!-- OR -->
<div>{{ name | def('...') }}</div>
Прежде чем использовать хелпер в шаблоне, его необходимо зарегистрировать с помощью функции Tangular.register()
. Первый параметр этой функции — название хелпера, а второй — функция c произвольным количеством параметров.
Tangular.register('lowercase', function(value) {
return (value || '').toString().toLowerCase();
});
Tangular.register('reverse', function(value) {
var arr = (value || '').toString().split('');
arr.reverse();
return arr.join('');
});
Tangular.register('add', function(value) {
return (value || '').toString() + plus;
});
Использование:
<div>{{ name | reverse }}</div>
<div>{{ name | reverse | uppercase }}</div>
<div>{{ name | reverse | uppercase | add(' - Tangular is the best') }}</div>
Tangular
экранирует любые HTML-строки, переданные в шаблон. Чтобы вывести исходный HTML, необходимо использовать параметр |raw
.
var model = { name: '<h1>Заголовок</h1>' };
//экранирование
<div>{{ name }}</div>
//выведет как есть
<div>{{ name | raw }}</div>
var template = Tangular.compile('<div class="tag">{{}}</div>');
console.log(template('Node.js'));
// Output: <div class="tag">Node.js</div>
Я написал, несколько примеров и попытался в них показать все возможности шаблонизатора, всё, что Вам может понадобиться при создании Ваших проектов.
See the Pen Example 4.1 by Saper639 (@saper639) on CodePen.
Это пример демонстрирует возможности шаблонизатора Tangular
, вместе с использованием библиотеки jComponent
и я считаю, что это очень удобно и эффективно.
See the Pen Example 4.2 by Saper639 (@saper639) on CodePen.
В этой статье я рассмотрел практически все возможности, это и подключение, и базовый синтаксис, и создание хелперов, необходимого для того, чтобы начать использовать шаблонизатор Tangular
.
Если у Вас есть вопросы можете мне их задать, я буду рад на них ответить.