Главная » Советы Windows 7 » Обзор актуальных шаблонизаторов JS. Движки шаблонизации Javascript

Обзор актуальных шаблонизаторов JS. Движки шаблонизации Javascript

Фреймворки шаблонизаторы отделяют макет (разметку страницы) динамических веб-сайтов и приложений от интегрированной в них логики. Все фреймворки поддерживают различные формы циклов, условной логики и специального форматирования. Но мне хотелось получить такой движок, который бы располагал продвинутыми инструментами построения страницы для нескольких целей:

для совместного использования разметки на страницах;
для включения отдельных блоков с функциональностью (при необходимости);
в общем и целом для упрощения процесса построения в меру сложных макетов страниц c минимумом прилагаемых усилий.

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

Существует ряд популярных шаблонизаторов для JavaScript, и мы рассмотрим некоторые из них:

EJS

EJS (Встроенный JavaScript) очень напоминает PHP или JSP, очень простые функции – слишком простые для того, чтобы быть хоть в чем-то полезными. Сразу исключаем.

Jade

Наиболее характерной особенностью Jade является то, что он обозначает пробел без кавычек (как Coffeescript),что или является чудом (если вы верите в подобные вещи), или катастрофической неисправностью, если вы реалист (как я). По своим характеристикам этот шаблонизатор стоит на одном уровне с большинством других систем, но его стилевое оформление заставляет нас почти сразу его отбросить.

Mustache / Handlebars

Использует знакомую { { систему токенов } } для встраивания логики в существующие шаблоны (и не только HTML). Обеспечивает хороший набор циклов, логику и управление переменными. Не очень хорошо работает с частичными шаблонами и блоками, а также другими элементами, необходимыми для более легкого создания умеренно сложных структур страниц, что является ключевым требованием даже для самой простой системы CMS, которую я бы хотел видеть. Идем дальше…

Dust

В настоящее время популярен из-за его применения в LinkedIn. На первый взгляд, очень похож на Mustache / Handlebars, но дополнен рядом полезных функций, таких как именованные блоки. Однако процесс загрузки шаблона и рендеринг выглядят довольно неуклюже, и он до сих пор не поддерживает довольно широкий спектр функций для построения страницы. Хорош, но недостаточно…

Nunjucks

Еще одна { { система на основе токенов } } , обеспечивающая (как и другие движки) логику, выполнение циклов и возможность управления переменными. Но кроме этого, шаблонизатор предоставляет продвинутые элементы построения страницы, например, наследование блоков, включая наследование макетов, пользовательские теги и макросы. Это все наилучшим образом подходит для системы CMS, где страницы представляют собой серию «строительных блоков».

Итак, у нас есть победитель!

Для справки Основные примеры рендеринга

Давайте рассмотрим некоторые примеры шаблонизатора Nunjucks в действии…

Динамический рендеринг на платформе Node при использовании nunjucks.render

Во-первых, мы рассмотрим пример, в котором будем использовать Nunjucks для рендеринга страницы в ответ на запрос веб-службы, который обрабатывается сервером Node. Этот сценарий очень похож на тот, который происходит при запросе PHP или СoldАusion или страницы ASP .NET на обычном веб-сайте или в веб-приложении.

Предположим, что Node уже установлен.

Устанавливаем Express и Nunjucks:

Npm install express --save npm install nunjucks --save

Создаем нашу базовую структуру app.js:

Var express = require("express") ; var nunjucks = require("nunjucks") ; var app = express();

Настраиваем Nunjucks :

Var PATH_TO_TEMPLATES = "." ; nunjucks.configure(PATH_TO_TEMPLATES, { autoescape: true, express: app } );

Простой путь:

App.get("/home.html", function(req, res) { return res.render("index.html") ; } ); app.listen(3000);

Создаем шаблон index.html:

Привет всем

Запуск с:

Node app.js

и переходим на http://localhost:3000 . Готово!

Добавление динамических данных

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

Для начала давайте передадим некоторые данные функции render:

