15 JavaScript шаблонизаторов


H Пишем простой шаблонизатор на js в черновиках Tutorial

Сейчас я вижу всего два варианта шаблонов в js приложениях шаблонизаторы которые встроены в фреймворк и jquery лапшу (последнее самое распространённое) Я полагаю что это из-за того что многие не понимают как работают шаблонизаторы вообще (я о их внутренностях, а не о функции ).
В этой статья я покажу как сделать простой но мощный шаблонизатор на основе регулярных выражений.

Но для тех кто не в теме немного о том что же это такое и что оно нам даст.

Шаблонизатор (в web) — программное обеспечение, позволяющее использовать html-шаблоны для генерации конечных html-страниц. Основная цель использования шаблонизаторов — это отделение представления данных от исполняемого кода. Часто это необходимо для обеспечения возможности параллельной работы программиста и дизайнера-верстальщика. Использование шаблонизаторов часто улучшает читаемость кода и внесение изменений во внешний вид, когда проект целиком выполняет один человек.

И так мы хотим рендить шаблоны в 1 проход и иметь представление отдельно от логики. Обычно шаблонизаторы имеют подобный интерфейс.

Ниже код с подробными комментариями (что и почему)

Я надеюсь теперь меньше станет jquery лапши )

комментарии ( 3 )

Не могу сказать точно, почему вас минусуют, но вот некоторые замечания я предоставить могу:

  1. не стоит делать велосипедов, если только не для обучения. Для подобных целей уже давно придумали react, handlebars, mustache, etc.
  2. я бы еще добавил какой-то callback для того, чтобы показывать юзеру информацию о загрузке страницы.
  3. я бы оформил это либо в стиле ООП (тогда мы можем хранить один инстанс на каждый шаблон), либо как у вас (но добавил туда кеш). Ибо если юзер скачет по страницам, то мы каждый раз будем грузить шаблон с сервака. Зачем?
  4. атата, в JS принято называть методы с маленькой буквы, а вот класс (пусть и статический) с большой.

Js шаблонизатор

Пытаюсь разобраться вот с этим js шаблонизатором, но не понимаю ни принцип работы, ни то, как и в каких случаях его можно использовать.

Прошу объяснить подробно, что делает этот скрипт, как его использовать и пример. Пример, который указан на сайте, у меня так и не получилось запустить, так как я не пониманию, где должны быть данные.

1 ответ 1

Автор, посмотри на дату комментариев к той статье, они аж от 2008 года, эта статья морально устарела и с того времени появилось множество различных шаблонизаторов.

Лучше обрати внимание на такие шаблонизаторы, как Jade, Dust, SnakeSkin(один из самых новых и навороченных).

Функционал JS. JS-шаблонизатор

Одним из важных нововведений в каркасе является внедрение js-шаблонизатора.

Его задача — генерация динамических блоков после загрузки страницы, заполнение их данными.

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

Синтаксис


ECTjs предоставляет простое расширение html-верстки включением в нее управляющих структур шаблонизатора для

  • вывода данных
  • условий
  • циклов
  • вызов простых функций (helper) для обработки данных

Вывод данных

Условия

Циклы

helper

Учтите, что хелперы могут принимать один входящий параметр, а на выход они могут выдавать

Данные

Представляют собой объект с данными, которые передаются в шаблонизатор.

Данный пример предоставит информацию для цикла вывода ссылок в меню.

Так же здесь представлен простой helper formatMoney, который возвращает цену, отформатированную согласно настройкам Бэк-офиса.

Шаблоны в каркасе

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

template_cart.liquid

шаблоны для динамически изменяемых фрагментов страницы Корзины и вывода списка товаров в виджете корзины

template_modal.liquid

шаблоны модальных окон

template_product.liquid

различные шаблоны для вывода товара в динамически обновляемых коллекциях, слайдерах, списках.

template_search.liquid

шаблон списка результатов живого поиска


template_selectors.liquid

шаблоны селекторов модификаций товара

Каждый конкретный шаблон должен быть обернут в тег

Здесь class описывает к какому типу шаблонов относится данный шаблон, а id является идентификатором самого шаблона в подмножестве типа шаблонов

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

Такая конструкция тега

  • предотвращает вывод всего скелета шаблона в браузер пользователя без данных
  • гарантирует, что интерпретатор js не сообщит об ошибке
  • шаблон будет обработан и подключен к системе в нужном порядке

