找了好幾款基於jquery的模板渲染插件，無一感覺很難用(教程較少、綁定不統一)，也可能我智商問題，比如jquery template.js 、jtemplate.js。

然後在github上找到這一款，和我在公司之前用的差不多(apicloud雲端開發app，致敬【百小僧】大神封裝的HUI，簡化了在公司很多工作)，

這款模板渲染和HUI的很相似，也比較簡單 基於jquery的模板渲染插件。

附上github https://github.com/yanhaijing/template.js

特性

• 模版編譯，渲染
• 支持所有主流瀏覽器及Node（UMD）
• JavaScript原生語法
• 豐富的自定義配置
• 支持數據過濾
• 異常捕獲功能
• 功能專一，簡單好用

兼容性

• Node 0.10+
• Safari 6+ (Mac)
• iOS 5+ Safari
• Chrome 23+ (Windows, Mac, Android, iOS, Linux, Chrome OS)
• Firefox 4+ (Windows, Mac, Android, Linux, Firefox OS)
• Internet Explorer 6+ (Windows, Windows Phone)
• Opera 10+ (Windows, linux, Android)

傳統用法(其他用法請在github找)https://github.com/yanhaijing/template.js

1、引入 jquery文件與 template.js

<script src="template.js"></script>

2、構建模板

<script id="tpl" type="text/html">
<ul>
　　<!--這裏使用了if判斷-->
    <%if(list.length > 0 ){%>
　　　　<!--這裏使用了for循環，看起來和js寫法是差不多的，註意占位符-->
	<%for(var i = 0; i < list.length; i++) {%>
	<li><%:=list[i].name%></li>
	<%}%>
     <%}else{%>
       <li>沒有數據233333~~~ <li>
     <%}%>
   <%%>
</ul>
</script>

3、模板渲染(模板內對象是什麽，就傳什麽。{list:[] } 傳一個對象裏面有一個list數組 )

<script>
//第一種方法
var tpl = document.getElementById(‘tpl‘).innerHTML;
var html=template(tpl, {list: [{name: "yan"},{name: "haijing"}]});
console.log(html);
//第二種方法 感覺第二種好用些
tpl = template(document.getElementById(‘tpl‘).innerHTML);
html = tpl({list: []});
console.log(html);
</script>

4、輸出

<ul>
	<li>yan</li>
	<li>haijing</li>
</ul>
<ul>
	<li>沒有數據233333~~~</li>
</ul>

5、其他用法(定義變量)

<!--這裏看起來和js差不多了，簡單易懂。-->
<%var test = ‘輸出自定義變量‘;%>

以上就是這麽多了，歡迎指導補充。

for循環、if判斷和js差不多，用起來很舒服。

使用模板也是為了減少直接在js中拼接代碼，簡化開發，代碼可讀性很好

向這個模板js的開發者的致敬，再次放上github https://github.com/yanhaijing/template.js

出位的template.js 基於jquery的模板渲染插件,簡單、好用