App.get("/home.html", function(req, res) { var data = { имя: "Энди", фамилия: "Нил" } ; return res.render("index.html", data) ; } );

Во-вторых, мы будем ссылаться на эти данные в нашем шаблоне index.html:

Привет { { data.имя } }

Угадали, что произойдет, когда мы перейдем на http://localhost:3000 ?

Предварительная компиляция при помощи Gulp

Если у вас есть шаблоны, которые не опираются на динамические данные, тогда альтернативой их рендерингу по запросу будет использование инструмента Gulp (или Grunt, если он вам больше по душе) для предварительной компиляции данных во время компоновки.

Предположим, у вас есть простой сайт, состоящий из двух страниц со схожей разметкой:

src/index.html
src/contact-us.html
src/_layout.html

Ваши странички могут выглядеть так:

{ % set title = "Главная" %} { % extends "_layout.html" %} { % block content %} Добро пожаловать { % endblock %} { % set title = "Контакты" %} { % extends "_layout.html" %} { % block content %} Контакты

Звоните нам на 0800 000 0000 или отправьте письмо на эл. адрес [email protected].

{ % endblock %}

{ { title } } { % block content %} { % endblock %}

Устанавливаем плагин gulp-nunjucks:

Npm install gulp-nunjucks --save

Создаем простой gulpfile.js в корневой папке проекта:

Var gulp = require("gulp") ; var nunjucks = require("nunjucks") ; var COMPILE = { SRC: "/src/**.html", DEST: "/dist’ } ; gulp.task("render", function() { return gulp.src(COMPILE.SRC) .pipe(nunjucks()) .pipe(gulp.dest(COMPILE.DEST)) ; } );

Запускаем процесс рендеринга:

Gulp render

Полученные в результате страницы HTML будут выглядеть так:

Главная Добро пожаловать

Разве это не самый лучший сайт в мире?

Контакты Контакты

Позвоните нам на 0800 000 0000 или отправьте письмо на эл. адрес [email protected].

Особенности Nunjucks

Полную документацию можно посмотреть здесь:

В этом разделе мы затронем некоторые из основ для иллюстрации некоторых ключевых функций Nunjucks.

Наследование шаблона

Наследование шаблона - это самый простой путь к многократному использованию шаблонов. При написании шаблона можно определить «блоки», которые дочерние шаблоны могут переопределить. (Это то, что мы делали выше в разделе { % содержание блока %} ).

Таким образом, дочерний шаблон может наследовать у родительского шаблона и заполнять множественные, дискретные блоки в этом шаблоне. На самом деле, «цепочка наследования» может быть настолько длинной, насколько вам этого хочется. Так, например, отдельный раздел новостей на веб-странице может наследовать шаблон «новостной сюжет» (и другие страницы также могут иметь свои шаблоны, например, «блоги», «фото галерея»), который, в свою очередь, наследует родительский (базовый) шаблон, содержащий общие разделы для всех страниц сайта.

Включения

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

Импортирование и макросы

Импортирование позволяет загружать шаблон и открывать любые переменные и макросы (функции), определенные в нем. Это может быть полезно для таких вещей, как создание функций для последовательного отображения полей формы... немного похоже на написание пользовательских тегов с помощью ColdFusion, например. Для наглядности давайте рассмотрим шаблон под названием forms.html , который выглядит так:

{ % macro field(name, value = "", type = "text") %} { % endmacro %} { % macro label(text) %} { { text } } { % endmacro %}

Мы можем импортировать этот шаблон и использовать его для быстрого рендеринга серии полей формы:

{ % import "forms.html" as forms %} { { forms.label("Username") } } { { forms.field("user") } } { { forms.label("Password") } } { { forms.field("pass", type = "password") } }

Это особенно полезно при использовании таких фреймфорков, как Foundation или Bootstrap , которые требуют разумного количества HTML и CSS сред - если у вас это получилось путем рендеринга в макросе, то код вашего шаблона будет гораздо проще. (Плюс, если ваш шаблон делает весь рендеринг через макросы, то он напрямую не привязан к фреймворку, что облегчает переключение фреймфорков, а также позволяет делать изменения, общие для всех полей формы определенного типа).

Логика – If / For / While

if проверяет состояние и используется для выборочного отображения контента или выполнения других операций:

{ % if variable %} Переменная есть, ура { % endif %} { % if user.authorised %} { % extends "logged-in.html" %} { % else %} { % extends "logged-out.html" %} { % endif %}

for зацикливает массивы:

Var messages = ["Необходимо ввести адрес эл. почты", "Пароль должен быть не короче 8 знаков"];

{ % for message in messages %} { { message } }
{ % endfor %}

Следующие шаги

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

Недавно пришлось столкнуться с уже готовым очень простым проектом, в котором было необходимо добавить вывод дерева категорий и товаров в них. Данные приходили в виде json через запросы к API. В арсенале на фронте был лишь jQuery, а привыкнув к шикарному шаблонизатору Angular’а, я не хотел вновь возвращаться к конкатенации строк, и подключать какой-то фреймворк естественно не имело смысла. Мне необходим был минимальный шаблонизатор, который мог бы повторять куски верстки подобно директивам angular, с условиями и переменными.

Вооружившись статьями авторов John Resig и Krasimir Tsonev , я приступил к работе. В итоге я получил функцию, которая могла компилировать шаблон типа:

min

Начнем с банального:

Var TemplateEngine = function(tpl, data) { // код шаблонизатора } var template = "

Hello, my name is . I\"m years old.

"; console.log(TemplateEngine(template, { name: "John", age: 23 }));

И как вы догадались, хотелось бы, что бы функция возвращала:

Hello, my name is John. I"m 23 years old.

Для обнаружения js переменных в тексте верстки воспользуемся регулярным выражением:

Var re = /]+)?%>/g

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

