优化脚本模板答案

【问题标题】：Optimizing Script Template优化脚本模板
【发布时间】：2013-01-10 15:02:41
【问题描述】：

我正在使用脚本模板在 javascript 中创建可重复使用的 html 标记。模板使用 mustache 将标签替换为正确的值。然后由 JQUery Mobile 呈现并再次呈现 html。一个 sn-p 看起来像这样：

<!doctype html>
            <html>
                <head>
                    <meta charset="UTF-8" />
                    <title>jQuery Mobile</title>
                    <meta name="viewport" content="width=device-width, initial-scale=1"> 
                    <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=9" />



                </head>
                <body>
                    <!-- Page Templates -->

<script id="page_header_tpl" type="text/template">
<div data-role="header" class="toolbar {{#class}}{{{class}}}{{/class}}" {{#id}}id="{{{id}}}" {{/id}}>
<h1>{{{title}}}</h1>
<div data-role="ui-bar" class="ui-bar" id="ui-top">
{{#buttons}}
        {{{.}}}
{{/buttons}}
</div><!-- /navbar -->

{{#navbar}}
    {{{navbar}}}
{{/navbar}}
</div>
</script>
<script type="text/javascript">
//Function for creating the header
function createPageHeader(data) {
      html = $('#page_header_tpl').html();
    return Mustache.render(html, data);
}
 //Calling the function
 var header = createPageHeader({ class : 'aheader', id : 'my id',  title : 'Page 1'});
<script>
</body>
</html>

我的问题是我可以使用什么样的技术来优化模板元素的调用和放置到 html 文件中？快速检索元素？用 Mustache 更快地解析？记忆技巧？等等

【问题讨论】：

标签： javascript jquery templates jquery-mobile mustache

【解决方案1】：

您最好的选择可能是在客户端上使用Handlebars。它与 Mustache 完全兼容，并提供了compile your templates ahead of time 的方法以获得更好的性能。

它还添加了一堆额外的帮助器，但如果您想保持模板与 Mustache 严格兼容（例如用于服务器端），则不必使用这些帮助器。

不仅它还provides a stripped version (Handlebars runtime) of the library 用于编译模板。

可以在此处找到包含更多有用链接的比较文章 - http://nimbupani.com/mustache.html

【讨论】：