Шаблоны JavaScript

Шаблонизация JavaScript относится к на стороне клиента методу привязки данных , реализованному с помощью языка JavaScript . Этот подход стал популярным благодаря более широкому использованию JavaScript, расширению возможностей клиентской обработки и тенденции передавать вычисления веб-браузеру клиента на аутсорсинг. Популярными библиотеками шаблонов JavaScript являются AngularJS , Backbone.js , Ember.js , Handlebars.js , Vue.js и Mustache.js . Частой практикой является использование двойных фигурных скобок (например, {{key}}) для вызова значений данного ключа из файлов данных, часто JSON объектов .

Примеры

Во всех примерах используется внешний файл presidents.json со следующим содержанием

{  "presidents" : [      { "name": "Washington", "firstname": "George", "born": "1732", "death": "1799" },      { "name": "Lincoln", "firstname": "Abraham", "born": "1809", "death": "1865" }  ]}

Все примеры дадут следующий HTML- список :

• Вашингтон (1732-1799)
• Линкольн (1809-1865)

Библиотека	HTML-код	Объяснение
Шаблон ДНК	<link rel="stylesheet" type="text/css" href=".../template.css"/><script src=".../jquery.min.js"></script><script src=".../jquery.template.min.js"></script> ➊Our favorite presidents are:<ul id="target"> <li template="[presidents]" z-var="name ., born ., death ."> ${name} (${born}-${death}) </li></ul> ➋<script> $.getJSON('.../presidents.json', function(data) { $('#target').template(data); });</script> ➌	➊ Загрузите необходимые ресурсы, включая необходимый jQuery. ➋ HTML-код с template маркировка атрибутов для каждого подшаблона и z-var инструкции по замене. ➌ Загрузите данные JSON из presidents.json и примените данные к шаблону HTML с атрибутом id " target".
Усы.js	<script src=".../jquery.min.js"></script><script src=".../mustache.min.js"></script> ➊Our favorite presidents are:<ul id="target"></ul> ➋<script id="president-template" type="text/template"> {{#presidents}} <li>{{name}} ({{born}}-{{death}})</li> {{/presidents}}</script> ➌<script> $.getJSON('.../presidents.json', function(data) { var template = $('#president-template').html(); var info = Mustache.to_html(template, data); $('#target').html(info); });</script> ➍	➊ Загрузите необходимые библиотеки, здесь mustache.js и jQuery. ➋ HTML-код предоставляет «цель» для вставки сгенерированного содержимого. ➌ Предоставьте шаблон с именем «президент-шаблон». ➍ Last — это функция, получающая данные JSON и для каждого подпункта президента, захватывающая один шаблон и заполняющая его, чтобы окончательно выбрать цель HTML-страницы, добавляя к ней все содержимое.

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

См. также

• Сравнение движков веб-шаблонов

Ссылки

• Шаблоны JavaScript , Mozilla Developer Network, 2013 г.
• Басаварадж, Вина (2012), Шаблонизация на стороне клиента: усы, руль, пыль.js и многое другое , Linkedin.com
• Виллалобос, Рэй (2012), Введение в шаблоны JavaScript (видеоурок) с помощью Mustache.js , ViewSource.com, заархивировано из оригинала 13 мая 2013 г.
• Бёрджесс, Эндрю (2012), Рекомендации по работе с шаблонами JavaScript , Net.tutsplus.com
• Ландау, Брайан (2009), Сравнительный анализ библиотек шаблонов Javascript
• http://www.jquery4u.com/javascript/10-javascript-jquery-templates-engines/
• Сравнение с другими фреймворками , Vue.js , получено 11 декабря 2018 г.