dot.js在我眼中是个模板引擎，因为项目中经常会用到排版，例如下面两张图片，有模板嵌套的话，就很方便。
首先看一下我的JSON接口传来的
数据
，我格式化了一下，我截取了2条
在前端获取JSON数据里，我用的是ajax异步获取（我用的是apicloud,所以用他的获取方法，道理都是一样的）
因为是异步处理，我们把需要处理的内容放在回调函数function里（因为我们要先获取到了数据，才能进行其他操作啊！曾经的犯错，回顾。）。现在console.log(JSON.stringify(ret.data)）,打印出的应该是data的内容,截取了2条。如果console.log(ret.data）,打印出的应该是对象，所以转换成字符串。（关于JSON对象，字符串等问题，上一篇）
现在看一下第一大点的dot.js的用法的第三点
按照这个格式，我写了下面这个模板和调用方法：
我运用了weui的页面框架，样式简单，不讲了，大概是：
<div class=weui.grids>
<div class=weui-grid></div> //我用dot.js方法，把这个设成了模板，循环了一下把数据放进去。
</div>
对比下来发现胜出的有以下几种artTemplate,dot,juicer三个从速度上胜出(chrome)，但是在IE下最终选择了dot，dot的文件是最小只有5K（没有压缩），并且在IE里也是最快的。下面介绍下dot的用法，其实用法非常简单
dot的API里有以下几种标签
//{{ }} JS原生态代码
//{{= }} 变量运算，赋值 {{=it.f1 + it.f2}}
//{{! }} 赋值并且编码
//{{# }}
//{{## #}}
上面两个没有仔细研究，基本我也不用它
//{{? }} 条件语句
//{{~ }} 循环
其实条件语句和循环可以用{{if}}{{else if}}{{for(var i=0i<lengthi++)}}来代替，也就是JS的原生态代码
那么我们用到的只有前三种标签就完全够用了，下面给出一个例子，就很容易看明白了
<script id="tmpl-demo" type="text/tmpl">
{%if($data.suc){%}
{%for (var i = 0i <$data.users.lengthi++) { %}
{%var user=$data.users[i]%}
<div style="margin-bottom:10px">
<span style="margin-left:10px">{%= user.Name%}</span>
{%! user.url%}{%=global%}
</div>
{%}%}
{%each($data)%}
{%}%}
</script>
<script type="text/javascript">
function demo() {
var fn = doT.template($("#tmpl-demo").html())
$("#demo").append(fn(data))
}
</script>
<div id="demo"></div>
可能是有人疑问，不是{{}}吗，其实dot允许自定义包括的标签，这样就会让你使用自己喜欢的模版标签
如，他的本来的设置是这样的，是不是很容易修改
var doT = {
version: '1.0.1',
templateSettings: {
evaluate: /\{\{([\s\S]+?(\}?)+)\}\}/g,
interpolate: /\{\{=([\s\S]+?)\}\}/g,
encode: /\{\{!([\s\S]+?)\}\}/g,
use: /\{\{#([\s\S]+?)\}\}/g,
useParams: /(^|[^\w$])def(?:\.|\[[\'\"])([\w$\.]+)(?:[\'\"]\])?\s*\:\s*([\w$\.]+|\"[^\"]+\"|\'[^\']+\'|\{[^\}]+\})/g,
define: /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
defineParams: /^\s*([\w$]+):([\s\S]+)/,
conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
iterate: /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,
varname: '$data',
varoption: '$item',
strip: true,
append: true,
selfcontained: false
},
template: undefined, //fn, compile template
compile: undefined //fn, for express
}, global
我修改完就是下面这样的，非常简单
var doT = {
version: '1.0.1',
templateSettings: {
evaluate: /\{\%([\s\S]+?(\}?)+)\%\}/g,
interpolate: /\{\%=([\s\S]+?)\%\}/g,
encode: /\{\%!([\s\S]+?)\%\}/g,
use: /\{\%#([\s\S]+?)\%\}/g,
useParams: /(^|[^\w$])def(?:\.|\[[\'\"])([\w$\.]+)(?:[\'\"]\])?\s*\:\s*([\w$\.]+|\"[^\"]+\"|\'[^\']+\'|\{[^\}]+\})/g,
define: /\{\%##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\%\}/g,
defineParams: /^\s*([\w$]+):([\s\S]+)/,
conditional: /\{\%\?(\?)?\s*([\s\S]*?)\s*\%\}/g,
iterate: /\{\%~\s*(?:\%\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\%\})/g,
varname: '$data',
varoption: '$item',
strip: true,
append: true,
selfcontained: false
},
template: undefined, //fn, compile template
compile: undefined //fn, for express
}, global
转载
