jComponent - #Часть 4, Шаблонизатор Tangular

Javascript, jComponent 03 декабря 2019 2 мин. 2204

Сейчас хочу Вам рассказать про шаблонизатор Tangular, который на мой взгляд является хорошей альтернативой таким популярным шаблонизаторам, как Handlebars или Mustache.

Tangular я в основном использую на стороне клиента в браузере, но его можно использовать и на сервере.

Шаблонизация это привычное явление, если говорить о серверной части web-приложения. Шаблоны, рендерятся на сервере, преобразуются в html, которой отдаётся клиенту. В таком подходе есть свои недостатки. Во-первых, при использовании серверной шаблонизации, на обработку шаблонов тратятся ресурсы сервера, во-вторых, сгенерированный html будет весить больше чем чистые данные, не содержащие информации о том, как их визуализировать, в-третьих при таком подходе не учитывается, что в качестве клиента может выступать не только браузер, а скажем, мобильное приложение. Поэтому в последнее время при разработке Web приложений данные отдаются на клиент в сыром виде, а рендеринг осуществляется в браузере.

Данный шаблонизатор также идёт вместе с библиотекой jComponent, поэтому я его использую при создании компонент.
Tangular очень компактный, размер всего ~2Kb, но при этом всё, что нужно шаблонизатору в нем есть, а если чего то не будет хватать, можно дописать самому используя механизм хелперов.
Tangular поддерживает следующие функции:

Циклы
Условия
Хелперы (расширяемый функционал)
Предварительно скомпилированные шаблоны
Экранирует любые HTML-строки

Подключение Tangular

Чтобы начать использовать Tangular в своём проекте:

На клиенте

Если Вы собираетесь использовать библиотеку jComponent, то шаблонизатор уже включен в эту библиотеку, подробнее об этом можно прочитать в теме jComponent - #Часть 1, Подключение, DataBinding.

Также можно скачать исходники с GitHub, затем подключить файл Tangular.min.js с использованием статических путей, вставьте на странице тег <script src="js/Tangular.min.js">

На сервере

Что бы использовать в проекте Node.js, необходимо установить из npm:

$ npm install tangular

Как использование 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>

Как использовать Tangular с нереференсным типом?

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.

Если у Вас есть вопросы можете мне их задать, я буду рад на них ответить.