279

我見過的主要區別在於:Mustache.js和Handlebars.js有什麼區別?

  • 把手增加了#如果,#unless,#with和#each
  • 把手增加了助手
  • 把手模板編譯(鬍鬚可太)
  • 把手支持paths
  • 允許使用{{此}}在塊(其輸出當前項的字符串值)
  • Handlebars.SafeString()(和可能其他一些甲基的ods)
  • 把手是2 to 7 times faster
  • 小鬍子支持inverted sections(即, if !x ...

(請糾正我,如果我錯了上述。)

是否有我缺少任何其他主要的區別是什麼?

+8

這裏還有一個比較這兩個http://jsperf.com/dom-vs-innerhtml-based-templating/366的性能測試 - 有更好的選擇;) –

+1

...我相信它是#each,而不是#list 。 –

+0

@ShadowCreeper謝謝。更新後。 –

回答

109

你幾乎已經釘上了它,但是鬍子模板也可以被編譯。

鬍鬚缺少幫手和更先進的模塊,因爲它致力於成爲logicless。 Handlebars的自定義助手可能非常有用,但通常最終將邏輯引入到模板中。

髭有許多不同的編譯器(JavaScript中,紅寶石,Python和C等)。把手開始在JavaScript中,現在有喜歡django-handlebarshandlebars.javahandlebars-rubylightncandy (PHP)handlebars-objc項目。

+4

不要忘記Scandlebars,Scala-Handlebars的實現! –

+1

Ruby實現需要JavaScript解釋器,所以它實際上不是Ruby編譯器。 – eltiare

58

鬍子優點:

  • 非常流行的選擇有一個大的,活躍的社區。
  • 許多語言的服務器端支持,包括Java。
  • 無邏輯模板在強制您將演示文稿與邏輯分離方面做得非常出色。
  • 乾淨的語法導致易於構建,讀取和維護的模板。

髭缺點:

  • 甲太少邏輯更少:基本任務(例如標記具有不同的CSS類交替的行)是困難的。
  • 查看邏輯通常被推回到服務器或實現爲「lambda」(可調用函數)。
  • 要讓lambdas在客戶端和服務器上工作,必須使用JavaScript編寫它們。

把手優點:

  • 邏輯少模板做迫使你從邏輯單獨介紹了偉大的工作。
  • 乾淨的語法導致易於構建,讀取和維護的模板。
  • 編譯而不是解釋模板。
  • 更好地支持路徑而不是鬍鬚(即深入到上下文對象中)。
  • 更好地支持全球傭工而不是鬍子。

把手缺點:

  • 需要服務器端JavaScript呈現在服務器上。

來源:The client-side templating throwdown: mustache, handlebars, dust.js, and more

+27

Re小鬍子con「有點太無邏輯」。我認爲交替行CSS應該用一個CSS僞類來完成,比如'tr:nth-​​child(even)'和'tr:nth-​​child(odd)'或者'tr:nth-​​child(2n)' 。儘管這只是一個例子,但我認爲(大多數情況下)如果鬍鬚中有些東西是困難的或尷尬的,那麼你就錯了;它有一個更好的地方。 – IAmNaN

+2

Handlebars在java上也有服務器站點實現 https://github.com/jknack/handlebars.java – UR6LAD

18

注:這個答案已經過時。它在發佈時是對的,但不再是。

小鬍子有多種語言的翻譯,而把手只有Javascript。

+4

非常好的一點。 –

+7

這沒有錯,這只是一箇舊的答案。 – GeorgeChond

21

一個微妙但顯着的區別在於兩個庫接近範圍的方式。如果在當前上下文中找不到變量,則小鬍子將回退到父範圍;把手將返回一個空白字符串。

把手從鬍鬚稍微偏離,因爲它默認情況下不執行遞歸查詢:

這是在GitHub的README,那裏有它的一行很少被提及。

然而,正如指出的還有,有一個標誌,使把手以相同的方式髭行爲 - 但它會影響性能。

這會影響您使用#變量作爲條件的方式。

例如在鬍鬚,你可以這樣做:

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

這基本上意味着「如果變量存在且truthy,打印帶有可變跨度在裏面」。但在車把,你要麼必須:

  • 使用{{this}}代替
  • 使用父路徑,即,{{../variable}}找回了相關範圍
  • 在這個父variable對象中定義了一個孩子variable

更多細節,如果你想他們,here

2

- 除了使用「this」爲車把,和小鬍子可變塊內嵌套的變量,你也可以使用嵌套點的塊鬍子:

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

一個更微妙的差別在{{#property}}...{{/property}}塊中處理虛假值。如果property''或'0',那麼大多數小鬍子實現只會服從JS的虛假性,不會渲染該塊。

把手呈現的區塊爲''0,但不是其他falsy值。這會在遷移模板時造成一些麻煩。

+0

很高興知道! +1 –

3

我覺得對於「把手」心不是」所提到的缺點的人真的有效了。

Handlebars.java現在讓我們一起分享了客戶端和服務器這是一個巨大的勝利對於大型項目,需要服務器端渲染SEO

1000+成分相同的模板語言來看看https://github.com/jknack/handlebars.java