Вызов

Для работы с шаблона в каркасе предусмотрены 2 функции

InSales.Template( class_name )

Данная функция вызывается один раз для всех шаблонов типа class_name.

Проходит по всем тегам

и прописывает их в теме.

Пример.

Вы разработали 20 шаблонов для модальных окон, каждый из них обрамлен своим тегом

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

В каркасе все эти манипуляции производятся в сниппете init_js.liquid.

InSales.Render( data, class_name, view )

Вызывает шаблон с идентифектором view, который относится к типу шаблонов class_name и передает в него данные data.

На выходе получаем разметку, готовую для вставки.


Пример.

Вы хотите вывести только что добавленный товар в блок на сайте.

Пусть для этой цели у нас уже есть шаблон, который подключен к теме

Далее, мы формируем данные

После чего делаем вызов

Что при этом происходит

InSales.Render() находит шаблон list в группе product и передает в ECT шаблон и данные.

Вначале в шаблоне идет проверка, что в data у нас есть массив products и он не пустой.

Далее в цикле проходим по массиву products, сохраняя элемент в product. На каждой итерации дублируется вывод разметки, подставляя необходимые значения из полей url, title, first_image.

По завершению цикла ECT вернет готовую разметку со всеми данными, которую остается только вывести в нужное место.

#7 — Линейный шаблоны (Встроенный в underscore.js шаблонизатор).

Сегодня мы рассмотрим работу с шаблонизатором. Что же это за зверь такой и как его использовать?

Доброго времени суток!Задача шаблонизатора упростить жизнь разработчику. Представьте себе у вас есть 10 однотипных html страниц, в которых все отображение и порядок тэгов одинаковый, а разное только наполнение. Зачем же писать все эти 10 страниц вручную, когда можно написать один шаблон, и просто вставлять в него необходимые данные. Думаю, ответ очевиден. Итак, представляем вашему вниманию, замечательный, встроенный в underscore.js шаблонизатор

Цукерберг рекомендует:  5 ключевых навыков интернет-маркетолога

Вспомним модель и вид, что мы уже имеем. А так же анти-шаблон, написанный на прошлом уроке.

15 JavaScript шаблонизаторов

You are using an outdated browser. Please upgrade your browser.

By signing up, you agree to our Terms of Service and Privacy Policy.

Данная статья – обзор шаблонизаторов для фронтенд разработки. Если Вы работаете с JS, отличным и подходящим выбором являются шаблонизаторы, так как они дают возможность писать более чистый базовый код и упрощают работу с приложениями. Рассмотрим наиболее популярные шаблонизаторы JS, которые нам предлагает Википедия. Для того, чтобы качественно работать с данными шаблонизаторами, нужно иметь хорошое понимание языка и достаточное количество навыков в этой сфере.

ICanHaz.js – довольно простая и легкая библиотека, чтобы работать с шаблонами Mustache. С ним можно определять фрагменты шаблонов в тегах скриптов с type=”text/html” и вызывать их через id, с валидацией.

Mustache.js – очень популярный шаблонизатор в данной области применения. Он предоставляет решения для серверной и клиентской стороны, поэтому вам не нужно будет беспокоиться о использовании нескольких шаблонизаторов. Имеет хорошую и понятную документацию, а также большое сообщество. В шаблонах использует данных JSON формата. Отлично запускается на популярных языках программирования. Последнюю версию библиотеки можно скачать с офицальной страницы .

Handlebars – расширение для Mustache и полностью с ним совместимо. Имеет большую скорость исполнения, так как не перегружен лишней логикой. HTML по тому же принципу генерируется из данных в формате JSON. Существенный недостаток – большой вес библиотеки.

Underscore.js – удобный и практичный инструмент для работы с jQuery. Имеет больше 60 функциональных утилит. Данный шаблонизатор усиляет функциональность jQuery при работе с массивами, функциями, объектами, коллекциями и т.д. 5 альтернатив jQuery UI тут .


Hogan.js – шаблонизатор, который разработала компания Twitter. Его используют в качестве компоновщика промежуточных шаблонов для их быстрой динамической обработки веб-браузером. В основу разработки данного шаблонизатора был положен Mustache, но Hogan.js работает намного быстрее. Для доступа к функциям парсера предлагается API. Сканирование шаблонов и парсинг исполняются отдельными методами, в результате чего шаблоны могут заранее обрабатываться на сервере, а на клиентской стороне использоваться в Javascript-виде.

