web-dev-qa-db-ja.com

Mustache.jsとHandlebars.jsの違いは何ですか？

私が見た主な違いは以下のとおりです。

  • Handlebarsは#if、#unless、#with、および#eachを追加します
  • ハンドルバーがヘルパーを追加
  • ハンドルバーのテンプレートがコンパイルされます（口ひげもすることができます）
  • ハンドルバーは パス をサポートします
  • ブロック内での{{this}}の使用を許可します（これは現在のアイテムの文字列値を出力します）
  • Handlebars.SafeString()（そしておそらく他の方法）
  • ハンドルバーは 2〜7倍速い
  • 口ひげのサポート 反転セクション （すなわちif !x ...）

（上記に問題がある場合は訂正してください。）

私が見逃している他の大きな違いはありますか？

handlebars.jsmustacheclient-side-templatingtemplating-engine
314
Chad Johnson

あなたはほとんどそれを釘付けにしました、しかし、口ひげのテンプレートもコンパイルすることができます。

口ひげは、それが論理的であるように努めるので、ヘルパーおよびより高度なブロックを欠いています。ハンドルバーのカスタムヘルパーは非常に便利ですが、多くの場合テンプレートにロジックを導入することになります。

Moustacheには、さまざまなコンパイラ（JavaScript、Ruby、Python、Cなど）があります。ハンドルバーはJavaScriptで始まりました。現在は Django-handlebars 、 handlebars.Java 、 handlebars-Ruby 、 lightncandy（PHP）のようなプロジェクトがあります。 、および handlebars-objc 。

120
frontendbeauty

口ひげのプロ：

  • 大規模で活発なコミュニティで非常に人気のある選択。
  • Javaを含む多くの言語でのサーバー側のサポート。
  • ロジックのないテンプレートは、プレゼンテーションをロジックから切り離すことを強いるという大きな役割を果たします。
  • 簡潔な構文は、構築、読み取り、および保守が容易なテンプレートにつながります。

口ひげの短所：

  • ややロジックが少ない：基本的なタスク（例：異なるCSSクラスで代替行にラベルを付ける）は難しい。
  • ビューロジックは多くの場合、サーバーにプッシュバックされるか、「ラムダ」（呼び出し可能関数）として実装されます。
  • ラムダがクライアントとサーバーで機能するには、それらをJavaScriptで記述する必要があります。

ハンドルバー長所：

  • ロジックのないテンプレートは、プレゼンテーションをロジックから切り離すことを強いるという大きな役割を果たします。
  • 簡潔な構文は、構築、読み取り、および保守が容易なテンプレートにつながります。
  • 解釈されたテンプレートではなくコンパイルされたテンプレート。
  • 口ひげよりもパスのサポートが優れています（つまり、コンテキストオブジェクトの奥深くまで到達している）。
  • 口ひげよりもグローバルなヘルパーのためのより良いサポート。

ハンドルバーの短所：

  • サーバー上でレンダリングするにはサーバーサイドJavaScriptが必要です。

出典： クライアントサイドのテンプレート化のスローダウン：口ひげ、ハンドルバー、dust.jsなど

67
Faraz Kelhini

1つの微妙ではあるが大きな違いは、2つのライブラリーがスコープにアプローチする方法にあります。現在のコンテキスト内で変数が見つからない場合、Moustacheは親スコープにフォールバックします。ハンドルバーは空白の文字列を返します。

これについてはGitHubのREADMEにほとんど記載されていません。

ハンドルバーは、デフォルトでは再帰的ルックアップを実行しないという点でMustacheとは少し異なります。

しかし、そこに記されているように、HandlebarsをMoustacheと同じように振る舞わせるフラグがあります - しかしそれはパフォーマンスに影響します。

これは、#変数を条件文として使用する方法に影響します。

例えばMoustacheではこれができます：

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

それは基本的に「変数が存在し、真実であれば、その中の変数で範囲を表示する」という意味です。しかしハンドルバーでは、どちらかをしなければならないでしょう：

  • 代わりに{{this}}を使用してください
  • 関連するスコープに戻るには、親パス、つまり{{../variable}}を使用します
  • 親のvariableオブジェクト内に子のvariable値を定義する

この詳細については、必要に応じて ここ をご覧ください。

24
guypursey

注：この答えは時代遅れです。投稿された時点では真実でしたが、もはやそうではありません。

Mustacheは多くの言語の通訳を持っていますが、HandlebarsはJavascriptのみです。

20
KevBurnsJr

それらの間のもう一つの違いはファイルのサイズです：

Handlebars.jsのパフォーマンス上の利点を確認するには、プリコンパイル済みテンプレートを使用する必要があります。

出典： JavaScriptテンプレートエンジンの概要

10
simhumileco

もう1つ微妙な違いは、{{#property}}...{{/property}}ブロック内の偽の値の扱いです。 propertyが''または '0'の場合、ほとんどのヒゲ実装はここではJSの偽造に従うだけで、ブロックをレンダリングしません。

ハンドルバーwill''と0のブロックをレンダリングしますが、他の偽の値はレンダリングしません。これはテンプレートを移行するときに問題を引き起こす可能性があります。

8
Jakub Wasilewski

私は、 "ハンドルバー"に関する上記の短所の1つが、もはや有効ではないと感じています。

Handlebars.Javaにより、クライアントとサーバーの両方で同じテンプレート言語を共有できるようになりました。これは、SEO用にサーバーサイドでのレンダリングが必要な1000以上のコンポーネントを含む大規模プロジェクトにとって大きなメリットです

を見てください https://github.com/jknack/handlebars.Java

5
midart

- ハンドルバーに "this"を使用し、口ひげ用に変数ブロック内のネストされた変数を使用することに加えて、口ひげ用にブロック内のネストされたドットを使用することもできます。

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