ТОП-10 шаблонизаторов для фронтенд-разработки
Шаблонизаторы применяют в разработке фронтенда для создания компонентов. Они позволяют создать более чистую и удобную для обслуживания кодовую базу, избавляя программиста от необходимости писать повторяющийся код несколько раз. В статье рассмотрим десять популярных во фронтенд-разработке шаблонизаторов и способы создания простых шаблонов. Шаблонизаторы позволяют использовать одну и ту же html-разметку в любых местах веб-приложения и вставлять в эту разметку свои данные. Возьмем для примера элемент интерфейса Яндекс Музыки. Перед нами типичный компонент страницы, который, в свою очередь, сам состоит из компонентов. В чем плюсы компонентов. Пример компонента приложения Яндекс музыка Такие компоненты можно легко сделать с помощью шаблонизаторов. Примечание Для работы с шаблонами могут понадобиться сборщики и node.js. Будьте внимательны, так как некоторые версии шаблонизатора могут не работать со старой версией или последним релизом node.js. Используйте команду 1. Создаем файл render.js. Пример файла рендера 2. Добавляем файл на html-страницу. Пример вывода шаблона на html-страницу Компилятор языка шаблонов Mustache, разработанный компанией Twitter. Используйте команду Или используйте ссылку на страницу Код шаблона Hogan.js Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера» Интересно, перейти к каналу Используйте команду Можно воспользоваться CDN — Шаблоны вставляются прямо в html-теги. Пример самого простого шаблона можно найти в документации Handlebars. 1. Написать файл шаблона и сохранить его с расширением Пример простого шаблона Handlebars 2. Добавить любым способом на html-страницу скрипт. Пример файла, который добавляет шаблон Handlebars на веб-страницу Используйте команду 1. Создаем шаблон с расширением Пример файла шаблона pug 2. Создаем js-файл и добавляем его любым способом на html-страницу. Пример файла, который добавляет шаблон Pug на веб-страницу Шаблонизатор сопоставляет объекты JSON с элементами DOM по идентификатору, классу и атрибутам привязки данных. Внимание Последние коммиты в репозитории шаблонизатора были 7 лет назад. Используйте команду 1. Создаем html-страницу с таким кодом. Пример фрагмента html-страницы 2. Создаем скрипт. Пример скрипта шаблона 3. На выходе получаем такой код. Пример результата работы шаблонизатора Transparency Движок шаблонов javascript для nodejs и браузеров. Используйте команду Пример простого шаблона здесь: 1. Создать шаблон. Пример шаблона doT.js 2. Скомпилировать файлы Пример компилятора шаблона doT.js Как пишут создатели, вдохновение при создании шаблонизатора они получали от handlebars и mustashe. Просто скачайте и распакуйте все файлы репозитория в свой проект. 1. Возьмите свой шаблон и проанализируйте его. Пример шаблона Walrus 2. Шаблон — это объект JavaScript. Он выводит некоторый текст. Пример файла, который выводит шаблон на страницу Библиотека шаблонов размером 1806 байт. Используйте тег Или команду Создать файл. Пример шаблона Templayed Быстрый механизм шаблонов JavaScript со встроенным синтаксисом CoffeeScript. Используйте команду Создать файл Пример шаблона ECT Разработчики шаблонизатора назвали его языком для генерации HTML в JavaScript. Скачайте репозиторий и распакуйте в свой проект. 1. Создать шаблон. Пример файла шаблона Pithy.js 2. Создать скрипт. Пример обработчика шаблона 3. Добавить шаблон на страницу. Пример результата работы шаблона *** 
Для чего нужны шаблонизаторы
1. mustache.js
Как установить в проект
npm install mustache --saveКак сделать простой шаблон
function renderHello() { let template = document.getElementById('template').innerHTML; let rendered = Mustache.render(template, { name: 'Luke' }); document.getElementById('target').innerHTML = rendered; }
<html> <body onload="renderHello()"> <div id="target">Loading...</div> <script id="template" type="x-tmpl-mustache"> Hello {{ name }}! </script> <script src="https://unpkg.com/mustache@latest"></script> <script src="render.js"></script> </body> </html> 2. Hogan.js
Как установить в проект
npm install hogan.js.<script src="https://twitter.github.com/hogan.js/builds/3.0.1/hogan-3.0.1.js"></script>Как сделать простой шаблон
var data = { screenName: "dhg", }; // объект, значение которого будет вставляться в шаблон. var template = Hogan.compile("Follow @{{screenName}}.");// компилирование шаблона var output = template.render(data);//рендеринг шаблона // prints "Follow @dhg." console.log(output);// вывод, который получится благодаря шаблону. 3. Handlebars.js
Как установить в проект
npm install handlebars или yarn add handlebarscdnjs.com/libraries/handlebars.jsКак сделать простой шаблон
.hbs.
//назовите файл data.hbs <p>{{data}}</p>
import data from './data.hbs'; let template = Handlebars.compile(data); export default data({ data: 'Handlebars', }); 4. Pug
Как установить в проект
npm install pug.Как сделать простой шаблон
.pug.
//- template.pug p #{name}'s Pug source code!
const pug = require('pug'); // Compile the source code const compiledFunction = pug.compileFile('template.pug'); // Render a set of data console.log(compiledFunction({ name: 'Timothy' })); // "<p>Timothy's Pug source code!</p>" // Render another set of data console.log(compiledFunction({ name: 'Forbes' })); // "<p>Forbes's Pug source code!</p>" 5. Transparency
Как установить в проект
npm install transparencyКак сделать простой шаблон
<div id="template"> <span class="greeting"></span> <span data-bind="name"></span> </div>
let hello = { greeting: 'Hello', name: 'world!' }; $('#template').render(hello);
<div id="template"> <span class="greeting">Hello</span> <span data-bind="name">world!</span> </div> 6. doT.js
Как установить в проект
npm install dot@betagithub.com/olado/doT/tree/master/examples/expressКак сделать простой шаблон
{{##def.macro:param: <div>{{=param.foo}}</div> #}} {{#def.macro:myvariable}} .def, .dot, .jst, по указанному пути.
var dots = require("dot").process({path: "./views"}); dots.mytemplate({foo:"hello world"}); 7. Walrus
Как установить в проект
Как сделать простой шаблон
var template = Walrus.Parser.parse( $( '#my-template' ).html( ) );
let htmlGoodness = template.compile( { data : 'foo bar baz' } ); 8. Templayed.js
Как установить в проект
<script src="path/to/templayed.js" type="text/javascript"></script> на вебстранице. npm install templayedКак сделать простой шаблон
template = "<ul>{{#names}}<li>{{../fullName}}</li>{{/names}}</ul>", variables = { names: [{firstName: "Paul", lastName: "Engel"}, {firstName: "Chunk", lastName: "Norris"}], fullName: function() { return this.lastName + ", " + this.firstName; } }; templayed(template)(variables); //=> "<ul><li>Engel, Paul</li><li>Norris, Chunk</li></ul>"; 9. ECT
Как установить в проект
npm install ect.Как сделать простой шаблон
var ECT = require('ect'); var renderer = ECT({ root : { layout: '<html><head><title><%- @title %></title></head><body><% content %></body></html>', page: '<% extend "layout" %><p>Page content</p>' } }); var html = renderer.render('page', { title: 'Hello, World!' }); 10. Pithy.js
Как установить в проект
Как сделать простой шаблон
html.div('#main', [ html.h1(null, 'Hello, world!'), html.img({src: 'foo.jpg'}) ]);
var html = require('pithy');
<div id="main"> <h1>Hello, world!</h1> <img src="foo.jpg"/> </div> Материалы по теме
- 0 views
- 0 Comment