Jade.js – используют для работы с серверными шаблонами Node.js , но в общем применим и для других целей. Имеет высокую читабельность кода и хорошую безопасность. Функционирует из части клиента, есть возможность с помощью утилиты компилировать html-шаблоны из командной строки. Шаблонизатор переименован в Pug.js, но по старому названию можно найти большое количество документации и полезной информации для разработчика.

Шаблонизатор ECT разработан для повышения скорости. В его основе шаблонизатор Coffeescript. Имеет хорошую совместимость с Node.js и довольно простой синтаксис. Можно также ознакомиться с предварительными тестами, которые показывают производительность данной библиотеки.

Компания Hyper Host™ желает Вам приятной работы в мире JS и готова разместить Ваши замечательные проекты на нашем хостинге !

Простой JavaScript шаблонизатор jQuery.loadTemplate

Дата публикации: 2020-01-28

От автора: бывают ситуации, когда JavaScript приложение, формирует контент, который впоследствии необходимо отобразить на экране. При этом, если контент не большой, то данная задача решается достаточно просто, путем использования специальных методов.

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

Конечно, по большому счету данная задача так же решается путем использования стандартных методов по отображению данных, но при этом, все элементы оформления будут добавлены непосредственно в код скрипта, что сделает его очень сложным для понимания и редактирования. В этом случае наилучшее решение – это полное отделение логики скрипта от его дизайна, путем использования шаблонов – для хранения дизайна, и шаблонизатора для передачи и отображения данных.

Поэтому в данном уроке мы с Вами рассмотрим простой шаблонизатор для языка JavaScriрt: jQuery.loadTemplate, который представляет собой плагин для библиотеки jQuery и называется jquery.loadTemplate.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Установка плагина

Перед установкой плагина, давайте рассмотрим тестовый сайт, который я буду использовать для данного урока (сайт очень простой).

На его единственной странице располагается кнопка “Получить данные”, по нажатию на которую – будет выполнен запрос на сервер к файлу script.php. Данный скрипт выполнит соединение с базой данных и осуществит выборку определенных данных, которые будут возвращены для отображения на экран.

HTML код главной страницы (файл index.html).

Обратите внимание, что на данной странице подключена библиотека jQuery, а также файл script.js, код которого приведен ниже.

‘ + html . title + ‘

Как Вы видите, функция обработчик, в параметре “success”, содержит помимо логики, дизайнерские элементы (теги html), которые необходимы для правильного отображения данных. Собственно в данном уроке мы с помощью плагина jquery.loadTemplate, постараемся отделить логику от представления.

Теперь давайте установим плагин jquery.loadTemplate. Для этого переходим на официальный сайт, данного плагина и кликаем по ссылке “Download .zip”.

В скачанном архиве, содержится каталог “jquery-loadTemplate”, в котором располагается актуальная версия плагина в двух вариантах – обычном и сжатом, из которого удалены все лишние, не участвующие в логике символы (пробелы, переводы строк и т.д).


Соответственно, копируем, к примеру, сжатую версию плагина и добавляем в корень каталога, в котором хранятся скрипты языка JavaScript. Далее данный файл необходимо подключить к тестовому сайту.

На этом установка плагина завершена.

Работа с шаблонами

Теперь в файле index.html в блоке head, разместим следующий код.

Данный код, представляет собой шаблон для шаблонизатора “jquery.loadTemplate”. В каждом из тегов шаблона, использованы нестандартные атрибуты, которые представляют собой управляющие конструкции для шаблонизатора:

data-content – формирует контент блока, то есть данные которые отображаются между открывающим и закрывающим тегом. В качестве значения указывается имя переменной, значение которой будет добавлено в качестве контента блока;

data-src – формирует атрибут “src”;

Как Вы видите, в шаблоне используются переменные, а значит, их необходимо передать при помощи шаблонизатора. Поэтому, в файле script.js, выполним некоторые правки.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Итак, первым делом выбираем при помощи библиотеки jQuery, блок в котором будут располагаться данные (в котором будет отображен шаблон с данными), в нашем случае это блок div, с идентификатором ‘template-container’. Далее вызываем на исполнение метод loadTemplate(), который загрузит шаблон и передаст необходимые переменные. Шаблон, для отображения данных, мы с Вами определили в блоке script с идентификатором «template», поэтому jQuery выборку, данного блока, мы передаем в качестве первого параметра, при вызове метода. В качестве второго параметра, передаем литерал объекта, в свойствах которого, определены переменные, которые необходимо передать в шаблон. Далее, обновляем информацию в браузере.

