Was sind die Unterschiede zwischen Moustache.js und Handlebars.js?

333

Hauptunterschiede, die ich gesehen habe, sind:

  • Lenker fügt hinzu #if, #unless, #with, und#each
  • Lenker fügt Helfer hinzu
  • Lenkervorlagen werden kompiliert (Schnurrbart kann auch sein)
  • Lenker unterstützt Pfade
  • Ermöglicht die Verwendung von {{this}}in Blöcken (die den Zeichenfolgenwert des aktuellen Elements ausgeben)
  • Handlebars.SafeString() (und vielleicht einige andere Methoden)
  • Der Lenker ist zwei- bis siebenmal schneller
  • Moustache unterstützt invertierte Abschnitte (dh if !x ...)

(Bitte korrigieren Sie mich, wenn ich mit dem oben genannten falsch liege.)

Gibt es noch andere wichtige Unterschiede, die mir fehlen?

Chad Johnson
quelle
9
Hier ist auch ein Leistungstest zum Vergleich dieser beiden jsperf.com/dom-vs-innerhtml-based-templating/366 - es gibt bessere Alternativen;)
Mikko Ohtamaa
1
... und ich glaube, es ist #jeder, nicht #liste.
Shadow Man
@ ShadowCreeper Danke. Aktualisierter Beitrag.
Chad Johnson
1
Ich habe ausführlich darüber geschrieben und auch gezeigt, wie Sie etwas Ähnliches für super einfache Javascript-Vorlagen für dynamischen Inhalt tun können: http://stephentvedt.com/2013/09/23/html-templating-comparison/
Stephen Tvedt
3
Ich frage mich, wer die letzte Änderung (16.10.2014) akzeptiert hat. Es hätte eine Antwort sein sollen.
Walter Tross

Antworten:

125

Sie haben es ziemlich genau verstanden, aber es können auch Moustache-Vorlagen kompiliert werden.

Dem Schnurrbart fehlen Helfer und die fortgeschritteneren Blöcke, weil er danach strebt, logisch zu sein. Die benutzerdefinierten Helfer des Lenkers können sehr nützlich sein, führen jedoch häufig zu einer Logik in Ihren Vorlagen.

Moustache hat viele verschiedene Compiler (JavaScript, Ruby, Python, C usw.). Lenker in JavaScript begann, jetzt gibt es Projekte wie django-Lenker , handlebars.java , Lenker-ruby , lightncandy (PHP) und Lenker-objc .

Frontendbeauty
quelle
7
Vergessen Sie nicht Scandlebars, die Scala-Handlebars-Implementierung!
Code Whisperer
1
Die Ruby-Implementierung erfordert einen JavaScript-Interpreter, es handelt sich also wirklich nicht um einen Ruby-Compiler.
eltiare
72

Schnurrbart-Profis:

  • Sehr beliebte Wahl bei einer großen, aktiven Community.
  • Serverseitige Unterstützung in vielen Sprachen, einschließlich Java.
  • Vorlagen ohne Logik zwingen Sie hervorragend dazu, die Präsentation von der Logik zu trennen.
  • Eine saubere Syntax führt zu Vorlagen, die einfach zu erstellen, zu lesen und zu warten sind.

Schnurrbart Nachteile:

  • Etwas zu logisch: Grundlegende Aufgaben (z. B. Beschriften alternativer Zeilen mit unterschiedlichen CSS-Klassen) sind schwierig.
  • Die Ansichtslogik wird häufig auf den Server zurückgeschoben oder als "Lambda" (aufrufbare Funktion) implementiert.
  • Damit Lambdas auf Client und Server funktionieren, müssen Sie sie in JavaScript schreiben.

Lenkerprofis:

  • Vorlagen ohne Logik zwingen Sie hervorragend dazu, die Präsentation von der Logik zu trennen.
  • Eine saubere Syntax führt zu Vorlagen, die einfach zu erstellen, zu lesen und zu warten sind.
  • Kompilierte statt interpretierte Vorlagen.
  • Bessere Unterstützung für Pfade als Schnurrbart (dh tief in ein Kontextobjekt hineinreichen).
  • Bessere Unterstützung für globale Helfer als Schnurrbart.

