В чем разница между Mustache.js и Handlebars.js?

Основные различия, которые я видел:

  • Руль добавляет #if, #unless, #with и #each
  • Руль добавляет помощников
  • Скомпилированы шаблоны руля (усы тоже можно)
  • Handlebars поддерживает пути
  • Позволяет использовать {{this}} в блоках (который выводит строковое значение текущего элемента)
  • Handlebars.SafeString() (и, возможно, некоторые другие методы)
  • Handlebars работает в 2–7 раз быстрее
  • Mustache поддерживает перевернутые разделы (т. Е. if !x ...)

(Пожалуйста, поправьте меня, если я ошибаюсь в приведенном выше.)

Есть ли какие-то другие важные отличия, которые мне не хватает?


person Chad Johnson    schedule 11.05.2012    source источник
comment
Вот также тест производительности, сравнивающий эти два jsperf.com/dom-vs-innerhtml -based-templating / 366 - есть альтернативы получше;)   -  person Mikko Ohtamaa    schedule 25.05.2012
comment
... и я считаю, что это #each, а не #list.   -  person Shadow Man    schedule 24.10.2013
comment
@ShadowCreeper Спасибо. Обновленный пост.   -  person Chad Johnson    schedule 21.12.2013
comment
Я подробно написал об этом, а также покажу, как вы можете сделать что-то подобное для супер базовых шаблонов javascript для динамического контента здесь: http://stephentvedt.com/2013/09/23/html-templating-comparison/   -  person Stephen Tvedt    schedule 12.04.2014
comment
Интересно, кто принял последнюю правку (2014-10-16). Это должен был быть ответ.   -  person Walter Tross    schedule 09.12.2014
comment
@StephenTvedt Вы смотрели HTML в своей статье? Это должно быть так трудно читать?   -  person Noctis Skytower    schedule 17.04.2019
comment
@NoctisSkytower Спасибо, что позвонили. Это должно было быть вызвано обновлением плагина. Я посмотрю на решение в эти выходные!   -  person Stephen Tvedt    schedule 18.04.2019
comment
Для элементов {{#-first}} и {{#-last}} мы должны заменить символ - на @.   -  person Millas    schedule 01.10.2019


Ответы (9)


Вы в значительной степени справились с этим, однако шаблоны Mustache также можно скомпилировать.

У Mustache отсутствуют помощники и более продвинутые блоки, потому что он стремится быть логичным. Пользовательские помощники Handlebars могут быть очень полезны, но часто в конечном итоге вводят логику в ваши шаблоны.

У Mustache много разных компиляторов (JavaScript, Ruby, Python, C и т. Д.). Handlebars начинались с JavaScript, теперь есть такие проекты, как django-handlebars, handlebars.java, handlebars-ruby, lightncandy (PHP) и handlebars-objc.

person frontendbeauty    schedule 01.08.2012
comment
Не забывайте Scandlebars, реализацию Scala-Handlebars! - person Code Whisperer; 27.02.2014
comment
Реализация Ruby требует интерпретатора JavaScript, поэтому на самом деле это не компилятор Ruby. - person eltiare; 15.07.2016

Плюсы усов:

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

Минусы усов:

  • Слишком без логики: основные задачи (например, пометить альтернативные строки разными классами CSS) сложны.
  • Логика представления часто передается обратно на сервер или реализуется как «лямбда» (вызываемая функция).
  • Чтобы лямбды работали на клиенте и сервере, вы должны написать их на JavaScript.

Плюсы руля:

  • Шаблоны без логики отлично справляются с задачей, заставляя вас отделить презентацию от логики.
  • Чистый синтаксис приводит к шаблонам, которые легко создавать, читать и поддерживать.
  • Скомпилированные, а не интерпретированные шаблоны.
  • Лучшая поддержка путей, чем усы (т.е. проникновение глубоко в объект контекста).
  • Лучшая поддержка глобальных помощников, чем усы.

Минусы руля:

  • Для рендеринга на сервере требуется серверный JavaScript.

Источник: Выборка шаблонов на стороне клиента: mustache, handlebars, dust.js и т. д.

person Faraz Kelhini    schedule 28.12.2013
comment
Re Moustache con Слишком бессмысленно. Я бы сказал, что чередование строк CSS должно выполняться с помощью псевдокласса CSS, такого как tr:nth-child(even) и tr:nth-child(odd) или tr:nth-child(2n). Хотя это всего лишь пример, я чувствую, что (в большинстве случаев), если с Усы что-то сложно или неудобно, значит, вы делаете это неправильно; для этого есть место получше. - person IAmNaN; 27.02.2015
comment
Handlebars также имеет реализацию серверного сайта на java github.com/jknack/handlebars.java - person UR6LAD; 25.11.2015
comment
@IAmNaN, это справедливо в отношении nth-child ... если вы не пишете html для электронной почты, где вы можете использовать только встроенный CSS, что очень затрудняет использование nth селекторов! - person Dylan Watson; 15.09.2019

Одно тонкое, но существенное различие заключается в том, как две библиотеки подходят к области видимости. Mustache вернется в родительскую область видимости, если не сможет найти переменную в текущем контексте; Handlebars вернет пустую строку.

Это почти не упоминается в README GitHub, где для этого есть одна строчка:

Handlebars немного отличается от Mustache, поскольку по умолчанию не выполняет рекурсивный поиск.

Однако, как там отмечено, есть флаг, заставляющий Handlebars вести себя так же, как и Mustache, но это влияет на производительность.

Это влияет на то, как вы можете использовать переменные # в качестве условных выражений.

Например, в Moustache вы можете сделать это:

{{#variable}}<span class="text">{{variable}}</span>{{/variable}}

Это в основном означает «если переменная существует и является правдивой, выведите диапазон с переменной в нем». Но в Handlebars вам придется:

  • вместо этого используйте {{this}}
  • используйте родительский путь, то есть {{../variable}}, чтобы вернуться в соответствующую область
  • определить дочернее variable значение в родительском variable объекте

Дополнительные сведения об этом, если они вам нужны, можно найти здесь.

person guypursey    schedule 02.11.2014

ПРИМЕЧАНИЕ. Этот ответ устарел. Это было правдой на момент публикации, но теперь это не так.

У Mustache есть переводчики на многих языках, а Handlebars - только на Javascript.

person KevBurnsJr    schedule 18.01.2014

Еще одно различие между ними - размер файла:

Чтобы увидеть преимущества производительности Handlebars.js, мы должны использовать предварительно скомпилированные шаблоны.

Источник: Обзор механизмов создания шаблонов JavaScript

person simhumileco    schedule 03.08.2016

Еще одно тонкое отличие - обработка ложных значений в {{#property}}...{{/property}} блоках. Большинство реализаций усов здесь просто подчиняются ложности JS, не отображая блок, если property равно '' или '0'.

Ручки будут отображать блок для '' и 0, но не для других ложных значений. Это может вызвать некоторые проблемы при переносе шаблонов.

person Jakub Wasilewski    schedule 19.11.2015

Я чувствую, что один из упомянутых минусов "Handlebars" больше не актуален.

Handlebars.java теперь позволяет нам использовать одни и те же языки шаблонов как для клиента, так и для сервера, что является большим преимуществом для крупных проектов с более чем 1000 компонентов, которые требуют рендеринга на стороне сервера для SEO.

Взгляните на https://github.com/jknack/handlebars.java.

person midart    schedule 17.11.2016

- Помимо использования this для ручек и вложенной переменной в блоке переменных для усов, вы также можете использовать вложенную точку в блоке для усов:

    {{#variable}}<span class="text">{{.}}</span>{{/variable}}
person Regina Serrambana    schedule 01.06.2015

введите описание изображения здесь

здесь вы можете увидеть некоторые тесты скорости различных усов и рулей. mustache кеширует шаблоны в памяти без каких-либо усилий со стороны пользователя, поэтому я запускаю его один раз. Это в 3 раза медленнее усов. Кеш файловой системы может замедлить разработку, и конечный результат может быть сопоставим с простым запуском. Не доверяйте слепо этим утверждениям, особенно скорости .. (PHP быстрые из-за включения opcache + jit)

person Michael Quad    schedule 30.06.2021