任何客户端haml解析器？答案

【问题标题】：Any client side haml parser?任何客户端haml解析器？
【发布时间】：2012-01-18 21:54:29
【问题描述】：

我希望使用 JavaScript 在客户端呈现我的 haml 代码。服务器端有很好的haml解析器，如Jade或haml.js，但我不知道客户端有任何haml解析器/解码器。

更新：Jade 几乎是 haml 现在支持客户端。

【问题讨论】：

找到 jquery-haml - 不是真的haml，但非常接近

【解决方案1】：

经过一番谷歌搜索后，我找到了"client-side-haml-js" github project。看起来它应该可以满足您的需求：

clientside-haml-js 是一个用 CoffeeScript 编写的编译器将 HAML 格式的文本模板编译成 Javascript 函数生成 HTML。它受到服务器端haml Javascript的启发项目，并且已被编写为与 Ruby 功能兼容服务器端 HAML，支持所有主流浏览器（IE 7+、Firefox 3.6+、 Chrome 10+、Safari），运行时依赖最小（仅 underscore.js、underscore.string 和 CoffeeScript（如果使用）模板中的 CoffeeScript）。

注意：haml 编译器需要带有 JSON 解析器的浏览器。为了像 IE7 这样的浏览器，您还需要包含 JSON 实现。看 http://www.json.org/ 了解更多详情。 JSON实现是可在https://github.com/douglascrockford/JSON-js获取。

来自他们的 github 页面的示例：

var fn = haml.compileStringToJs("%h1\n  %div\n    %p\n    %span");
var html = fn();

看起来它也支持类似于 jquery-templates 的 text/haml-template 方法：

<script type="text/haml-template" id="simple">
%h1
  %div
    %p
    %span
</script>

<script type="text/javascript">
    var fn = haml.compileHaml('simple');
    var html = fn();
</script>

【讨论】：

但是，在查看了他们的文档之后，它看起来像是从 HAML 字符串编译成发送 HTML 字符串的 JavaScript，所以性能不如预期。例如，与其编译成 HTML 字符串，不如编译成 JS API 来创建元素，例如 f.e. var div = document.createElement('div'); div.setAttribute(...); div.appendChild(...)。此外，使用 DocumentFragment 将带来更高的性能，如果他们制作或使用虚拟 dom 库，甚至会更好。 React 很好，因为 JSX 编译成创建虚拟 dom 的 JS 调用，速度更快。