介绍
一个适用于混合开发的模板引擎
最近在做一个Apicloud的webApp,使用了Apicloud提供的api.js和doT.js
1.特点是快,小,无依赖其他插件,可适用于webApp
2.常用语法
{{ }} for evaluation 模板标记符
{{= }} for interpolation 输出显示，默认变量名叫it
{{! }} for interpolation with encoding 编码后输出显示
{{? }} for conditionals 条件分支，if条件的简写
{{~ }} for array iteration 遍历数组
//使用步骤
数据源 ： json
模板 ： 数据显示的格式
区域 ： 数据显示的位置
调用方试 ： 填充数据
3.在Safari模板引擎渲染速度测试
模板引擎渲染速度测试
4.doT.js框架下载链接 https://github.com/olado/doT
示例
1.模板
<!--赋值-->
<script id="interpolationtmpl" type="text/x-dot-template">
<div>{{=it.name}}</div>
<div>dot框架</div>
</script>
<!--循环map-->
<script id="evaluationtmpl" type="text/x-dot-template">
{{ for(var prop in it) { }}
<div>键:{{= prop }}对应的值:{{= it[prop] }}</div>
{{ } }}
</script>
<!--数组-->
<script id="arraystmpl" type="text/x-dot-template">
{{~it.interests:value:index}}
<div>下标：{{= index }}对应的值：{{= value }}!</div>
{{~}}
</script>
<!--条件-->
<script id="conditionstmpl" type="text/x-dot-template">
{{? it.name }}
<div>name存在时走到这里, {{=it.name}}!</div>
{{?? !it.age === 0}}
<div>age等于零时走到这里!</div>
{{??}}
You are {{=it.age}}
{{?}}
</script>
2.区域（最终显示的位置）
<div>
------赋值------
</div>
<div id="interpolation"></div>
<div>
------循环------
</div>
<div id="evaluation"></div>
<div>
------数组------
</div>
<div id="arraysation"></div>
<div>
------条件------
</div>
<div id="condition"></div>
3.数据源与调用方式
<script>
/**
* 数据源 赋值
*/
var dataInter = {
"name" : "shuangqi1991",
"age" : 88
};
//调用方式
var interText = doT.template($api.text($api.byId('interpolationtmpl')));
$api.html($api.byId('interpolation'), interText(dataInter));
/**
* 数据源 数组
*/
var dataEval = {
"name" : "shuangqi1991",
"age" : 88,
"interests" : ["basketball", "hockey", "photography"],
"contact" : {
"email" : "shuangqi1991@qq.com",
"phone" : "999999999"
}
};
//调用方式
var evalText = doT.template($api.text($api.byId('evaluationtmpl')));
$api.html($api.byId('evaluation'), evalText(dataEval));
/**
* 数据源 数组
*/
var arrEval = {
"interests" : ["basketball", "hockey", "photography"]
};
//调用方式
var arrText = doT.template($api.text($api.byId('arraystmpl')));
$api.html($api.byId('arraysation'), arrText(arrEval));
/**
* 数据源 条件
*/
var dataCondition = {
"name" : "ss",
"age" : 2
};
//调用方式
var conText = doT.template($api.text($api.byId('conditionstmpl')));
$api.html($api.byId('condition'), conText(dataCondition));
</script>
说明：
亲测在模板里{{= XXX}}、或者{{? XXX}}、即在"{{}}"内是可以直接使用全局变量以及方法名、 以及运算符
1.比如 {{= hostUrl + it.imageUrl}} 这里的hostUrl 为一个全局变量
2.{{= sayHello() }}这里sayHello()是一个有返回值的方法
3.使用三目运算符 {{? it.open ? "true":"false"}} 则条件真的时候返回true， 假的时候返回false
