JavaScript 支持什么好的模板语言？答案

【问题标题】：What good template language is supported in JavaScript?JavaScript 支持什么好的模板语言？
【发布时间】：2010-09-12 20:07:28
【问题描述】：

在成熟的编程语言中，模板是一项相当健康的业务，但有没有可以用 JavaScript 处理的好的业务？

“模板”是指接受数据对象作为输入、将数据插入某种序列化标记语言并输出标记的文档。著名的例子有JSP，原来的PHP，XSLT。

我所说的“好”是指它是声明性的，并且对于 HTML 作者来说很容易编写，它很健壮，并且它也被其他语言支持。比我知道的选项更好的东西。 “不好”的一些例子：

字符串数学：

element.innerHTML = "<p>Name: " + data.name
    + "</p><p>Email: " + data.email + "</p>";

显然太笨拙，HTML 结构不明显。

XSLT：

<p><xsl:text>Name: </xsl:text><xsl:value-of select="//data/name"></p>
<p><xsl:text>Email: </xsl:text><xsl:value-of select="//data/email"></p>

// 在结构上这很好用，但让我们面对现实吧，XSLT 让 HTML 开发人员感到困惑。

修剪路径：

<p>Name: ${data.name}</p><p>Email: ${data.email}</p>

// 这很好，但处理器只支持 JavaScript，而且语言有点原始（http://code.google.com/p/trimpath/wiki/JavaScriptTemplateSyntax）。

我希望看到将 JSP 或 ASP 或 PHP 的子集移植到浏览器，但我还没有找到。

如今人们在 JavaScript 中使用什么来制作模板？

附录 1 (2008)

几个月后，这里发布了许多可用的模板语言，但其中大多数不能用于任何其他语言。这些模板中的大多数都不能在 JavaScript 引擎之外使用。

Microsoft 的例外——您可以在浏览器或任何其他 ASP 引擎中处理相同的 ASP。这有其自身的一系列可移植性问题，因为您必须使用 Microsoft 系统。我将其标记为答案，但仍然对更便携的解决方案感兴趣。

附录 2（2020 年）

抛开这个老问题，十年过去了，Mustache 得到了数十种语言的广泛支持。现在是当前答案，以防有人仍在阅读此内容。

【问题讨论】：

请记住，内联 javascript 与 Actionscript 兼容，这使得 Flex 可用。

标签： javascript templates

【解决方案1】：

John Resig 在http://ejohn.org/blog/javascript-micro-templating/ 有一个迷你javascript 模板引擎

【讨论】：

当我看到你的帖子时，我正要发布他文章的链接:)
我非常喜欢 Resig 的引擎。问题是它永远不能在 Javascript 之外得到支持，因为它依赖于所有控制流的内联 Javascript。（很像 JSP 1 依赖内联 Java 的方式，达到同样的效果，JSP 2 试图纠正这种方式。）
这是一个基于 John Resig 微模板引擎的 jQuery 插件：eslinstructor.net/vktemplate 这是一个非常简单、小巧且功能强大的插件。你知道吗？使用此插件，您不需要任何模板语言，只需使用 javascript :)

【解决方案2】：

您可能想查看Mustache - 它是真正可移植且简单的模板语言，在其他语言中还支持 javascript。

【讨论】：

+1 用于命名这种优雅、流行、广泛可用的模板语言。除了它有多种语言的实现之外，你的 Mustache 模板在任何地方看起来都一样。（将其与 Tenijn 进行比较，后者看起来是一个势均力敌的竞争者。）
+1 Mustache 是一种极其优雅的模板语言，它表明强大的功能不需要复杂性。

【解决方案3】：

我今天遇到了这个，虽然我还没有尝试过......

http://beebole.com/pure/

【讨论】：

【解决方案4】：

Closure templates 是来自 Google 的一个相当强大的模板系统，它们适用于 Javascript 和 Java。我有很好的使用它们的经验。

【讨论】：

