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

Jquery tmpl using join approach for speed

本文关键字：方法 高速度 连接 tmpl Jquery      更新时间：2023-09-26

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

我似乎就是不能让它工作。我使用JQuery 1.6.4和最新的tmpl文件从GitHub。我的代码如下-谁能指出明显的错误?多谢。

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'

感谢您的帮助

这样定义你的模板;

$.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" );

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

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

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

相关文章：