Цукерберг рекомендует:  Как работает JavaScript часть вторая

То есть мы отделили логику скрипта от его представления.

Обзор шаблонизаторов JavaScript

Шаблонизаторы являются отличным инструментом для создания веб-приложений с более чистым и простым кодом. Ниже представлены наиболее популярные шаблонизаторы JavaScript.

Mustache.JS

Mustache.JS — это логический шаблонный синтаксис. Его можно использовать для HTML, конфигурационных файлов, исходного кода — чего угодно. Он работает путем расширения тегов в шаблоне, используя значения, предоставленные в хэше или объекте.

Transparency

Transparency — это минимальный шаблонизатор для jQuery. Он отображает объекты JSON на элементы DOM с нулевой конфигурацией. Просто вызовите .render().

Hogan.js

Hogan.js — это шаблонизатор JS 3.4k, разработанный в Twitter. Используйте его как часть вашего упаковщика ресурсов для предварительной компиляции шаблонов или включите его в браузер для обработки динамических шаблонов. Если вы разрабатываете с Node.js, просто используйте NPM, чтобы добавить пакет Hogan.

HandlebarsJS

HandlebarsJS — обеспечивает необходимую мощность, позволяющую эффективно создавать семантические шаблоны без каких-либо разочарований. Handlebars в значительной степени совместим с шаблонами Mustache. В большинстве случаев можно поменять Mustache с помощью Handlebars и продолжить использовать текущие шаблоны.


Jade Language

Jade — это движок HTML шаблонов, в основном используемый для серверных шаблонов в NodeJS.

Nunjucks

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

Сделать шаблонизатор

Прислали мне тут вот такое задание:

Где template – строка, содержащая текст шаблона на его специальном языке, а data – объект JavaScript, содержащий набор данных для генерации. Функция должна возвращать строку с результатом обработки.

Синтаксис языка шаблонов:

Должны поддерживаться конструкции вида: << name >>, где name имя ключа из набора данных. Если имя отсутствует, то вместо него подставляется пустая строка. Допустимое имя – последовательность из алфавитных и цифровых символов и знаков подчёркивания, начинающаяся с алфавитного символа или знака подчёркивания. Между именем и фигурными скобками допускается произвольное количество пробельных символов. Между парой фигурных скобок пробельные символы не допускаются.

Блоком называется конструкция вида:
<% name %>body <% / %>
Она обрабатывается специальным образом:
Если ключ name отсутствует в наборе или его значение равно пустой строке, то тело блока не выводится.
Если ключ присутствует и не является списком, то тело блока выводится один раз.
Если ключ присутствует и является списком, то тело блока выводится столько раз, сколько элементов списка. При этом внутри блока будет доступна специальная переменная << . >>, которая устанавливается на каждой итерации цикла в следующий элемент списка.
Блоки могут быть вложенными, при этом закрывающая конструкция <% / %>относится к ближайшей открывающей конструкции блока, а переменная << . >> относится к самому глубокому блоку, в который она вложена.

Комментарием называется конструкция вида:
<# body #>
Тело комментария не обрабатывается и не включается в результирующий текст.

illumium.org

Разработка простого шаблонизатора на JavaScript

kayo — Сб, 15/10/2011 — 10:43

Есть несколько случаев, когда вам может понадобиться шаблонизатор на JavaScript, среди них как необходимость формирования содержимого на клиенте, так и на сервере, если используется JavaScript среды, такие как NodeJS или Rhino. Сразу скажу, что для себя рассматривал многие имеющиеся шаблонизаторы, от простых до экзотических. Более всего интересовали простые, однако позволяющие использовать сложную логику в шаблонах, и одним из таковых оказался EJS. Однако, штука эта была написана несколько не так, как мне бы хотелось, с одной стороны было много лишнего, с другой основная функциональность уж слишком усложнена. Я увидел возможность реализовать компиляцию и рендеринг его шаблонов гораздо проще.

Применение EJS

