Какой хороший язык шаблонов поддерживается в JavaScript?
Шаблоны - довольно здоровый бизнес для устоявшихся языков программирования, но есть ли хорошие, которые можно обработать в JavaScript?
Под «шаблоном» я подразумеваю документ, который принимает объект данных в качестве входных данных, вставляет данные в некоторый сериализованный язык разметки и выводит разметку. Хорошо известными примерами являются JSP, оригинальный PHP, XSLT.
Под "хорошим" я подразумеваю, что это декларативно и легко для автора HTML писать, что он надежен и что он также поддерживается на других языках. Что-то лучше, чем варианты, о которых я знаю. Некоторые примеры «не хорошо»:
Строковая математика:
element.innerHTML = "<p>Name: " + data.name
+ "</p><p>Email: " + data.email + "</p>";
явно слишком громоздкий, структура HTML не очевидна.
XSLT:
<p><xsl:text>Name: </xsl:text><xsl:value-of select = "//data/name"></p>
<p><xsl:text>Email: </xsl:text><xsl:value-of select = "//data/email"></p>
// Структурно это работает хорошо, но давайте посмотрим правде в глаза, XSLT сбивает разработчиков HTML с толку.
Trimpath:
<p>Name: ${data.name}</p><p>Email: ${data.email}</p>
// Это хорошо, но процессор поддерживается только в JavaScript, а язык вроде примитивный (http://code.google.com/p/trimpath/wiki/JavaScriptTemplateSyntax).
Мне бы хотелось, чтобы в браузер было перенесено подмножество JSP, ASP или PHP, но я этого не нашел.
Что в наши дни люди используют в JavaScript для создания шаблонов?
Приложение 1 (2008 г.)
Спустя несколько месяцев здесь было опубликовано множество рабочих языков шаблонов, но большинство из них нельзя использовать ни на каком другом языке. Большинство этих шаблонов нельзя использовать вне движка JavaScript.
Исключение составляет Microsoft - вы можете обрабатывать один и тот же ASP либо в браузере, либо в любом другом движке ASP. Это имеет свой собственный набор проблем с переносимостью, поскольку вы привязаны к системам Microsoft. Я отметил это как ответ, но все же меня интересуют более портативные решения.
Приложение 2 (2020)
Отбросив этот старый вопрос, прошло десять лет, и Mustache получил широкую поддержку на десятках языков. Теперь это текущий ответ на случай, если кто-то все еще его читает.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 16
Джон Ресиг имеет механизм создания мини-шаблонов JavaScript по адресу http://ejohn.org/blog/javascript-micro-templating/.
Я собирался разместить ссылку на его статью, когда увидел твой пост :)
Мне очень нравится двигатель Ресига. Проблема в том, что он никогда не может поддерживаться вне Javascript, потому что он полагается на встроенный Javascript для всего потока управления. (Во многом подобно тому, как JSP 1 полагался на встроенную Java, с тем же эффектом, который JSP 2 пытался исправить.)
Вот плагин jQuery, созданный на движке микро-шаблонов Джона Ресига: eslinstructor.net/vktemplate Это очень простой, маленький и мощный. И знаешь, что? с этим плагином вам не нужен язык шаблонов, просто используйте javascript :)
Tenjin http://www.kuwata-lab.com/tenjin/ Может быть то, что вы ищете. Не пользовался, но выглядит неплохо.
Я написал http://google-caja.googlecode.com/svn/changes/mikesamuel/string-interpolation-29-Jan-2008/trunk/src/js/com/google/caja/interp/index.html, который описывает систему шаблонов, которая привязывает строковую интерполяцию к javascript таким образом, чтобы предотвратить атаки XSS, выбирая правильную схему экранирования на основе предыдущего контекста.
В будущем ASP.NET AJAX 4.0 появится функциональность клиентских шаблонов.
http://encosia.com/2008/07/23/sneak-peak-aspnet-ajax-4-client-side-templating/
Кроме того, вы можете использовать библиотеку Microsoft AJAX (которая является частью JavaScript в ASP.NET AJAX) отдельно, без использования ASP.NET.
ExtJS имеет исключительный класс шаблонов под названием Ext.XTemplate: http://extjs.com/deploy/dev/docs/?class=Ext.XTemplate
Я бы не назвал это исключительным, шаблоны очень трудно читать!
Мне понравился используя jTemplates:
Наткнулся на это сегодня, правда не пробовал ...
Если вы используете Скрипт №, вы можете рассмотреть SharpTemplate, строго типизированный, сверхэффективный механизм создания шаблонов HTML.
Возможно, вы захотите проверить Усы - это действительно портативный и простой язык шаблонов с поддержкой javascript среди других языков.
+1 за название этого элегантного, популярного и широко доступного языка шаблонов. Помимо того, что он реализован на многих языках, ваши шаблоны Mustache будут везде одинаково выглядеть. (Сравните это с Tenijn, который выглядит близким соперником.)
+1 Moustache - чрезвычайно элегантный язык шаблонов, который показывает, что мощность не требует сложности.
Шаблоны закрытия - это довольно надежная система шаблонов от Google, работающая как для Javascript, так и для Java. У меня был хороший опыт их использования.
Вот один из них, реализованный в jQuery для языка шаблонов Smarty. http://www.balupton.com/sandbox/jquery-smarty/demo/
Одна впечатляющая особенность - поддержка динамических обновлений. Поэтому, если вы обновите переменную шаблона, она обновится в любом месте шаблона, где эта переменная используется. Довольно изящно.
Вы также можете подключиться к изменениям переменных, используя событие onchange. Так что это полезно, скажем, для выполнения эффектов или AJAX, когда, скажем, переменная "страница" изменяется ;-)
Я использую шаблоны Закрытие Google. http://code.google.com/closure/templates/docs/helloworld_js.html
Простое создание шаблонов, поддержка BiDi, автоматическое экранирование, оптимизированная для скорости. Кроме того, синтаксический анализ шаблона происходит на этапе сборки, поэтому он не замедляет работу клиента. Еще одно преимущество заключается в том, что вы можете использовать те же шаблоны из Java, если вам нужно сгенерировать свой HTML на сервере для пользователей с отключенным JavaScript.
Если вы используете Носорог (Java-реализация JavaScript), вы также можете запустить язык шаблонов JavaScript по вашему выбору на сервере.
Вы также точно знаете, что результаты шаблона сервера и браузера идентичны. (Если шаблон реализован на 2 языках, между реализациями могут быть небольшие различия.)
... Но теперь, 5 лет спустя (то есть в 2016 году), с Java 8 вместо этого вы будете использовать Nashorn, а не Rhino. Вот введение в Nashorn, и если вы немного прокрутите вниз, вы найдете пример языка шаблонов Nashorn + Mustahce: http://www.oracle.com/technetwork/articles/java/jf14-nashorn-2126515.html
(Лично я использую серверную часть React.js через Nashorn (но React не является языком шаблонов).)
Дистальные шаблоны http://code.google.com/p/distal немного похоже на вашу демонстрацию XSLT, но проще:
<p>Name: <span data-qtext = "data.name"></span></p>
<p>Email: <span data-qtext = "data.email"></span></p>
Возможно, интересным вариантом является https://github.com/rexxars/react-markdown, который представляет собой довольно интересный способ включения уценки в ваш веб-интерфейс на основе React. Я протестировал его, работает достаточно хорошо, хотя документы заставляют меня понять, что рендеринг HTML имеет некоторые проблемы в ветке 3.x. Тем не менее, это кажется приемлемым вариантом для определенных целей.
имейте в виду, что встроенный javascript совместим с ActionScript, что делает Flex доступным.