Mustache.js和Handlebars.js有什么区别?

我看到的主要差异是:

  • 把手增加#if,#unless,#with和#each
  • 把手增加了帮手
  • 把手模板被编译(小胡子也可以)
  • 把手支持path
  • 允许在块中使用{{this}}(输出当前项目的string值)
  • Handlebars.SafeString()(也许还有其他一些方法)
  • 把手速度快2到7倍
  • 小胡子支持倒置部分 (即if !x ...

(请纠正我,如果我错了上述。)

还有什么其他的重大差异,我失踪了?

你几乎已经钉上了它,但是胡须模板也可以被编译。

小胡子失踪的帮手和更先进的块,因为它努力无逻辑。 Handlebars的自定义帮助程序可能非常有用,但通常最终会将逻辑引入到模板中。

小胡子有许多不同的编译器(JavaScript,Ruby,Python,C等)。 把手从JavaScript开始,现在有像Django 句柄 , handlebars.java , handlebars-ruby , lightncandy(PHP)和handlebars-objc项目 。

小胡子专业人员:

  • 非常stream行的select与一个大的,活跃的社区。
  • 服务器端支持多种语言,包括Java。
  • 无逻辑模板在强制您将演示文稿与逻辑分离方面做得非常好。
  • 干净的语法会导致易于构build,读取和维护的模板。

小胡子缺点:

  • 有点太无逻辑:基本的任务(例如,标签与不同的CSS类交替行)是困难的。
  • 查看逻辑通常被推回到服务器或实现为“lambda”(可调用函数)。
  • 要让lambdas在客户端和服务器上工作,必须使用JavaScript编写它们。

把手优点:

  • 无逻辑模板在强制您将演示文稿与逻辑分离方面做得非常好。
  • 干净的语法会导致易于构build,读取和维护的模板。
  • 编译而不是解释模板。
  • 更好地支持path而不是胡须(即深入到上下文对象)。
  • 更好地支持全球帮手而不是胡子。

把手缺点:

  • 需要在服务器上呈现服务器端JavaScript。

资料来源: 客户端模板提示:小胡子,把手,dust.js等等

两个图书馆接近范围的方式有一个微妙而显着的差异。 如果在当前上下文中找不到variables,则小胡子将回退到父范围; 把手将返回一个空白的string。

这在GitHub自述文件中几乎没有提及,其中有一行:

把手与小胡子略有不同,默认情况下它不会执行recursion查找。

然而,正如那里所指出的那样,有一个标志使得把手与胡须一样的行为 – 但它影响性能。

这对您可以使用#variables作为条件的方式有影响。

例如在小胡子里,你可以这样做:

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

它基本上意味着“如果variables存在并且是真的,那么用它中的variables打印一个范围”。 但是在把手里,你要么必须:

  • 改用{{this}}
  • 使用父path,即{{../variable}}返回到相关范围
  • 在父variable对象中定义一个子variable

关于这个的更多细节,如果你想要的话, 在这里 。

注意: 这个答案已经过时了。 当时它是真的,但不再是。

小胡子有很多语言的翻译,而把手只有Javascript。

他们之间的另一个区别是文件的大小:

  • Moustache.js有9kb,
  • 如果使用预编译模板 ,Handlebars.js有86kb,或者18kb。

为了看到Handlebars.js的性能优势,我们必须使用预编译模板。

来源: JavaScript模板引擎的概述

另一个细微差别是{{#property}}...{{/property}}块中的虚假值的处理。 大多数小胡子的实现只会服从JS的虚假,如果property是“0”或“0”,则不会渲染块。

把手渲染''和“ 0 ''的块,但不会产生其他的错误值。 这会在迁移模板时造成一些麻烦。

我觉得其中一个提到的“把手”的缺点是不是真的有效了。

Handlebars.java现在允许我们为客户端和服务器共享相同的模板语言,这对于拥有超过1000个组件的大型项目来说是一个巨大的胜利,这些组件需要对SEO进行服务器渲染

看看https://github.com/jknack/handlebars.java

除了使用“this”作为把手,以及用于胡须的variables块中的嵌套variables之外,还可以在胡须块中使用嵌套点:

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