Jquery tmpl 使用连接方法来提高速度答案

【问题标题】：Jquery tmpl using join approach for speedJquery tmpl 使用连接方法来提高速度
【发布时间】：2012-01-05 11:07:09
【问题描述】：

我看到有人提到使用 JQuery tmpl 以更快的方式创建字符串而不是 DOM 元素：http://riley.dutton.us/2010/10/12/jquery-templates-vs-jqote-2-a-followup.html

但我似乎无法让它工作。我正在使用 JQuery 1.6.4 和来自 GitHub 的最新 tmpl 文件。我的代码如下 - 谁能指出明显的错误？非常感谢。

JsonData 是来自 Web 服务的响应，格式正确的 JSON - 我可以使用广为人知的 tmpl 应用程序以及使用 JQote2 将其绑定。

jQueryTemplate 看起来像：

<script id="jQueryTemplate" type="text/x-jquery-tmpl">
    <li><span>${Name}</span><span>${ProductName}</span></li>
</script>

我的JS调用模板：

var myTemplate = $('#jQueryTemplate').template();
var html = myTemplate($, { data: JsonData }).join('');
$("#container").html(html);

$('#jQueryTemplate').template(); 的结果似乎是未定义的这个错误：

Uncaught TypeError: Object 
<li><span>${Name}</span><span>${ProductName}</span></li> 
has no method 'join'

感谢您提供的任何帮助。

【问题讨论】：

标签： javascript jquery jquery-templates

【解决方案1】：

像这样定义你的模板；

$.template( "jQueryTemplate", "<li><span>${Name}</span><span>${ProductName}</span></li>" );

像这样渲染你的模板；

$.tmpl( "jQueryTemplate", JsonData ).appendTo( "#container" );

或

像这样定义你的模板；

<script id="jQueryTemplate" type="text/x-jquery-tmpl">
    <li><span>${Name}</span><span>${ProductName}</span></li>
</script>

像这样渲染你的模板；

$( "#jQueryTemplate" ).tmpl(JsonData).appendTo("#container" );

【讨论】：

您好，感谢您的回复。我认为您提到的方法是 JQuery tmpl 的正常、广为人知的用法，但根据基准和我在帖子中链接到的文章，它比我尝试使用的方法慢 6 倍以上。这是我试图复制但未能复制的代码（取自文章的第 3 段）： template_object($, payload).join("");

【解决方案2】：

经过大量挖掘，我最终找到了 Boris Moore 解释的这种方法的示例。感谢鲍里斯的出色工作。 https://github.com/jquery/jquery-tmpl/issues/50

我创建了一个 jsperf 来比较这两种方法 - 这是我的第一个 jsperf，因此希望它设置正确以获得有意义的结果。它显示出巨大的差异。我想这取决于使用情况，但我的是非常基本的标记生成，所以字符串输出结合 .html() 就可以了。 http://jsperf.com/jquery-tmpl-as-string

如果您发现自己需要提高 tmpl 性能并且没有机会切换到另一个模板引擎，希望这会有所帮助。

【讨论】：