gifts2017

Универсальный шаблонизатор HTML

Опубликовал Дмитрий Королев (ArchLord42) в раздел Программирование - Инструментарий

Генерация HTML кода, на основе шаблонов в стиле шаблонизаторов AngularJS / Twig и подобных. Поддержка Windows / Linux

Кто сталкивался с созданием HTML из 1С, знают, какая это боль. Но если обратиться к веб программированию, то там схожую проблему решили созданиям шаблонизаторов, которые с легкостью позволяют выдавать HTML код, на основе красивых, человекочитаемых шаблонов. Помимо 1С я очень много работаю с JS и в частности с фронтенд фреймворками (Angular например), после которых задача создания HTML в 1С заставила меня плакать от того, как здесь все плохо. Вдохновившись и погуглив я нашел решение http://infostart.ru/public/352812/ , но все же это не то, что я хотел, и в итоге родилась эта обработка, которая с лекостью генерирует HTML, особо не заморачиваясь с созданием шаблонов для генерации.

Разработка пригодится тем, кто генерирует любой html из 1Ски, будь то красиво оформленные почтовые сообщения или вывод страницы через http сервис, границы применения ее очень широки. Ее же я использую для создания оформленных в корпоративном стиле pdf документов, т.е. сначала получаем html, а потом конвертируем в pdf и отправляем клиенту.

Вывод данных.

Для того, чтобы вывести значение переменной в HTML, достаточно написать примерно такой шаблон

<h1> Добрый день! Сегодня, {{ ТекущаяДата() }} <h1>

Что приведет к 

<h1> Добрый день! Сегодня, 19.08.2016 14:52:32 <h1>

Так можно выводить абсолютно любую информацию, любые глобальные переменные и тд, а для сосбтвенных переменных нужно в функцию - компилятор шаблона передать структуру параметров, например

Параметры = Новый Структура("МояПеременная", 1);

Теперь если создать шаблон

У меня {{ МояПеременная }} яблоко.

На выходе будет

У меня 1 яблоко.

Циклы

{% Для й = 0 ПО 2 Цикл %}

Итерация №{{й}}

{% КонецЦикла; %}

Выведет

Итерация №0

Итерация №1

Итерация №2

Условия

{% Если Истина Тогда %}

<h1> Истина </h1>

{% Иначе %}

<h1> Ложь</h1>

{% КонецЕсли; %}

Выведет

<h1> Истина </h1>

В целом, между тегами {% %} можно исполнять любой код будь-то присвоение переменной или еще что-нибуть, например

{% a = 1; %}

{{a}}

Выведет

1

Скачать файлы

Наименование Файл Версия Размер Кол. Скачив.
Шаблонизатор HTML
.epf 9,90Kb
19.09.16
22
.epf 1.0.0 9,90Kb 22 Скачать

См. также

Подписаться Добавить вознаграждение

Комментарии

1. Пишу код как картины (yurii_host) 19.09.16 23:45
Согласен, шаблонизаторы в вебе - штука крутая. Побольше бы таких статей с интересными практиками из других языков.
Я сталкивался с шаблонизатором Blade в Laravel. Тоже был впечатлен его возможностями. В этом, наверное, тоже есть еще много всего хорошего, типа вывода одного шаблона внутри другого и т.д.
Очень полезно было бы еще описать сферу применения этой технологии в 1С, т.к. не всем читателям она сразу понятна.
2. Антонио (Fragster) 20.09.16 10:35
Я сделал целиком на основе XML, чтобы уже на этапе сохранения можно было проверить структурную правильность http://infostart.ru/public/352812/ . Этот попроще для использования, и подходит не только для XML/HTML, а для любых строк. Но в данном случае получается смесь кода и данных, что не очень хорошо.
3. Сергей Галюк (dj_serega) 20.09.16 11:03
(2) Fragster, Но никто не оценил :(
4. Антонио (Fragster) 20.09.16 11:24
(3) dj_serega, Ну почему, автор оценил (см. вступление). Наверное. Только среди скачавших его нет :)
5. Дмитрий Королев (ArchLord42) 20.09.16 12:37
(4) Fragster

"Но в данном случае получается смесь кода и данных, что не очень хорошо"

Почему это не хорошо?)
Бизнес логика туда не пихается, только код, отвечающий за вывод данных, можно считать, что это VIEW из паттерна MVC.

Ваша разработка очень напоминает шаблонизацию на основе XSLT, которую еще не так давно можно было часто встретить в мире веб программирования, но ее минус в том, что порог вхождения для написания шаблонов немного выше получается, а на больших объемов это превращается в очень нечитабельную структуру, конечно проверки и некоторая строгость это хорошо, но на практике не всем она нужна, в итоге появились Twig \ Blade и прочие, если говорить по PHP. А вообще это как форматы XML и JSON у каждого свое назначение.

Ну, а если вернуться к проверкам то их легко можно осуществить {{ ?(Пользователь = Неопределено, "Гость", Пользователь) }}

6. Андрей Шабашов (andy23) 20.09.16 13:35
Нужная штука! Только AngularJS это вроде как бы не шаблонизатор, фреймворк с MVC
7. Дмитрий Королев (ArchLord42) 20.09.16 13:50
(6) andy23, имеется ввиду, шаблонизация которая присутствует в ангуляре, собственного названия у нее нет.
8. Александр Анисков (vandalsvq) 21.09.16 14:06
(7) ArchLord42, обычно это называют просто биндинг данных., Строго говоря названия, другого кроме "связывания", и не выдумаешь.
Практического применения не так много, ну по крайней мере при одноразовом связывании. Неплохо было бы если бы шаблон работал действительно как ангулар, не перегружая страницу полностью. А отслеживая изменения и внося их точечно. Но увы, в 1С изменение переменной не отследить, если только не делать принудительную проверку (собственную функцию проверяющую изменения, вроде $apply в angular). Вот тогда применение можно сделать широким, вплоть до создания собственных html форм внутри 1С (а вот тут применение каждый сам пусть думает). Но это никак не побуждение к действию )))) это скорее размышления о возможности применения.
9. Дмитрий Королев (ArchLord42) 21.09.16 19:58
(8) vandalsvq, Вы не так поняли идею моей разработки :) В этом я виноват, что вообще упоминул ангуляр тут, потому, что кроме схожего синтаксиса тут с ним нет ничего общего

