Quelles sont les différences entre Mustache.js et Handlebars.js?

333

Les principales différences que j'ai vues sont:

  • Guidons ajoute #if, #unless, #withet#each
  • Le guidon ajoute des aides
  • Les modèles de guidon sont compilés (la moustache peut aussi l'être)
  • Le guidon prend en charge les chemins
  • Permet l'utilisation de {{this}}blocs in (qui génère la valeur de chaîne de l'élément actuel)
  • Handlebars.SafeString() (et peut-être d'autres méthodes)
  • Le guidon est 2 à 7 fois plus rapide
  • La moustache prend en charge les sections inversées (c.-à-d. if !x ...)

(Veuillez me corriger si je me trompe avec ce qui précède.)

Y a-t-il d'autres différences majeures qui me manquent?

Chad Johnson
la source
9
Voici également un test de performance comparant ces deux jsperf.com/dom-vs-innerhtml-based-templating/366 - il existe de meilleures alternatives;)
Mikko Ohtamaa
1
... et je crois que c'est #each, pas #list.
Shadow Man
@ShadowCreeper Merci. Message mis à jour.
Chad Johnson
1
J'ai écrit à ce sujet en profondeur et montre également comment vous pouvez faire quelque chose de similaire pour les modèles javascript super basiques pour le contenu dynamique ici: http://stephentvedt.com/2013/09/23/html-templating-comparison/
Stephen Tvedt
3
Je me demande qui a accepté le dernier montage (2014-10-16). Cela aurait dû être une réponse.
Walter Tross

Réponses:

125

Vous l'avez assez bien compris, mais les modèles de moustache peuvent également être compilés.

Il manque des assistants et des blocs plus avancés à la moustache car elle s'efforce d'être sans logique. Les assistants personnalisés du guidon peuvent être très utiles, mais finissent souvent par introduire de la logique dans vos modèles.

Moustache a de nombreux compilateurs différents (JavaScript, Ruby, Python, C, etc.). Guidons a commencé en JavaScript, maintenant il y a des projets comme django-guidon , handlebars.java , guidon-rubis , lightncandy (PHP) et guidon-ObjC .

frontendbeauty
la source
7
N'oubliez pas Scandlebars, l'implémentation Scala-Handlebars!
Code Whisperer
1
L'implémentation Ruby nécessite un interpréteur JavaScript, donc ce n'est vraiment pas un compilateur Ruby.
eltiare
72

Avantages de la moustache:

  • Choix très populaire auprès d'une grande communauté active.
  • Prise en charge côté serveur dans de nombreuses langues, y compris Java.
  • Les modèles sans logique font un excellent travail pour vous forcer à séparer la présentation de la logique.
  • Une syntaxe propre conduit à des modèles faciles à créer, à lire et à entretenir.

Contre moustache:

  • Un peu trop sans logique: les tâches de base (par exemple étiqueter des lignes alternatives avec différentes classes CSS) sont difficiles.
  • La logique de vue est souvent repoussée sur le serveur ou implémentée en tant que "lambda" (fonction appelable).
  • Pour que lambdas fonctionne sur le client et le serveur, vous devez les écrire en JavaScript.

Pros du guidon:

  • Les modèles sans logique font un excellent travail pour vous forcer à séparer la présentation de la logique.
  • Une syntaxe propre conduit à des modèles faciles à créer, à lire et à entretenir.
  • Modèles compilés plutôt qu'interprétés.
  • Meilleure prise en charge des chemins que la moustache (c'est-à-dire atteindre profondément dans un objet de contexte).
  • Un meilleur support pour les assistants mondiaux que la moustache.

Contre guidon:

  • Nécessite JavaScript côté serveur pour effectuer le rendu sur le serveur.

Source: Le rejet de modèles côté client: moustache, guidon, dust.js, etc.

Faraz Kelhini
la source
37
Re Moustache con "Un peu trop sans logique". Je dirais que l'alternance des lignes CSS devrait être effectuée avec une pseudo-classe CSS telle que tr:nth-child(even)et tr:nth-child(odd)ou tr:nth-child(2n). Bien que ce ne soit qu'un exemple, je pense que (la plupart du temps) si quelque chose est difficile ou gênant avec Moustache, alors vous vous trompez; il y a un meilleur endroit pour ça.
IAmNaN
3
Handlebars a également l'implémentation du site du serveur sur java github.com/jknack/handlebars.java
UR6LAD
2
@IAmNaN c'est juste à propos de nth-child .. à moins que vous n'écriviez du HTML pour un e-mail, où vous ne pouvez utiliser que le CSS en ligne - ce qui rend très difficile l'utilisation des nth sélecteurs!
Dylan Watson
24

Une différence subtile mais significative réside dans la façon dont les deux bibliothèques abordent la portée. La moustache reviendra à la portée parent si elle ne trouve pas de variable dans le contexte actuel; Le guidon renverra une chaîne vide.

Ceci est à peine mentionné dans le GitHub README, où il y a une ligne pour cela:

Le guidon s'écarte légèrement de Moustache en ce qu'il n'effectue pas de recherche récursive par défaut.

Cependant, comme indiqué ici, il existe un indicateur pour que le guidon se comporte de la même manière que la moustache - mais cela affecte les performances.

Cela a un effet sur la façon dont vous pouvez utiliser des #variables comme conditionnelles.

Par exemple, dans Moustache, vous pouvez faire ceci:

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

Cela signifie essentiellement "si la variable existe et est véridique, imprimez une plage contenant la variable". Mais dans le guidon, vous devrez soit:

  • utiliser à la {{this}}place
  • utiliser un chemin parent, c'est- {{../variable}}à- dire pour revenir à la portée pertinente
  • définir une variablevaleur enfant dans l' variableobjet parent

Plus de détails à ce sujet, si vous le souhaitez, ici .

guypursey
la source
23

REMARQUE: cette réponse est obsolète. C'était vrai au moment de sa publication, mais ce n'est plus le cas.

Moustache a des interprètes dans de nombreuses langues, tandis que Handlebars est Javascript uniquement.

KevBurnsJr
la source
7

Une différence plus subtile est le traitement des valeurs de falsification en {{#property}}...{{/property}}blocs. La plupart des implémentations de moustache obéiront simplement à la fausseté JS ici, ne rendant pas le bloc si propertyest ''ou '0'.

Guidons sera rendu le bloc pour ''et 0, mais pas d' autres valeurs falsy. Cela peut entraîner des problèmes lors de la migration des modèles.

Jakub Wasilewski
la source
5

Je pense que l'un des inconvénients mentionnés pour "Guidon" n'est plus vraiment valable.

Handlebars.java nous permet désormais de partager les mêmes langages de modèle pour le client et le serveur, ce qui est une grande victoire pour les grands projets avec plus de 1000 composants qui nécessitent un rendu côté serveur pour le référencement

Jetez un œil à https://github.com/jknack/handlebars.java

midart
la source
3

—En plus d'utiliser "this" pour le guidon et la variable imbriquée dans le bloc variable pour la moustache, vous pouvez également utiliser le point imbriqué dans un bloc pour la moustache:

    {{#variable}}<span class="text">{{.}}</span>{{/variable}}
Regina Serrambana
la source