doT.js 模板引擎

doT.js特点是快，小，无依赖其他插件。

官网：
http://olado.github.io

使用方法：
{{= }} for interpolation —–赋值
{{ }} for evaluation —–循环
{{~ }} for array iteration —–数组
{{? }} for conditionals —–条件
{{! }} for interpolation with encoding
{{# }} for compile-time evaluation/includes and partials
{{## #}} for compile-time defines

调用方式：
var tmpText = doT.template(模板);
tmpText(数据源);

下面请欣赏小例旬的颜值…

div部分：

<!-- 循环 --><ul id="forDo"><script type="text/template" charset="utf-8" id='demo_1'>{{if( it && it.length>0 ){}}{{for(var i=0;i<it.length;i++){}}    <li>{{=it[i].name}}</li>{{ } }}{{ }else{ }}  <li>没有数据</li>{{ } }} </script></ul><!-- 取值 --><div id="interpolationtmpl_1">  <script id="interpolationtmpl" type="text/x-dot-template">    <div>Hi {{=it.name}} !</div>    <div>{{=it.gender || ''}}</div>  </script></div><br/><!-- 判断 格式：{{? }} if{{?? }} else if{{??}} else--><div id='conditionstmpl_1'>  <script id="conditionstmpl" type="text/x-dot-template">  {{? !it.name }}    <div>哇,兵长太帅受不了，我的 {{=it.name}}!</div>  {{?? !it.height === 0}}    <div>进击的巨人第二季你看了嘛!</div>  {{??}}    虽然你的身高只有{{=it.height}} 但是不耽误你的帅气，兵长兵长~~  {{?}}  </script></div>

JS部分：

// 循环var _demo=document.getElementById('demo_1').innerHTML;var obj=[{name:'乔巴'},{name:'罗'},{name:'女帝'}];document.getElementById('forDo').innerHTML= doT.template(_demo)(obj);// 取值var dataInter = {"name":"污力穷小可矮","gender":'色女'};var interText = document.getElementById('interpolationtmpl').innerHTML;document.getElementById('interpolationtmpl_1').innerHTML= doT.template(interText)(dataInter);//判断var EncodeText =document.getElementById('conditionstmpl').innerHTML;var dataEncode = {"name":"利威尔","height":'160cm'};document.getElementById('conditionstmpl_1').innerHTML= doT.template(EncodeText)(dataEncode);

数组

div部分

<div id="arraystmpl_1"><script id="arraystmpl" type="text/x-dot-template">{{~it.array:value:index}}<div>{{=index+1}}{{=value}}</div>{{~}}  （不要忘记这个小尾巴）</script></div>

上面的html大家可以试着调换一下value、index的位置，看刊数值显示的位置。

JS部分

//数组var arrText = document.getElementById('arraystmpl').innerHTML;var dataArr = {"array":["红豆","大红豆","芋头"]};document.getElementById('arraystmpl_1').innerHTML=doT.template(arrText)(dataArr);

渲染出：

DIV 部分

<!-- 没有准确用词1 --><div id="encodetmpl_1">  <script id="encodetmpl" type="text/x-dot-template">    Visit {{!it.uri}} {{=it.html}}</script></div>

JS 部分

var EncodeText =  document.getElementById('encodetmpl').innerHTML;var dataEncode = {"uri":"https://github.com/olado/doT","html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};document.getElementById('encodetmpl_1').innerHTML=doT.template(EncodeText)(dataEncode);

渲染结果：