2013-01-10 64 views
0

我正在使用腳本模板在javascript中創建可重用的html標記。這些模板正在使用鬍鬚來替換具有正確值的標籤。然後由JQUery Mobile再次渲染和渲染html。一個片段是這樣的:優化腳本模板

<!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文件?快速檢索元素?鬍鬚更快的解析?記憶技巧?等

回答

0

您最好的選擇可能是在客戶端上使用Handlebars。它與鬍鬚完全兼容,並提供了一種通向compile your templates ahead of time的途徑,以獲得更好的性能。

它還增加了一個額外的一堆幫手,但你不必使用這些,如果你想保持你的模板嚴格鬍鬚兼容(用於在服務器端例如使用)。

不僅如此,它也爲provides a stripped version (Handlebars runtime) of the library編譯模板使用。

有幾個更有用鏈接的對比文章可以在這裏找到 - http://nimbupani.com/mustache.html