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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Циклы

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

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

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

Выведет

Итерация №0

Итерация №1

Итерация №2

Условия

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

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

{% Иначе %}

<h1> Ложь</h1>

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

Выведет

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

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

{% a = 1; %}

{{a}}

Выведет

1

18 Comments

  1. json

    Согласен, шаблонизаторы в вебе — штука крутая. Побольше бы таких статей с интересными практиками из других языков.

    Я сталкивался с шаблонизатором Blade в Laravel. Тоже был впечатлен его возможностями. В этом, наверное, тоже есть еще много всего хорошего, типа вывода одного шаблона внутри другого и т.д.

    Очень полезно было бы еще описать сферу применения этой технологии в 1С, т.к. не всем читателям она сразу понятна.

    Reply
  2. Fragster

    Я сделал целиком на основе XML, чтобы уже на этапе сохранения можно было проверить структурную правильность http://infostart.ru/public/352812/ . Этот попроще для использования, и подходит не только для XML/HTML, а для любых строк. Но в данном случае получается смесь кода и данных, что не очень хорошо.

    Reply
  3. dj_serega

    (2) Fragster, Но никто не оценил 🙁

    Reply
  4. Fragster

    (3) dj_serega, Ну почему, автор оценил (см. вступление). Наверное. Только среди скачавших его нет 🙂

    Reply
  5. ArchLord42

    (4) Fragster

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

    Почему это не хорошо?)

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

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

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

    Reply
  6. andy23

    Нужная штука! Только AngularJS это вроде как бы не шаблонизатор, фреймворк с MVC

    Reply
  7. ArchLord42

    (6) andy23, имеется ввиду, шаблонизация которая присутствует в ангуляре, собственного названия у нее нет.

    Reply
  8. vandalsvq

    (7) обычно это называют просто биндинг данных., Строго говоря названия, другого кроме «связывания», и не выдумаешь.

    Практического применения не так много, ну по крайней мере при одноразовом связывании. Неплохо было бы если бы шаблон работал действительно как ангулар, не перегружая страницу полностью. А отслеживая изменения и внося их точечно. Но увы, в 1С изменение переменной не отследить, если только не делать принудительную проверку (собственную функцию проверяющую изменения, вроде $apply в angular). Вот тогда применение можно сделать широким, вплоть до создания собственных html форм внутри 1С (а вот тут применение каждый сам пусть думает). Но это никак не побуждение к действию )))) это скорее размышления о возможности применения.

    Reply
  9. ArchLord42

    (8) vandalsvq, Вы не так поняли идею моей разработки 🙂 В этом я виноват, что вообще упоминул ангуляр тут, потому, что кроме схожего синтаксиса тут с ним нет ничего общего

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

    Моя разработка имеет общее с бекенд языками PHP Ruby Python , т.е. шаблонизаторами, реализованными их средставми, там нет понятия биндинг ибо его просто там нет, зато есть понятие рендер, вот оно подходит к данной теме.

    Reply
  10. Evil Beaver

    Я вот тут как раз подбираю шаблонизатор для 1Script и тут вы, такой прямо в тему! 🙂

    А как у него с производительностью?

    Reply
  11. andy23

    (7) я понял, кстати если нужен не просто вывод, а интерактивная работа с html в 1С без слез, то это тоже можно организовать. Ангуляр не взлетит, а knockout.js взлетит. Вот например как здесь Получается эдакое одностраничное приложение внутри 1С, там есть и биндинг и др. полюшки.

    Reply
  12. ArchLord42

    (10) Evil Beaver, честно говоря не замерял, т.к. даже на больших тестовых шаблонах, «на глаз» задержки было не видать.

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

    Ну а рендер готового HTML по скорости должен быть близок к нативному коду, но сильно зависит от написанного шаблона, т.е.

    такие конструкции примерно как :

    {% Для СтрокаТЗ ИЗ ТЗ Цикл %}

    {{ СтрокаТЗ.Заказ.Автор.Сотрудник.Контрагент.Наименование }}

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

    скорости работы явно не прибавят.

    Reply
  13. JohnyDeath

    (12) Evil Beaver намекает на то, чтобы перевезти этот проект на 1Script вот сюда: https://github.com/oscript-library (или сразу сюда: https://github.com/oscript-library)

    😉

    Reply
  14. maxx

    (12) вопросы

    1.) Как будет выглядеть конструкции для создания таблиц с определенным кол- вом колонок и строк

    2.) Как весь этот подход вписать в страницы уже работающего сайта на CMS , т.е. чтобы стиль, шрифты и т.п. вписались нормально в дизайн

    Reply
  15. ArchLord42

    Простейший пример вывода таблицы

    <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 с сайта и оформить таблицу в том виде, в котором это было предусмотрено на сайте.

    Reply
  16. vec435

    для неинтерактиной обработки — RegExp

    Reply
  17. fuxic

    велосипед красивый, но…

    есть стандарт XSLT для HTML/XML)) зачем усложнять своим синтаксисом? шаблонизатор ангулара/кендо пихать в 1с? ножом по сердцу

    более того есть стандартные библиотеки скриптов конверсии и красивые стили, которые потянет даже встроенный в 1с хтмлбраузер

    Reply
  18. ArchLord42

    (17) fuxic, комменты выше читали?

    Я уже писал, что XSLT объективно не далеко самый удобный стандарт, генерация даже простого шаблона XSLT, потребует гораздо больше усилий, чем использования шаблонизаторов + плохая читабельность больших шаблонов.

    Да и это не мой синтаксис, взят он, как вы уже заметили из веб ориентированных ЯП

    XSLT кстати, если судить по вашему комментарию тоже велосипед и усложняет все своим синтаксисом, потому что пришел он от туда же, просто в данный момент поддерживается нативно 1Ской.

    Несколько лет назад в вебе было модно юзать XSLT, но потом он умер(в году так 2010) из-за причин, которые я уже описал и начали появились велосипеды со своим синтаксисом, которые в итоге своего развития так усложняли все, что начинающему программисту было проще выучить 3 разных синтаксиса различных шаблонизаторов, чем XSLT.

    А что вы думаете о JSON?) Придумали тут костыль, со своим синтаксисом, когда есть XML?)))

    Reply

Leave a Comment

Ваш адрес email не будет опубликован. Обязательные поля помечены *