Lenker Nachteile:

  • Erfordert serverseitiges JavaScript zum Rendern auf dem Server.

Quelle: Der clientseitige Vorlagen-Throwdown: Schnurrbart, Lenker, Dust.js und mehr

Faraz Kelhini
quelle
37
Re Moustache con "Ein bisschen zu logisch". Ich würde argumentieren, dass CSS mit alternierenden Zeilen mit einer CSS-Pseudoklasse wie tr:nth-child(even)und tr:nth-child(odd)oder durchgeführt werden sollte tr:nth-child(2n). Obwohl dies nur ein Beispiel ist, habe ich das Gefühl, dass Sie (meistens) etwas falsch machen, wenn etwas mit Moustache schwierig oder unangenehm ist. Es gibt einen besseren Ort dafür.
IAmNaN
3
Handlebars hat die Server-Site-Implementierung auch auf Java github.com/jknack/handlebars.java
UR6LAD
2
@IAmNaN das ist fair über n-te Kind .. es sei denn, Sie schreiben HTML für eine E-Mail, wo Sie nur Inline-CSS verwenden können - was es sehr schwierig macht, n-te Selektoren zu verwenden!
Dylan Watson
24

Ein subtiler, aber signifikanter Unterschied besteht in der Art und Weise, wie sich die beiden Bibliotheken dem Umfang nähern. Moustache greift auf den übergeordneten Bereich zurück, wenn im aktuellen Kontext keine Variable gefunden werden kann. Lenker geben eine leere Zeichenfolge zurück.

Dies wird in der GitHub README kaum erwähnt, wo es eine Zeile dafür gibt:

Der Lenker weicht geringfügig vom Schnurrbart ab, da standardmäßig keine rekursive Suche durchgeführt wird.

Wie dort erwähnt, gibt es jedoch ein Flag, mit dem sich Lenker genauso verhalten wie Schnurrbart - dies beeinträchtigt jedoch die Leistung.

Dies wirkt sich auf die Art und Weise aus, wie Sie #Variablen als Bedingungen verwenden können.

In Moustache können Sie dies beispielsweise tun:

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

Es bedeutet im Grunde "wenn eine Variable existiert und wahr ist, drucke eine Spanne mit der Variablen darin". Aber im Lenker müssten Sie entweder:

  • Verwenden Sie {{this}}stattdessen
  • Verwenden Sie einen übergeordneten Pfad, dh, {{../variable}}um zum relevanten Bereich zurückzukehren
  • Definieren Sie einen untergeordneten variableWert innerhalb des übergeordneten variableObjekts

Weitere Details dazu, wenn Sie möchten, hier .

Guypursey
quelle
23

HINWEIS: Diese Antwort ist veraltet. Es war zum Zeitpunkt der Veröffentlichung wahr, ist es aber nicht mehr.

Moustache hat Dolmetscher in vielen Sprachen, während Lenker nur Javascript ist.

KevBurnsJr
quelle
7

Ein weiterer subtiler Unterschied ist die Behandlung von Falschwerten in {{#property}}...{{/property}}Blöcken. Die meisten Schnurrbart Implementierungen werden nur obey JS falsiness hier nicht um den Block zu machen , wenn propertyist ''oder ‚0‘.

Lenker wird der Block für machen ''und 0, nicht aber andere falsy Werte. Dies kann beim Migrieren von Vorlagen zu Problemen führen.

Jakub Wasilewski
quelle
5

Ich habe das Gefühl, dass einer der genannten Nachteile für "Lenker" nicht mehr wirklich gültig ist.

Mit Handlebars.java können wir jetzt für Client und Server dieselben Vorlagensprachen verwenden. Dies ist ein großer Gewinn für große Projekte mit mehr als 1000 Komponenten, die für SEO ein serverseitiges Rendering erfordern

Schauen Sie sich https://github.com/jknack/handlebars.java an

Midart
quelle
3

- Zusätzlich zur Verwendung von "this" für Lenker und der verschachtelten Variablen innerhalb des Variablenblocks für Schnurrbart können Sie auch den verschachtelten Punkt in einem Block für Schnurrbart verwenden:

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