任何返回DOM片段的JavaScript模板库/系统/引擎/技术？

Question

我必须制作一个高速的web应用程序，我需要一个JavaScript模板库/系统/引擎/技术，它返回一个DOM片段，而不是一个包含HTML的字符串。

当然，它应该有一些类似于雷西格(氏)微模板的语言

在编译之后，我期待着这样的事情：

function myTemplate(dataToRender){
    var fragment = document.createDocumentFragment();
    fragment = fragment.appendChild(document.createElement('h1'));
    fragment.appendChild(document.createTextNode(dataToRender.title));
    fragment = fragment.parentNode;
    fragment = fragment.appendChild(document.createElement('h2'));
    fragment.appendChild(document.createTextNode(dataToRender.subTitle));
    fragment = fragment.parentNode;
    return fragment;
}

有选择吗？

编辑:模板函数不应该连接HTML字符串。它会降低速度。JQuery模板在内部处理字符串。所以Resig的微型模板。

Edit2:我刚刚在jsPerf上做了一个基准测试。这是我在JavaScript中做的第一个基准测试，所以有些人会检查它(我不确定它是否正确)。

Answer 1

我在这个jsFiddle试过这个。当使用DOM方法时，替换一小块内容是最快的，但是如果模板不是很复杂，并且不会在字符串操作中浪费太多时间，那么设置innerHTML的速度并不会慢得惊人，而且可能是可以接受的。(这并不奇怪，“快速处理损坏的HTML”是浏览器应该做的事情，而innerHTML是一个古老而流行的属性，可能会对其进行大量优化。)在innerHTML方法中添加另一个join()步骤也没有真正减缓它的速度。

相反，使用jQuery.tmpl() /和/ DOM片段方法在Mac上的Chrome中速度要慢几个数量级。要么我在dom_tmpl函数中做错了什么，要么深度克隆DOM节点本身就很慢。

我注释掉了附加测试，因为它们在运行整个套件时冻结了选项卡进程--数千到数万个节点被塞进文档中，可能不知何故混淆了Chrome。仅加上innerHTML就会导致冰川变慢，因为这条线最终会变得非常巨大。

其结论似乎是:除非在非常大的字符串上愚蠢地执行，否则模板库中的连接字符串很可能不会使减慢，同时试图巧妙地克隆DOM中的片段。此外，jQuery.tmpl()在我的计算机上处理2000-ish操作系统/秒，在我的iPhone 4上处理500-ish，如果您正在运行这些平台，这可能会“足够快”。它也与DOM片段函数大致相同，使得后者在很大程度上毫无意义。

如果您主要需要替换现有节点的内容，并且您的模板并不大，请使用Underscore.js的模板和innerHTML。Underscore.js似乎完成了十次遍历整个字符串，因此如果您的模板/are/大，这可能是一个问题。

如果需要附加到现有节点，则可以通过创建包装器元素、设置其innerHTML，然后将包装器元素追加到目标节点，从而避免序列化和重新分析现有内容。

如果你真的想要速度，或者你的模板太大了，你可能需要做一些事情，比如让服务器端脚本预编译你的模板到Javascript中来创建相应的节点。

(免责声明:我并不声称自己擅长构建测试用例和基准测试，只在WebKit中对其进行了测试，您应该根据您的用例进行调整，并获得一组更相关的数字。)

更新：i 更新了我的jsFiddle基准不使用任何jQuery特性，以防其存在(节点上的用户数据等)是DOM节点克隆缓慢的原因。没有多大帮助。

Answer 2

查看jquery模板。http://api.jquery.com/category/plugins/templates/

它让我们创建带有关键字"if“、"each”等的html片段，以及未声明的变量。然后，您可以使用一些值对来自JavaScript的片段调用"tmpl“，并返回一个DOM元素。

Answer 3

我不知道这是不是你要找的，但是Underscore.js有一个模板实用程序。

而且，jquery可以返回匹配元素的DOM。