Биндингом это назвать нельзя, т.к. связываения тут попросту не происходит, бразуер \ поле HTML дока, попросту получает сразу же готовые данные, они без понятия что между тегами <h1> </h1> было какое то выражение типа {{userName}}. При использовании ангуляра же браузер получает <h1> {{userName }} </h1> и потом, после загрузки скриптов когда начинает работать JS он (JS) связывает userName с переменной, userName текущего скоупа или вышестоящего скоупа и рендерит значение этой переменной в браузер.

Моя разработка имеет общее с бекенд языками PHP \ Ruby \ Python , т.е. шаблонизаторами, реализованными их средставми, там нет понятия биндинг ибо его просто там нет, зато есть понятие рендер, вот оно подходит к данной теме.
10. Андрей Овсянкин (Evil Beaver) 21.09.16 23:43
Я вот тут как раз подбираю шаблонизатор для 1Script и тут вы, такой прямо в тему! :)

А как у него с производительностью?
11. Андрей Шабашов (andy23) 22.09.16 07:59
(7) ArchLord42, я понял, кстати если нужен не просто вывод, а интерактивная работа с html в 1С без слез, то это тоже можно организовать. Ангуляр не взлетит, а knockout.js взлетит. Вот например как здесь Получается эдакое одностраничное приложение внутри 1С, там есть и биндинг и др. полюшки.
12. Дмитрий Королев (ArchLord42) 22.09.16 08:51
(10) Evil Beaver, честно говоря не замерял, т.к. даже на больших тестовых шаблонах, "на глаз" задержки было не видать.

А так скорость зависит от производительности функций Найти()\СтрЗаменить()\Сред() , которые используются при парсинге.

Ну а рендер готового HTML по скорости должен быть близок к нативному коду, но сильно зависит от написанного шаблона, т.е.
такие конструкции примерно как :
{% Для СтрокаТЗ ИЗ ТЗ Цикл %}
{{ СтрокаТЗ.Заказ.Автор.Сотрудник.Контрагент.Наименование }}
{% КонецЦикла; %}
скорости работы явно не прибавят.
13. Евгений Мартыненков (JohnyDeath) 22.09.16 08:55
(12) Evil Beaver намекает на то, чтобы перевезти этот проект на 1Script вот сюда: https://github.com/oscript-library (или сразу сюда: https://github.com/oscript-library)
;)
14. Maxim Goncharov (maxx) 14.10.16 20:35
(12) вопросы
1.) Как будет выглядеть конструкции для создания таблиц с определенным кол- вом колонок и строк
2.) Как весь этот подход вписать в страницы уже работающего сайта на CMS , т.е. чтобы стиль, шрифты и т.п. вписались нормально в дизайн
15. Дмитрий Королев (ArchLord42) 15.10.16 08:22
Простейший пример вывода таблицы
<div class="table">
  
  <div class="row header">
    <div class="col">Артикул</div>
    <div class="col">Наименование</div>
    <div class="col">Количество</div>
  </div>
  
  {% Для Каждого СтрокаТЗ ИЗ Таблица %}
  <div class="row">
    <div class="col">{{СтрокаТЗ.Артикул}}</div>
    <div class="col">{{СтрокаТЗ.Наименование}}</div>
    <div class="col">{{СтрокаТЗ.Количество}}</div>
  </div>
  {% КонецЦикла; %}
  
</div>
...Показать Скрыть


2). Подключить CSS с сайта и оформить таблицу в том виде, в котором это было предусмотрено на сайте.
16. Владимир Чаклин (vec435) 26.10.16 11:26
для неинтерактиной обработки - RegExp
17. Алекс Климанов (fuxic) 29.10.16 21:36
велосипед красивый, но...
есть стандарт XSLT для HTML/XML)) зачем усложнять своим синтаксисом? шаблонизатор ангулара/кендо пихать в 1с? ножом по сердцу
более того есть стандартные библиотеки скриптов конверсии и красивые стили, которые потянет даже встроенный в 1с хтмлбраузер
18. Дмитрий Королев (ArchLord42) 30.10.16 05:52
(17) fuxic, комменты выше читали?
Я уже писал, что XSLT объективно не далеко самый удобный стандарт, генерация даже простого шаблона XSLT, потребует гораздо больше усилий, чем использования шаблонизаторов + плохая читабельность больших шаблонов.
Да и это не мой синтаксис, взят он, как вы уже заметили из веб ориентированных ЯП
XSLT кстати, если судить по вашему комментарию тоже велосипед и усложняет все своим синтаксисом, потому что пришел он от туда же, просто в данный момент поддерживается нативно 1Ской.
Несколько лет назад в вебе было модно юзать XSLT, но потом он умер(в году так 2010) из-за причин, которые я уже описал и начали появились велосипеды со своим синтаксисом, которые в итоге своего развития так усложняли все, что начинающему программисту было проще выучить 3 разных синтаксиса различных шаблонизаторов, чем XSLT.
А что вы думаете о JSON?) Придумали тут костыль, со своим синтаксисом, когда есть XML?)))
Для написания сообщения необходимо авторизоваться
Прикрепить файл
Дополнительные параметры ответа