Есть множество способов как использовать в js регулярное выражение, мы воспользуемся методом.exec():

Var re = /]+)?%>/g; var match = re.exec(tpl);

Если мы сделаем console.log переменной match, то получим следующее:

[ "", " name ", index: 21, input: "

Hello, my name is . I\"m years old.

" ]

Как вы видите, наш масcив содержит лишь один элемент, а обработать нам нужно все, поэтому обернем всю логику в цикл while.

Var re = /]+)?%>/g, match; while(match = re.exec(tpl)) { console.log(match); }

Запустив данный код мы найдем обе переменные и .

Теперь самое интересное, нам необходимо заменить найденные переменные их значениями. Самое простое что приходит на ум это сделать простой.replace(). Но это бы работало с простыми json объектами с одним уровнем вложенности. На практике же мы имеем дело с объектами, которые имеют многоуровневую вложенность:

{ name: "John", profile: { age: 23 } }

И tpl.replace(match, data) будет уже не достаточным решением. Потому что когда мы напишем , код заменится на data[«profile.age»] и будет undefined. Так как способ замены нам не подходит, было бы очень круто, если бы между тегами можно было выполнять реальный js код.

Var template = "

Hello, my name is . I\"m years old.

Как избавиться от this я расскажу ниже.

Как же это реализовать? В статье Джона Резига он использует new Function для создания функции из строки.

Var fn = new Function("arg", "console.log(arg + 1);"); fn(2); // outputs 3

Для понимания, данный код можно рассмотреть как:

Var fn = function(arg) { console.log(arg + 1); } fn(2); // outputs 3

fn — реальная функция, которая выполняет другую функцию, которая передана как текстовый параметр.

Это именно то, что нам необходимо, нам необходимо шаблон преобразовывать в вид:

Return "

Hello, my name is " + this.name + ". I\"m " + this.profile.age + " years old.

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

Return "My skills:" + for(var index in this.skills) { + "" + this.skills + "" + }

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

Var r = ; r.push("My skills:"); for(var index in this.skills) { r.push(""); } return r.join("");

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

