Jakie są różnice między Mustache.js i Handlebars.js?

333

Główne różnice, które widziałem to:

  • Kierownice dodaje #if, #unless, #with, i#each
  • Kierownica dodaje pomocników
  • Szablony kierownicy są kompilowane (wąsy też mogą być)
  • Kierownica obsługuje ścieżki
  • Pozwala na użycie {{this}}w blokach (które generują wartość ciągu bieżącego elementu)
  • Handlebars.SafeString() (i może jakieś inne metody)
  • Kierownica jest 2 do 7 razy szybsza
  • Wąsy obsługują sekcje odwrócone (tj. if !x ...)

(Proszę mnie poprawić, jeśli się mylę z powyższym.)

Czy brakuje mi innych istotnych różnic?

Chad Johnson
źródło
9
Oto także test wydajności porównujący te dwa jsperf.com/dom-vs-innerhtml-based-templating/366 - są lepsze alternatywy;)
Mikko Ohtamaa
1
... i wierzę, że to #each, a nie #list.
Shadow Man
@ShadowCreeper Thanks. Zaktualizowany post.
Chad Johnson,
1
Pisałem o tym dogłębnie, a także pokazuję, jak możesz zrobić coś podobnego dla super prostych szablonów javascript dla dynamicznej zawartości tutaj: http://stephentvedt.com/2013/09/23/html-templating-comparison/
Stephen Tvedt
3
Zastanawiam się, kto zaakceptował ostatnią edycję (16.10.2014). To powinna być odpowiedź.
Walter Tross,

Odpowiedzi:

125

Prawie go przybiłeś, ale szablony wąsów można również skompilować.

Wąsy brakuje pomocników i bardziej zaawansowanych bloków, ponieważ stara się być bez logiki. Niestandardowe pomocniki kierownicy mogą być bardzo przydatne, ale często kończą się wprowadzaniem logiki do szablonów.

Wąsy mają wiele różnych kompilatorów (JavaScript, Ruby, Python, C itp.). Kierownice zaczęły się w JavaScript, teraz istnieją projekty takie jak django-handlebars , handlebars.java , handlebars-ruby , lightncandy (PHP) i handlebars-objc .

frontendbeauty
źródło
7
Nie zapomnij o Scandlebars, implementacji Scala-Handlebars!
Zaklinacz kodów
1
Implementacja Ruby wymaga interpretera JavaScript, więc tak naprawdę nie jest to kompilator Ruby.
eltiare
72

Zalety wąsów:

  • Bardzo popularny wybór wśród dużej, aktywnej społeczności.
  • Obsługa po stronie serwera w wielu językach, w tym Java.
  • Bezlogiczne szablony świetnie się zmuszają do oddzielenia prezentacji od logiki.
  • Czysta składnia prowadzi do szablonów, które można łatwo budować, czytać i utrzymywać.

Wady wąsów:

  • Trochę zbyt mało logiczne: podstawowe zadania (np. Oznaczanie alternatywnych wierszy różnymi klasami CSS) są trudne.
  • Logika wyświetlania jest często wypychana z powrotem na serwer lub implementowana jako „lambda” (funkcja wywoływalna).
  • Aby lambdy działały na kliencie i serwerze, musisz je napisać w JavaScript.

Zalety kierownicy:

  • Bezlogiczne szablony świetnie się zmuszają do oddzielenia prezentacji od logiki.
  • Czysta składnia prowadzi do szablonów, które można łatwo budować, czytać i utrzymywać.
  • Skompilowane, a nie interpretowane szablony.
  • Lepsze wsparcie dla ścieżek niż wąsy (tj. Sięganie głęboko w obiekt kontekstowy).
  • Lepsze wsparcie dla globalnych pomocników niż wąsy.

Wady kierownicy:

  • Wymaga JavaScript po stronie serwera do renderowania na serwerze.

Źródło: Rzutowanie szablonów po stronie klienta: wąsy, kierownica, dust.js i więcej

Faraz Kelhini
źródło
37
Re Mustache z „Trochę za mało logicznym”. Argumentowałbym, że naprzemienne wiersze CSS powinny być wykonywane za pomocą pseudoklasy CSS, takiej jak tr:nth-child(even)i tr:nth-child(odd)lub tr:nth-child(2n). Chociaż to tylko przykład, czuję, że (przez większość czasu) jeśli coś jest trudne lub niezręczne z Wąsem, to robisz to źle; jest na to lepsze miejsce.
IAmNaN
3
Handlebars ma również implementację strony serwera na java github.com/jknack/handlebars.java
UR6LAD
2
@IAmNaN to uczciwe podejście do n-tego dziecka ... chyba że piszesz HTML dla e-maila, w którym możesz używać tylko wbudowanego css - co bardzo utrudnia korzystanie z n-tych selektorów!
Dylan Watson,
24

Jedną subtelną, ale znaczącą różnicą jest sposób, w jaki obie biblioteki podchodzą do zakresu. Wąsy powrócą do zakresu nadrzędnego, jeśli nie będą w stanie znaleźć zmiennej w bieżącym kontekście; Kierownica zwróci pusty ciąg.

Jest to ledwie wspomniane w GITHub README, gdzie jest jedna linia:

Kierownica nieznacznie odbiega od wąsów, ponieważ domyślnie nie wykonuje wyszukiwania rekurencyjnego.

Jednak, jak wspomniano, istnieje flaga, dzięki której Kierownica zachowuje się tak samo jak Wąsy - ale wpływa to na wydajność.

Ma to wpływ na sposób używania #zmiennych jako warunków warunkowych.

Na przykład w Mustache możesz to zrobić:

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

Zasadniczo oznacza to „jeśli zmienna istnieje i jest zgodna z prawdą, wypisz zakres z tą zmienną”. Ale w kierownicach musisz albo:

  • użyj {{this}}zamiast tego
  • użyj ścieżki nadrzędnej, tzn. {{../variable}}aby wrócić do odpowiedniego zakresu
  • zdefiniuj variablewartość potomną w variableobiekcie nadrzędnym

Więcej informacji na ten temat, jeśli chcesz, tutaj .

guypursey
źródło
23

UWAGA: Ta odpowiedź jest nieaktualna. Było to prawdą w momencie publikacji, ale już nie jest.

Wąsy mają tłumaczy w wielu językach, podczas gdy Kierownica jest tylko Javascript.

KevBurnsJr
źródło
7

Jeszcze jedną subtelną różnicą jest traktowanie wartości fałszowania w {{#property}}...{{/property}}blokach. Większość implementacji wąsów będzie po prostu przestrzegać fałszywości JS, nie renderując bloku, jeśli propertyjest ''lub „0”.

Kierownice będzie renderować bloku na ''i 0, ale nie inne wartości falsy. Może to powodować problemy podczas migracji szablonów.

Jakub Wasilewski
źródło
5

Wydaje mi się, że jeden ze wspomnianych wad „Kierownic” nie jest już naprawdę ważny.

Handlebars.java pozwala nam teraz udostępniać te same języki szablonów zarówno klientowi, jak i serwerowi, co jest dużą wygraną dla dużych projektów z ponad 1000 komponentów, które wymagają renderowania na serwerach dla SEO

Spójrz na https://github.com/jknack/handlebars.java

środek
źródło
3

— Oprócz użycia „this” dla kierownicy i zagnieżdżonej zmiennej w bloku zmiennych dla wąsów, możesz także użyć zagnieżdżonej kropki w bloku dla wąsów:

    {{#variable}}<span class="text">{{.}}</span>{{/variable}}
Regina Serrambana
źródło