作為一名前端攻城師，經常會遇到從后台ajax拉取數據再顯示在頁面的情境，一開始我們都是從后台拉取再用字符串拼接的方式去更達到數據顯示在頁面！
<!-- 顯示區域 --> <div id="testid"></div>
<script type="text/javascript">
var testjson={"name":"張三","age":31,"fun":"吃東西"};//假設是后台拉取的數據
document.getElementById("testid").innerHTML="<p>"+
"<span>姓名："+testjson.name+"</span>"+
"<span>年齡："+testjson.age+"</span>"+
"<span>愛好："+testjson.fun+"</span>"+
"</p>";
</script>
這樣不但寫起來很麻煩，必須保證每一個引號正確，特別是如果數據里還有單雙號的時候，還要注意單雙引號混用，或者用轉義，效率很低下，很容易出錯，后面有接觸到知道有JS模板引擎像百度的baiduTemplate(百度)\artTemplate（騰訊）\juicer（淘寶）\doT\ tmpl\ handlebars\ easyTemplate\ underscoretemplate \ mustache \kissytemplate，在網上幾翻選擇，我還是選擇了doT.js,它的大小只有4KB，渲染性能很好，而且直接支持原生的寫法，不用依賴別的庫。下面就讓我們來一起了解下它的用法，讓數據渲染飛起來吧！
首先准備工作，引入doT.js：
<script type="text/javascript" src="js/jquery-1.11.0.js"></script> <script type="text/javascript" src="js/doT.js"></script>
1、最常規用法{{=it.attr}}
<!-- 要顯示的區域 --> <div id="testid"></div> <script type="text/x-dot-template" id="useType0">//模板存放區域 修改type類型，以免會被解析成js
<p>
<span>姓名：{{=it.name}}</span>
<span>年齡：{{=it.age}}</span>
<span>愛好：{{=it.fun}}</span>
</p>
</script> <!-- 引入js文件 --> <script type="text/javascript" src="doT.min.js"></script> <script> /*基本用法*/ var testjson={"name":"張三","age":31,"fun":"吃東西"},//定義要渲染數據，一般是從后台ajax拉取 tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法 document.getElementById("testid").innerHTML=tmpltxt(testjson);//數據渲染 </script>
得到的結果如下：
2、循環數組{{~}}
<!-- 要顯示的區域 -->
<div id="testid"></div>
<!-- 模板存放區域 修改type類型，以免會被解析成js -->
<script type="text/x-dot-template" id="useType0">
<ul>
{{~it:value:index}}
<li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span><span>愛好：{{=value.fun}}</span></li>
{{~}}
</ul>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
/*基本用法*/
var testjson=[
{"name":"張三","age":31,"fun":"吃東西"},
{"name":"李四","age":24,"fun":"上網"},
{"name":"王五","age":70,"fun":"散步，跑步"}
],//定義要渲染數據，一般是從后台ajax拉取
tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
document.getElementById("testid").innerHTML=tmpltxt(testjson);//數據渲染
</script>
得到的結果如下：
3、條件渲染{{？}}{{？？}}，相當於原生的if else if
<!-- 要顯示的區域 -->
<div id="testid"></div>
<!-- 模板存放區域 修改type類型，以免會被解析成js -->
<script type="text/x-dot-template" id="useType0">
<ul>
{{~it:value:index}}
{{?!value.age}}
<li><span>姓名：{{=value.name}}</span><span>年齡：年齡數據缺失</span><span>愛好：{{=value.fun}}</span></li>
{{??!value.fun}}
<li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span><span>愛好：無趣的人</span></li>
{{??}}
<li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span><span>愛好：{{=value.fun}}</span></li>
{{?}}
{{~}}
</ul>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
/*基本用法*/
var testjson=[
{"name":"張三","age":31,"fun":"吃東西"},
{"name":"李四","fun":"上網"},
{"name":"王五","age":70}
],//定義要渲染數據，一般是從后台ajax拉取
tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
document.getElementById("testid").innerHTML=tmpltxt(testjson);//數據渲染
</script>
得到的結果如下：
4、編碼渲染{{!}},主要是為了防止代碼注入以保障安全，如傳入一個HTML片段或js片段，它會以字符串的形式渲染
<!-- 要顯示的區域 -->
<div id="testid"></div>
<!-- 模板存放區域 修改type類型，以免會被解析成js -->
<script type="text/x-dot-template" id="useType0">
<ul>
{{~it:value:index}}
{{?value.bz}}
<li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span><span>愛好：{{!value.html}}</span></li>
{{??}}
<li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span><span>愛好：{{=value.html}}</span></li>
{{?}}
{{~}}
</ul>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
/*基本用法*/
var testjson=[
{"name":"張三","age":31,"html":"<b>呵呵</b>","bz":true},
{"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
],//定義要渲染數據，一般是從后台ajax拉取
tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
document.getElementById("testid").innerHTML=tmpltxt(testjson);//數據渲染
</script>
得到的結果如下：
5、支持共用模塊定義{{##def.}}定義，{{#def.}}引用模塊
<!-- 要顯示的區域 -->
<div id="testid"></div>
<!-- 模板存放區域 修改type類型，以免會被解析成js -->
<script type="text/x-dot-template" id="useType0">
<!-- 模塊定義0 -->
{{##def.togeter0:
<li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span><span>愛好：{{!value.html}}</span></li>
#}}
<!-- 模塊定義1 -->
{{##def.togeter1:
<li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span><span>愛好：{{=value.html}}</span></li>
#}}
<ul>
{{~it:value:index}}
{{?value.bz}}
<!-- 引用模塊0 -->
{{#def.togeter0}}
{{??}}
<!-- 引用模塊1 -->
{{#def.togeter1}}
{{?}}
{{~}}
</ul>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
/*基本用法*/
var testjson=[
{"name":"張三","age":31,"html":"<b>呵呵</b>","bz":true},
{"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
],//定義要渲染數據，一般是從后台ajax拉取
tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
document.getElementById("testid").innerHTML=tmpltxt(testjson);//數據渲染
</script>
得到的結果如下：
注：模塊定義也可以一個json數據定義，再在生成模板函數函數的時候傳入即可，示例如下，其中tmpljson就是在外面以json定義的模塊：
<!-- 要顯示的區域 -->
<div id="testid"></div>
<!-- 模板存放區域 修改type類型，以免會被解析成js -->
<script type="text/x-dot-template" id="useType0">
<!-- 模塊定義0 -->
{{##def.togeter0:
<li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span><span>愛好：{{!value.html}}</span></li>
#}}
<!-- 模塊定義1 -->
{{##def.togeter1:
<li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span><span>愛好：{{=value.html}}</span></li>
#}}
<ul>
{{~it:value:index}}
{{?value.bz===true}}
<!-- 引用模塊0 -->
{{#def.togeter0}}
{{??value.bz===false}}
<!-- 引用模塊1 -->
{{#def.togeter1}}
{{??}}
<!-- 引用傳入的模塊 -->
{{#def.testmode}}
{{?}}
{{~}}
</ul>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
/*基本用法*/
var testjson=[
{"name":"張三","age":31,"html":"<b>呵呵</b>","bz":true},
{"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false},
{"name":"李四","age":24,"html":"<b>哈哈</b>"}
],//定義要渲染數據，一般是從后台ajax拉取
tmpljson={"testmode":"<li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span></li>"}//以json格式定義模塊
tmpltxt=doT.template(document.getElementById("useType0").innerHTML,undefined,tmpljson);//生成模板方法,傳入了json定義的模塊
document.getElementById("testid").innerHTML=tmpltxt(testjson);//數據渲染
</script>
得到的結果如下：
6、用原生的循環，條件渲染，這也是doT.js的一大吸引我的特點
<!-- 要顯示的區域 -->
<div id="testid"></div>
<!-- 模板存放區域 修改type類型，以免會被解析成js -->
<script type="text/x-dot-template" id="useType0">
<!-- 模塊定義0 -->
{{##def.togeter0:
<li><span>姓名：{{=itz.name}}</span><span>年齡：{{=itz.age}}</span><span>愛好：{{!itz.html}}</span></li>
#}}
<!-- 模塊定義1 -->
{{##def.togeter1:
<li><span>姓名：{{=itz.name}}</span><span>年齡：{{=itz.age}}</span><span>愛好：{{=itz.html}}</span></li>
#}}
<ul>
{{ for(var i=0;i<it.length;i++){ }}
{{ var itz=it[i]; }}
{{ if(itz.bz){ }}
<!-- 引用模塊0 -->
{{#def.togeter0}}
{{ }else{ }}
<!-- 引用模塊1 -->
{{#def.togeter1}}
{{ } }}
{{ } }}
</ul>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
/*基本用法*/
var testjson=[
{"name":"張三","age":31,"html":"<b>呵呵</b>","bz":true},
{"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
],//定義要渲染數據，一般是從后台ajax拉取
tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
document.getElementById("testid").innerHTML=tmpltxt(testjson);//數據渲染
</script>
得到的結果如下：
7、嵌套循環（很常用）
先准備好存放內容得容器：<div id="category-goods"></div>
<!-- 必須加上type="text/x-dot-template" -->
<script id="category-goods-tmpl" type="text/x-dot-template">
{{~it:item:index}}
<div class="rxsp">
<div class="aui-pull-left">
<h3> {{= item.name }} 【索引： {{= index }} 】</h3>
</div>
<a class="aui-pull-right ">
查看更多
<span class="aui-iconfont aui-icon-right"></span>
</a>
</div>
<div class="aui-list-item-inner">
<div class="aui-row aui-row-padded">
{{~it[index].goods:item:j}}
<div class="aui-col-xs-6">
<img src="{{= item.logoimg }}" onclick="">
<p class="tit">{{= item.name }} </p>
<div class="aui-info" style="padding-top:0">
<div class="aui-info-item">
<span class="red">￥{{= item.price }}
</div>
</div>
</div>
{{~}}
</div>
</div>
{{~}}
</script>
<script type="text/javascript">
var goods_list = {
"list": [{
"id": "1",
"name": "衣服",
"goods": [{
"goods_id": "1",
"name": "衣服1",
"price": "100",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
},
{
"goods_id": "2",
"name": "衣服2",
"price": "200",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
}
]
},
{
"id": "2",
"name": "鞋子",
"goods": [{
"goods_id": "3",
"name": "鞋子1",
"price": "100",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
},
{
"goods_id": "4",
"name": "鞋子2",
"price": "200",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
}
]
}
]
};
// var tmpltxt = doT.template(document.getElementById("category-goods-tmpl").innerHTML);
// document.getElementById("category-goods").innerHTML = tmpltxt(goods_list.list); //數據渲染
var evalText = doT.template($("#category-goods-tmpl").html());
$("#category-goods").html(evalText(goods_list.list));
</script>
效果圖：
