0

JavaScript で resuable html マークアップを作成するためにスクリプト テンプレートを使用しています。テンプレートは口ひげを使用してタグを正しい値に置き換えています。次に、html がレンダリングされ、JQUEry Mobile によって再度レンダリングされます。スニペットは次のようになります。

<!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 による高速解析? 記憶術？等

4

1 に答える 1

0

あなたの最善の策は、おそらくクライアントでハンドルバーを使用することです。これは Mustache と完全に互換性があり、パフォーマンスをさらに向上させるために事前にテンプレートをコンパイルする方法を提供します。

また、追加のヘルパーも多数追加されますが、テンプレートを厳密に Mustache 互換に保ちたい場合 (サーバー側で使用する場合など) は、これらを使用する必要はありません。

コンパイルされたテンプレートで使用するライブラリのストリップ バージョン (Handlebars ランタイム)も提供するだけではありません。

いくつかの便利なリンクを含む比較記事は、ここにあります - http://nimbupani.com/mustache.html

于 2013-01-14T15:33:13.353 に答える