Var TemplateEngine = function(tpl, data) { var re = /]+)?%>/g, code = "var r=;\n", cursor = 0, match; var add = function(line) { code += "r.push("" + line.replace(/"/g, "\\"") + "");\n"; } while(match = re.exec(tpl)) { add(tpl.slice(cursor, match.index)); add(match); cursor = match.index + match.length; } add(tpl.substr(cursor, tpl.length - cursor)); code += "return r.join("");"; // /g, reExp = /(^()?(var|if|for|else|switch|case|break|{|}|;))(?:(?=\()|(?=)|$)/g, code = "var r=;\n", cursor = 0, match; var add = function(line, js) { js? (code += line.match(reExp) ? line + "\n" : "r.push(" + line + ");\n") : (code += line != "" ? "r.push("" + line.replace(/"/g, "\\"") + "");\n" : ""); return add; };

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

Var r=; r.push("My skills:"); for(var index in this.skills) { r.push(""); r.push(this.skills); r.push(""); } r.push(""); return r.join("");

И конечно же все это будет успешно скомпилировано.

Теперь для того, что бы шаблон не передавать строкой, а удобно его верстать в теле html страницы, мы поместим его между тегами:

В данном случае mime тип text/html для браузера будет неизвестным и он пропустит выполнение его. Но содержимое этих тегов мы легко можем получить с помощью.innerHTML.

Добавим теперь в начало нашего шаблонизатора проверку, если строка начинается с #, то это id нашего шаблона.

Var html = tpl.charAt(0) === "#" ? document.getElementById(tpl.substring(1)).innerHTML: tpl;

Если строка начинается не с #, значит мы передали сразу шаблон как строку.

И завершающим этапом для нас будет избавление от обращения к this перед каждой переменной, а для этого мы передадим имена переменных scope в параметре new Function, а значения их мы присвоим с помощью метода.apply().

Return new Function(name, code.replace(/[\r\t\n]/g, "")).apply(this,value);

Теперь наш шаблонизатор может принять шаблон типа:

min

при этом js будет выглядеть так:

Var scope = [ { name: "item 1", price: "10$", time: "30" }, { name: "item 1", price: "10$", time: "30" }, { name: "item 1", price: "10$", time: "30" } ]; var template = tpl("#tpl_id",scope);

Теперь содержимое переменной template будет скомпилированной версткой, которую мы можем вставить в любой участок кода.

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

Var tpl = function (str, data) { var name = , value = ; var html = str.charAt(0) === "#" ? document.getElementById(str.substring(1)).innerHTML: str; if (typeof(data) === "object") { for (var k in data) { name.push(k); value.push(data[k]); } } var re = /]+)?%>/g, reExp = /(^()?(var|if|for|else|switch|case|break|{|}|;))(?:(?=\()|(?=)|$)/g, code = "var r=;\n", cursor = 0, match; var add = function(line, js) { js? (code += line.match(reExp) ? line + "\n" : "r.push(" + line + ");\n") : (code += line != "" ? "r.push("" + line.replace(/"/g, "\\"") + "");\n" : ""); return add; }; while(match = re.exec(html)) { add(html.slice(cursor, match.index))(match, true); cursor = match.index + match.length; } add(html.substr(cursor, html.length - cursor)); code += "return r.join("");"; return new Function(name, code.replace(/[\r\t\n]/g, "")).apply(this,value); };

На тему шаблонизаторов статей написано великое множество, в том числе и здесь, на хабре.
Раньше мне казалось, что сделать что-нибудь своё - «на коленке» - будет очень сложно.
Но, случилось так, что прислали мне тестовое задание.
Напиши, мол, JavaScript шаблонизатор, вот по такому сценарию, тогда придёшь на собеседование.
Требование, конечно, было чрезмерным, и поначалу я решил просто игнорить.
Но из спортивного интереса решил попробовать.
Оказалось, что не всё так сложно.

Собственно, если интересно, то под катом некоторые заметки и выводы по процессу создания.

Для тех, кому только глянуть: the result , the cat .

