一键获取doT.js
doT.js演示说明文档
JavaScript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注，现在各大型网站 Twitter、淘宝网、新浪浪微博、腾讯QQ空间、腾讯微博等都纷纷使用了自家的模板引擎，Look：
baiduTemplate(百度)
artTemplate(腾讯)
juicer(淘宝)
doT
tmpl
handlebars
easyTemplate
underscoretemplate
mustache
kissytemplate
今天给大家推荐一下dot.js，因为它极小却功能极强，先看性能测试：
引擎渲染速度竞赛
100 条数据 × 10000 次渲染测试 [isEscape:false, isCache:true]
ie8浏览器（8.0.6001.18702）
chrome浏览器（版本 26.0.1410.64 m）
chrome测试数据
Apple safari浏览器（5.1.7(7534.57.2)）
safari测试数
firefox浏览器（19.0.2）
firefox测试数据
奇虎360浏览器（版本号6.1.0.356，内核版本：21.0.1180.89）
360测试数据
测试结果
js模板引擎对比数据
通过对各模板引擎测试结果，可以看出
artTemplate，juicer与doT引擎模板整体性能要有绝对优势；
其中doT引擎模板在IE与safari浏览器表现非常优越；另外doT.js小巧且毫无依赖。dot.min.js大小才4K，一百多行代码！
这么好的东西，赶紧用起来，接下来说一下使用方法！
doT.js可以更好的在html端使用json数据。
基本语法
{{ }} for evaluation 模板标记符
{{= }} for interpolation 输出显示，默认变量名叫it
{{! }} for interpolation with encoding 编码后输出显示
{{? }} for conditionals 条件分支，if条件的简写
{{~ }} for array iteration 遍历数组
使用
引入js
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
功能点
#######1.for interpolation 赋值
格式：
{{= }}
数据源：
{"name":"Jake","age":31}
区域:
<div id="interpolation"></div>
模板：
<script id="interpolationtmpl" type="text/x-dot-template">
<div>Hi {{=it.name}}!</div>
<div>{{=it.age || ''}}</div>
</script>
调用方式：
var dataInter = {"name":"Jake","age":31};
var interText = doT.template($("#interpolationtmpl").text());
$("#interpolation").html(interText(dataInter));
#######2.for evaluation for in 循环
格式：
{{ for var key in data { }}
{{= key }}
{{ } }}
数据源：
{"name":"Jake","age":31,"interests":["basketball","hockey","photography"],"contact":{"email":"jake@xyz.com","phone":"999999999"}}
区域：
<div id="evaluation"></div>
模板：
<script id="evaluationtmpl" type="text/x-dot-template">
{{ for(var prop in it) { }}
<div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>
{{ } }}
</script>
调用方式：
var dataEval = {"name":"Jake","age":31,"interests":["basketball","hockey","photography"],"contact":{"email":"jake@xyz.com","phone":"999999999"}};
var evalText = doT.template($("#evaluationtmpl").text());
$("#evaluation").html(evalText(dataEval));
#######3.for array iteration 数组
格式：
{{~data.array :value:index }}
{{~}}
数据源:
{"array":["banana","apple","orange"]}
区域：
<div id="arrays"></div>
模板：
<script id="arraystmpl" type="text/x-dot-template">
{{~it.array:value:index}}
<div>{{= index+1 }}{{= value }}!</div>
{{~}}
</script>
调用方式：
var dataArr = {"array":["banana","apple","orange"]};
var arrText = doT.template($("#arraystmpl").text());
$("#arrays").html(arrText(dataArr));
#######4.for conditionals 条件
格式：
{{? }} if
{{?? }} else if
{{??}} else
数据源：
{"name":"Jake","age":31}
区域：
<div id="condition"></div>
模板：
<script id="conditionstmpl" type="text/x-dot-template">
{{? it.name }}
<div>Oh, I love your name, {{=it.name}}!</div>
{{?? !it.age === 0}}
<div>Guess nobody named you yet!</div>
{{??}}
You are {{=it.age}} and still dont have a name?
{{?}}
</script>
调用方式：
var dataCondition = {"age":31};
var conText = doT.template($("#conditionstmpl").text());
$("#condition").html(conText(dataCondition));
以上调用方法都借助了jq，来个原生态的调用示例！
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dot.js示例文档</title>
</head>
<body >
<ul id='showInfo'>
<script type="text/template" charset="utf-8" id='template_1'>
{{if( it && it.length>0 ){ }}
{{for(var i=0; i<it.length; i++){ }}
<li>{{=it[i].name}}</li>
{{ } }}
{{ }else{ }}
<li>没有数据。</li>
{{ } }}
</script>
</ul>
<br>
<hr >
<br>
<ul id='showInfo2'>
</ul>
</body>
<script type="text/javascript" charset="utf-8" src='doT.min.js'></script>
<script type="text/javascript" charset="utf-8">
var template=document.getElementById('template_1').innerHTML;
var obj=[{name:'d1'},{name:'d2'},{name:'d3'}];
//传递一个有数据的数组进去
document.getElementById('showInfo').innerHTML=doT.template( template )( obj );
//传入的数据为空
document.getElementById('showInfo2').innerHTML=doT.template( template )( [] );
</script>
</html>
网友评论