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

Эта статья была рецензирована Крисом Перри и Ритешем Кумаром . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!

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

Что такое шаблоны JavaScript?

Шаблоны JavaScript — это метод отделения структуры HTML от содержимого, содержащегося в нем. Системы шаблонов обычно вводят некоторый новый синтаксис, но с ними обычно очень просто работать, особенно если мы ранее использовали системы шаблонов где-то еще (например, Twig в PHP). Интересно отметить, что замена токенов обычно обозначается двойными фигурными скобками ( {{ ... }}

Когда мы должны использовать шаблоны JavaScript?

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

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

Как мы реализуем шаблоны JavaScript?

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

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

mustache.js

Усы — это многоязычная, не требующая логики система шаблонов. Реализация mustache.js — только одна из многих. Таким образом, как только мы привыкли к (очень простому) синтаксису, мы можем использовать его на разных языках программирования.

Ключевые моменты

• 9kb размер файла (маленький)
• просто
• Нет зависимостей
• Нет логики
• Нет предварительно скомпилированных шаблонов
• Язык программирования не зависит

пример

 <script id="template" type="x-tmpl-mustache">
  <p>Use the <strong>{{power}}</strong>, {{name}}!</p>
</script>

 
//Grab the inline template
var template = document.getElementById('template').innerHTML;

//Parse it (optional, only necessary if template is to be used again)
Mustache.parse(template);

//Render the data into the template
var rendered = Mustache.render(template, {name: "Luke", power: "force"});

//Overwrite the contents of #target with the rendered HTML
document.getElementById('target').innerHTML = rendered;

 <script id="template" type="text/x-handlebars-template">
  <p>Use the <strong>{{power}}</strong>, {{name}}!</p>
</script>

 
//Grab the inline template
var template = document.getElementById('template').innerHTML;

//Compile the template
var compiled_template = Handlebars.compile(template);

//Render the data into the template
var rendered = compiled_template({name: "Luke", power: "force"});

//Overwrite the contents of #target with the renderer HTML
document.getElementById('target').innerHTML = rendered;

 <script id="template" type="text/html">
  <p>
    Use the <strong data-content="power"></strong>, 
    <span data-content="name"></span>!
  </p>
</script>

 
//Call .loadTemplate() on the target container
$('#target').loadTemplate(
  //Specify the template container (or file name of external template)
  $('#template'),

  //Specify the data to render
  {
    name: "Luke",
    power: "force"
  }
);