Исходный шаблон - это JS String(), а данные это JS Object().
Блоки вида {% name %} body {% / %} , возможна неограниченная вложенность .
Если значение name является списком , то выводятся все элементы, иначе если не undefined, выводится один элемент.
Подстановки вида: {{ name }} .
В блоках и подстановках возможно использование точек в качестве имени, например {{.}} или {%.%} , где точка будет текущим элементом объекта верхнего уровня.
Есть ещё комментарии - это {# any comment w\wo multiline #} .
Для самих значений возможны фильтры, задаются через двоеточие: {{ .:trim:capitalize… }} .

Работать оно должно как:

Var str = render (tpl, obj);

Доказать:
+1 к самооценке .

UPD 2 : Сразу скажу, чтобы «чётко понять» что там и зачем, нужно начать это делать, желательно вместе с debugger"ом.
UPD 3 : Оно разобрано «на пальцах». Там есть ещё где «оптимизнуть». Но будет гораздо менее наглядно.

Приступим.

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

Для начала можно убрать комментарии, чтобы не отсвечивали:

// to cut the comments tpl = tpl.replace (/\{#[^]*?#\}/g, "");

Hint: [^] означает любой символ, * - сколько угодно раз.

Теперь можно подумать над тем, как будем парсить «чистый» результат.
Так как блоки возможны вложенные, предлагаю хранить всё в виде дерева.
На каждом уровне дерева будет JS Array (), элементы которого могут содержать аналогичную структуру.

Чтобы создать этот массив нужно отделить мух от котлет.
Для этого я воспользовался String.split() и String.match() .

Ещё нам понадобится глубокий поиск по строковому val имени внутри объекта obj .

Применённый вариант getObjDeep:

Итак, разделим строку на части parts и элементы matches:

// регулярка для парсинга: // цифробуквы, точка, подчеркивание, // двоеточие, слеш и минус, сколько угодно раз var ptn = /\{\%\s*+?\s*\%\}/g; // строковые куски var parts = tpl.split (ptn); // сами спички var matches = tpl.match (ptn);

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

// все блоки var blocks = ; // вложенности var curnt = ; if(matches){ // т.к. м.б. null var len = matches.length; for (var i = 0; i < len; i++) { // выкидываем {% и %}, и попутно делаем trim var str = matches[i].replace (/^\{\%\s*|\s*\%\}$/g, ""); if (str === "/") { // finalise block // ... } else { // make block // ... } // ...

Тут blocks - итоговый массив с выделенными блоками, а curnt - массив с текущей вложенностью.

На каждом шаге цикла мы определяем, что сейчас в str, начало блока или завершение.
Если начало блока, т.е. str !== "/" , то создаём новый элемент и push его в массив.
И ещё push его в curnt, т.к. нам необходимо понимать на каком мы уровне.
Попутно заносим в блок сами строки.
Соответственно, если у нас пустой curnt, то мы на нулевом уровне дерева.
Если curnt не пустой, то нужно заносить в nested элемент последнего curnt.

// длина текущей вложенности var cln = curnt.length; if (cln == 0) { // т.к. это верхний уровень, то просто в него и кладём текущий элемент blocks.push (struct); // пишем текущую вложенность, она же нулевая curnt.push (struct); } else { // нужно положить в nested текущего вложенного блока curnt.nest.push (struct); // теперь взять этот "последний" элемент и добавить его в curnt var last = curnt.nest.length - 1; curnt.push (curnt.nest [ last ]); }

Соотвественно, каждый элемент массива это, минимум:

Var struct = { // текущий obj для блока cnt: deeps(obj, str), // вложенные блоки nest: , // строка перед всеми вложенными блоками be4e: parts[ i + 1 ], // str -- строка, идущая после завершения данного // cnt -- блок-родитель, парсить строку будем в его рамках af3e: { cnt: null, str: "" } };

Т.к. у нас может быть ситуация, когда после блока есть что-нибудь ещё, то здесь af3e.str и должно быть строкой, идущей сразу после {% / %} текущего блока. Все необходимые ссылки мы проставим в момент завершения блока, так наглядней.
В этот же момент мы удаляем последний элемент элемент curnt.

If (str === "/") { // предыдущий элемент curnt // является родителем // завершившегося сейчас блока curnt .af3e = { cnt: (curnt [ cln - 2 ] ? curnt [ cln - 2 ].cnt: obj), str: parts[ i + 1 ] }; curnt.pop();

Теперь мы можем собрать одномерный массив, в котором будут все нужные подстроки с их текущими obj.
Для этого нужно «разобрать» получившийся blocks, учитывая что могут быть списки.
Понадобится немного рекурсии, но в целом это будет уже не так сложно.

// массив строк для парсинга элементарных частей блоков var stars = [ [ parts, obj ] ]; parseBlocks(blocks, stars);

Примерный вид parseBlocks()

Var pstr = ; var len = stars.length; for (var i = 0; i < len; i++) { pstr.push(parseStar (stars[i], stars[i])); } // Результат: return pstr.join ("");

Примерный вид parseStar()

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

Но моей целью было показать саму концепцию…

А результат, как уже было сказано в начале статьи, можно найти .
Итоговый пример .

Надеюсь, кому-нибудь пригодится.
Спасибо за внимание!

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

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

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

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

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

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

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

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

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

4366 раз(а) 3 Сегодня просмотрено раз(а)

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

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

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

И так мы хотим рендить шаблоны в 1 проход и иметь представление отдельно от логики. Обычно шаблонизаторы имеют подобный интерфейс.
template.Run("template url", { VarName:"VarValue" });
Ниже код с подробными комментариями (что и почему)
window.template = { //заружает представление TemplateGet: function (TemplateUrl) { // 1. Создаём новый объект XMLHttpRequest var xhr = new XMLHttpRequest(); // 2. Конфигурируем его: GET-запрос на URL "TemplateUrl" xhr.open("GET", TemplateUrl, false); // 3. Отсылаем запрос xhr.send(); if (xhr.status >= 200 && xhr.status < 400) { // вернуть результат return xhr.responseText; } else { // обработать ошибку alert(xhr.status + ": " + xhr.statusText); // пример вывода: 404: Not Found return ""; } }, //класс функций для рендинга Render:{ //а в этом классе мы напишем все функции рендера func:{ //рендит переменные vars: function(html, vars){ //ищем все переменные в шаблоне var $ = html.match(/{{var.(.*?)}}/g); //проверяем нашли ли что то if (Array.isArray($)) { //мы нашли переменные в шаблоне. Необходимо их все распарсить. $.forEach(function (item) { //item содержит найденую строку {{var.VarName}} //по этому мы должны распарсить ету строку дабы получить только VarName item = item.replace("{{var.", ""); item = item.replace("}}", ""); //у нас есть имя переменной. Пора проверить передали ли мы такую //и обработать ошибки if (vars === undefined){ //перенную не передали. //пишем об ошибке в консоль и заменяем её значение в шаблоне на null console.warn("Переменная "+item+" не найдена"); html = html.replace("{{var." + item + "}}", "null"); } else { //переменную мы нашли. Вставим ка её в шаблон html = html.replace("{{var." + item + "}}", vars); } }); } //удалим обьект с переменными delete vars; //вернём html return html; } }, //точка входа в рендер. Run:function(html, vars){ html = this.func.vars(html, vars); return html; } }, //точка входа Run: function (TemplateUrl, vars) { //загружаем шаблон var html = this.TemplateGet(TemplateUrl); //отправляем шаблон рендеру html = this.Render.Run(html, vars); //удаляем обьект с переменными. Он нам больше не нужен, а может занимать много места delete vars; //результат шаблонизатор вставит в document.getElementById("page").innerHTML = html; } }; //вызовем представление template.Run("test.tpl", { VarName: "test" });
А в test.tpl просто напишем
{{var.VarName}}

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

Обзор актуальных шаблонизаторов JS. Движки шаблонизации Javascript

Популярное