【解决方案5】：

ExtJS 有一个名为 Ext.XTemplate 的特殊模板类：http://extjs.com/deploy/dev/docs/?class=Ext.XTemplate

【讨论】：

我不会称之为特殊，模板很难阅读！

【解决方案6】：

我使用Google Closure 模板。 http://code.google.com/closure/templates/docs/helloworld_js.html

简单的模板，BiDi 支持，自动转义，针对速度进行了优化。此外，模板解析作为构建步骤发生，因此不会减慢客户端的速度。另一个好处是您可以使用 Java 中的相同模板，以防您需要在服务器上为禁用 JavaScript 的用户生成 HTML。

【讨论】：

【解决方案7】：

Tenjin http://www.kuwata-lab.com/tenjin/ 可能就是您要找的。没用过，不过看起来不错。

【讨论】：

【解决方案8】：

我写了http://google-caja.googlecode.com/svn/changes/mikesamuel/string-interpolation-29-Jan-2008/trunk/src/js/com/google/caja/interp/index.html，它描述了一个模板系统，该系统通过根据前面的上下文选择正确的转义方案来防止 XSS 攻击，从而将字符串插值固定到 javascript 上。

【讨论】：

【解决方案9】：

即将到来的 ASP.NET AJAX 4.0 将提供客户端模板功能。

http://encosia.com/2008/07/23/sneak-peak-aspnet-ajax-4-client-side-templating/

此外，您可以单独使用 Microsoft AJAX 库（它是 ASP.NET AJAX 的 JavaScript 部分），而无需使用 ASP.NET。

http://www.asp.net/ajax/downloads/

【讨论】：

【解决方案10】：

我很喜欢using jTemplates：

http://jtemplates.tpython.com/

【讨论】：

【解决方案11】：

这是一个用 jQuery 实现的 Smarty 模板语言。 http://www.balupton.com/sandbox/jquery-smarty/demo/

一个令人印象深刻的功能是支持动态更新。因此，如果您更新模板变量，它将更新模板中使用该变量的任何位置。很漂亮。

您还可以使用 onchange 事件挂钩变量更改。因此，当说变量“页面”发生变化时，这对于说执行效果或 AJAX 很有用;-)

【讨论】：

【解决方案12】：

QueryTemplates 演示：http://sandbox.meta20.net/querytemplates-js/demo.html

【讨论】：

【解决方案13】：

如果您使用Script#，您可能需要考虑SharpTemplate，这是一个强类型、超高效的HTML 模板引擎。

【讨论】：

【解决方案14】：

远端模板http://code.google.com/p/distal 有点像您的 XSLT 演示，但更简单：

<p>Name: <span data-qtext="data.name"></span></p>
<p>Email: <span data-qtext="data.email"></span></p>

【讨论】：

【解决方案15】：

如果您使用Rhino（JavaScript 的 Java 实现），您也可以在服务器上运行您选择的 JavaScript 模板语言。

您也肯定知道服务器和浏览器模板的结果是相同的。（如果模板以 2 种语言实现，实现之间可能会有一些细微差别。）

...但是现在 5 年后（即 2016 年），使用 Java 8，您将使用 Nashorn，而不是 Rhino。这是 Nashorn 的介绍，如果您向下滚动一点，您会发现 Nashorn + Mustahce 模板语言的示例： http://www.oracle.com/technetwork/articles/java/jf14-nashorn-2126515.html

（我个人通过 Nashorn 使用 React.js 服务器端（但 React 不是模板语言）。）

【讨论】：

【解决方案16】：

一个可能有趣的选择是https://github.com/rexxars/react-markdown，这是一种在基于 React 的 Web UI 中包含 Markdown 的相当有趣的方式。我已经对其进行了测试，效果相当不错，尽管文档让我了解到 HTML 渲染在 3.x 分支中遇到了一些问题。不过，对于某些用途来说，这似乎是一个可行的选择。

【讨论】：