В этой статье я дам обзор шаблонов JavaScript HTML и перечислю несколько элегантных решений. Я также скажу, какой из них я выбрал для своего проекта.
Что такое HTML-шаблоны?
Типичный вариант использования шаблонов в JavaScript — это отображение массива объектов на HTML-странице. Чтобы получить правильный взгляд, обычно прототипы в HTML, как должен выглядеть элемент массива и использовать фиктивные данные. Затем HTML превращается в
шаблон , назначая имена местам, в которые должны быть помещены фактические данные. Например:
<table>
<tr><td>First:</td><td>${first}</td></tr>
<tr><td>Last:</td><td>${last}</td></tr>
</table>
Механизм шаблонов имеет в качестве входных данных шаблон и элемент из массива данных и выдает в качестве выходных данных «объединенный» HTML: названные места заменяются данными. Можно ожидать, что HTML будет создан путем копирования этого прототипа и заполнения данных. Но, что удивительно, при сложной реализации DOM и эффективном разборе HTML, гораздо более быстрое решение заключается в создании текста HTML и вставке его в документ с помощью innerHTML. Соответственно, шаблон также передается в виде текста движку. Поскольку хранить шаблон в строковых литералах JavaScript немного неуклюже, часто используют следующий прием: если вы храните данные внутри тега скрипта, они не будут ни отображаться, ни анализироваться (что может привести к синтаксическим ошибкам), если вы дадите ему MIME-тип, который браузер не распознает.
<script id="template" type="text/my-engine">
// The actual template: a mix of HTML and named places.
</script>
Некоторые движки шаблонов напрямую принимают идентификатор такого элемента скрипта в качестве параметра при переводе данных в строку HTML, другие хотят, чтобы шаблон был текстовой строкой, которую можно создать следующим образом:
document.getElementById("template").innerHTML
Шаблонизаторы для JavaScript
Многие движки шаблонов были разработаны для JavaScript. Чтобы оценить их, несколько требований:
- Мета-элементы, такие как $ {first}, не должны использовать угловые скобки, потому что это противоречит окружающему HTML.
- Как можно больше логики должно быть определено в JavaScript, а не в шаблоне. Это достигается за счет того, что шаблон может вызывать внешние функции JavaScript. Если возможно, эти функции также следует хранить отдельно от данных, поскольку данные могут поступать из внешнего источника, такого как веб-служба.
Вот несколько хороших шаблонизаторов для JavaScript:
- Микро-шаблонизация Джона Резига : стала своего рода классикой в сообществе и отличается своей краткостью и простотой. Недостатки: использует угловые скобки, не очень мощные, использует оператор with, который в настоящее время исключен из JavaScript. Я подозреваю, что приведенный выше трюк со сценарием возник в Micro-Templating.
- jQuote2 : улучшенная версия Micro-Templating. Недостатки: угловые скобки.
- Усы : доступно для различных языков программирования. Хороший синтаксис, но мне не нравится смешивать данные и функции. Кроме того, в шаблоне можно вызывать только нулевые функции и напрямую не применять функцию к значению.
- Обычный шаблон : выглядит хорошо, мне нравится его синтаксис. Я только решил против этого из-за большего сообщества jQuery Templates (возможно, не сейчас, но определенно в будущем).
- JQuery Шаблоны : Благодаря поддержке Microsoft, JQuery Шаблоны уже стал официальным плагин JQuery и , таким образом , решение для шаблонирования в JQuery. Плюс его синтаксис хорош, и когда он переводит данные в HTML, можно передать два объекта: один с данными, а другой с вспомогательными функциями. Это держит логику подальше от данных.
Сложность использования многих шаблонизаторов заключается в том, как отображать разделители между элементами массива. В следующем посте «
Шаблоны jQuery: быстрый запуск и советы » я представляю решение, которое работает для каждого движка (при условии, что оно позволяет применять функцию к массиву), но показано в контексте шаблонов jQuery. ,
С http://www.2ality.com/2011/01/javascript-html-templating-overview-and.html