То, что делает шаблонизатор: беря шаблон и данные, возвращает экземпляр содержимого, полученный путём обработки шаблона на основе этого конкретного экземпляра данных.

В случае EJS суть проста: в составе шаблона мы можем совмещать выводимое как есть содержимое с кусочками встроенного JavaScript, аналогично тому, как в файлах сценариев PHP объединяется HTML с кодом. В коде видны как глобальные переменные, так и те, что мы позаботимся передать рендереру при вызове. Ещё там видны так называемые функции-помощники, которые упрощают формирование часто используемых конструкций, например, тегов ссылок или картинок.

Код обрамляется в тег или в тег .

Вот как это может выглядеть:


Я намеренно написал конструкции в разных стилях, чтобы показать, что наличие пробелов значения не имеет. Формируя вывод с использованием шаблона, мы передаём объект со свойствами, выступающими в качестве переменных, с которыми оперирует код внутри нашего шаблона. Смысл в том, что с помощью логических конструкций на самом же JavaScript можно гибко менять вид формируемого в результате содержимого. Как вариант возможно использование тегов вида [% %], если шаблон предполагается рендерить уже после того, как он включён в дерево DOM . В свете моих паттернов использования, оно мне показалось не очень полезным.

Улучшаем EJS

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

Разбор исходных шаблонов

Компиляция всегда начинается собственно с разбора исходного материала по заведомо заданным правилам. Наш набор правил сводится к различению содержимого в специальных тегах и всего остального. Глядя на структуру наших специальных тегов, можно понять, что достаточно просто захватывать их целиком с помощью несложного регулярного выражения. Помним, что кроме собственно кода, нам понадобится вытаскивать открывающий тег, чтобы понять, что делать с кодом внутри. Вот как будет выглядеть RegExp:

Итак, что мы здесь делаем:

  • (?:\n\s*)? — убираем перевод строки и все пробелы от него до тега кода, если таковое вообще присутствует. Это, конечно, делать было вовсе не обязательно, но мы же эстеты, так предотвратим появление множества пустых строк в формируемом содержимом. Спецификатор ?: в начале подпаттерна означает, что его содержимое не захватывается, а просто пропускается.
  • ( ] — наш код — это любые символы, не являющиеся %, или символ %, за которым не следует символ >.
  • (?:[^%]|[%][^>])+ — наш код — эти последовательности могут присутствовать более одного раза, но не должны захватываться.
  • ((?:[^%]|[%][^>])+) — наш код — а захватываем мы всю последовательность целиком.
  • %> — закрывающий тег не захватываем.
  • gm — включаем глобальную полнотекстовую (многострочную) обработку.

Как можно видеть, всё достаточно тривиально, осталось разобраться, что делать с этим регулярным выражением. А здесь нам поможет очень полезный метод String.split, который разбивает строку с использованием указанного разделителя, возвращая массив получившихся подстрок. Особенность данного метода в том, что в качестве разделителя он может принимать регулярное выражение, причём, если в нём присутствуют захватываемые подпаттерны, подстроки, которые им соответствуют, также попадут в результирующий массив в обычном порядке. Это и даёт нам идею нативной оптимизации компилятора шаблонов: разбиваем строку регулярным выражением, получаем последовательность из кусочков строчного контента и спецификаторов кода со следующими за ними кусочками этого кода, далее достаточно просто обработать получившийся массив.

Формирование исполняемого кода

Теперь у нас имеется разобранный шаблон, а значит уже можно представить, каким образом вполне линейно преобразовывать его в исполняемый код на JavaScript. Всё, что нам нужно, это получить функцию, вызывая которую, мы будем получать корректно сформированное согласно исходному шаблону содержимое. Так, куски содержимого из шаблона должны вставляться как есть, на место переменных должны вставляться их значения, а код должен выполняться.

Организуем это следующим нехитрым образом:

  • функцию будем формировать в виде строки, пригодной для вызова eval
  • в теле функции организуем последовательное присоединение кусочков содержимого к некой переменной результата
  • обычный код на JS вставим как есть

Однако нам потребуется решить следующие проблемы:

  • передача переменных и функций-помощников в тело исполняемой функции шаблона
  • организация переменной результата так, чтобы это не пересекалось с переменными, используемыми в шаблоне

Решение первой проблемы

