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

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?

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 .

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

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 .

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.

Kolejną różnicą między nimi jest rozmiar pliku:

• Mustache.js ma 9kb,
• Handlebars.js ma 86 KB lub 18 KB w przypadku korzystania ze wstępnie skompilowanych szablonów .

Aby zobaczyć korzyści płynące z Handlebars.js, musimy użyć wstępnie skompilowanych szablonów.

Źródło: Przegląd silników szablonów JavaScript

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.

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

— 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}}