baiduTemplate(百度)、artTemplate(騰訊)、juicer(淘寶)、xtemplate、doT、Jade
1、Handlebars 是 JavaScript 一個語義模板庫,通過對view和data的分離來快速構建web模板。 在加載時被預編譯,而不是到了客戶端執行到代碼時再去編譯,這樣可以保證模板加載和運行的速度。
http://handlebarsjs.com/
http://caibaojian.com/handlebars-js.html
2、Jade是一個有着完善API和驚艷特性的JavaScript模板引擎。使用空白與縮進敏感的代碼格式編寫HTML頁面。基於Node.js,運行在服務器端。
3、DoTjs快速和簡潔的JavaScript模板引擎,同時用於Node.js和瀏覽器。
4、xtemplate:http://docs.spmjs.io/xtemplate/latest/
<!--Mustache 的模板 --> <script id="Mustache" type="text/tmpl"> <ul> {{#list}} <li>{{{index}}}. 用戶: {{{user}}}/ 網站:{{{site}}}</li> {{/list}} </ul> </script> <!-- doT 的模板 --> <script id="doT" type="text/tmpl"> <ul> {{ for (var val, i = 0, l = it.list.length; i < l; i ++) { }} {{ val = it.list; }} <li>{{=val[i].index}}. 用戶: {{=val[i].user}}/ 網站:{{=val[i].site}}</li> {{ } }} </ul> </script> <!--juicer 的模板 --> <script id="juicer" type="text/tmpl"> <ul> {@each list as val} <li>val.index.用戶:{val.user}/ 網站:$${val.site}</li> {@/each} </ul> </script> <!-- artTemplate 的模板 --> <script id="template" type="text/tmpl"> <ul> <% for (i = 0, l = list.length; i < l; i ++) { %> <li><%=list[i].index%>. 用戶: <%=list[i].user%>/ 網站:<%=list[i].site%></li> <% } %> </ul> </script> <!-- underscore 的模板 --> <script id="underscoreTemplate" type="text/tmpl"> <ul> <% for (var i = 0, l = list.length; i < l; i ++) { %> <li><%=list[i].index%>. 用戶: <%=list[i].user%>/ 網站:<%=list[i].site%></li> <% } %> </ul> </script> <!-- Handlebars 的模板 --> <script id="Handlebars" type="text/tmpl"> <ul> {{#list}} <li>{{{index}}}. 用戶: {{{user}}}/ 網站:{{{site}}}</li> {{/list}} </ul> </script>