Для того, чтобы решить первую проблему, проще всего использовать конструкцию with. Да, это именно та вещь, которая является извечной темой бурных дискуссий разработчиков и головной болью стандартизаторов w3c, именно её так ненавидят всякие валидаторы типа JSLINT и компиляторы вроде Closure Compiler. То, что делает данная конструкция, проще всего представить как предоставление объекта в качестве уровня видимости локальных переменных, то есть вы сможете обратиться к свойствам объекта по имени как к обычным переменным, то есть без префикса имени объекта с точкой, вот, как это выглядит:

При чтении значений всё довольно просто, не так тривиально при записи, особенно при использовании вложенных конструкций with, однако в шаблонах нам потребуется в основном читать значения, поэтому использование нативного подхода вместо того, чтобы городить очередной костыль, более чем оправданно. Если быть точным, то на самом деле создаются два взаимовложенных уровня видимости локальных переменных: один из объекта, другой внутри тела with, то есть при создании локальных переменных там, они не попадают в исходный объект.

Решение второй проблемы

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


Посмотрим, что у нас есть, а вариантов в общем то не много: как-то использовать объект this или объект arguments, которые, ввиду особенностей языка, пользователь всё равно не должен использовать в шаблонах, а если и может, то лишь неким особым образом. Рассмотрев все за и против, я решил использовать arguments, массив неименованных аргументов, переданных функции, в один из них и будем класть всё, что нужно для корректного формирования содержимого.

Особенности реализации

Теперь у нас есть всё, чтобы реализовать законченный движок шаблонизатора. Как я уже говорил, он не будет полностью совместим с оригинальным EJS, однако сможет использовать созданные для него шаблоны. Также не будет реализации автоматического загрузчика шаблонов, его нужно прикрутить самостоятельно, опираясь на принципы используемого вами фреймворка в данной конкретной среде исполнения.

Самое время перейти непосредственно к коду, рассмотрим всё по частям, начиная с главного и основного, а именно, с объекта шаблона:

Далее реализуем функцию компилирования шаблона:

Осталось добавить функцию рендеринга шаблона, но она более чем тривиальна:

Конечно, не забываем добавить функции ошибок:

Ну и если хотим, добавим функции-помощники:

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

Что дальше?

Ну и собственно, предлагаю эту самую высокоуровневую реализацию. Если вас устраивает то, что уже есть, дальше на тему читать не обязательно, потому что далее будет только хуже будет рассмотрена реальная жизнь.

В моих проектах применяется такая штука как RequireJS, которая реализует единый механизм связывания кода ваших приложений, да и не только кода, а вообще в принципе любых типов ресурсов, причём независимо от среды, в которой выполняется ваш код на JavaScript. В статье JavaScript: Node.JS, RequireJS, NodeLint и другие я уже писал о том, как это работает, однако одна очень полезная особенность так и не была рассмотрена. Это использование и разработка так называемых плагинов RequireJS. Но данный вопрос будет темой следующей статьи, эта итак получилась весьма не маленькая.

Здесь выкладываю библиотеку с некоторыми тестами, для запуска которых на стороне сервера вам понадобится NodeJS с установленным RequireJS, а на клиентской стороне web-сервер nginx. Тестируется командой make из директории проекта.

Vanilla JS

пятница, 19 февраля 2020 г.

Полноценный JavaScript-шаблонизатор Template аналог EJS

// Usage:
// console.log(new TPL.Template(«

// Options:
// delimiters — characters to use for open and close delimiters
// rmWhitespace — remove whitespace between HTML-tags

// Tags:
// — plain ending tag

function Template (templateString, newSettingsObject) <
var settingsObject = <
delimiters: [» «]
, rmWhitespace: false // removeWhitespace
>;
if (newSettingsObject)
var renderFunction = createRenderFunction(templateString, settingsObject); // console.log(renderFunction.toString());
return >;
>

function setNewSettings (settingsObject, newSettingsObject) <
for (var key in newSettingsObject) <
if (newSettingsObject.hasOwnProperty(key)) <
settingsObject[key] = newSettingsObject[key];
>
>
>

function trim (text) <
return text == null ? «» : («» + text).replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, «»); // Trim space: \s, BOM: \uFEFF, NBSP: \xA0.
>

Цукерберг рекомендует:  Php - Как вы относитесь к PHP Devel Studio и к PHP в целом
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих
Javascript