doTjs详细介绍

doT.js是一个小巧快速的JavaScript模板引擎，他可以帮助我们在html端更好的使用json数据，且无需依赖其他插件就可工作。整个插件只有120行，.min.js文件甚至只有4kb。
官网：http://olado.github.io/doT/index.html

安装

npm install dot

1. 用于nodejs

require('dot');

2. 浏览器

<script type="text/javascript" src="./doT.js"></script>

使用

html:
<div id="int"></div>

1. 赋值

格式：
{% raw %}
{{= }}
{% endraw %}

模板:

<script id="intTmpl" type="text/template">
    <p>My name is {{=it.name}}, I'm {{=it.age}}</p>
</script>

调用方式:

var data = {name: 'John', age: 26};
var intTmpl = doT.template(document.getElementById('intTmpl').innerText);
document.getElementById('int').innerHTML = intTmpl(data);

从上面的代码中我们可以看到，有一个it，这个是代指引用的数据，也就是代码中的data，it.name就是data.name，所以这个在使用方法上实际跟json、对象是一样一样的。
在调用方式上，都是3个步骤:
1. 先声明数据源，也就是代码中的data，这个一般情况下是后端同学传回来的。
2. 找到要将数据填进去的模板。
3. 找到你要渲染的位置。这个位置就是上面html中的int。

2. 条件

格式:

{% raw %}
{{? }}
{% endraw %} //if
{% raw %}
{{?? }}
{% endraw %} //else if
{% raw %}
{{??}}
{% endraw %} //else

模板:

<script id="intTmpl" type="text/template">
    {{? it.name}}
    <p>Hello, my name is {{=it.name}}</p>
    {{?? it.age}}
    <p>I'm {{=it.age}}</p>
    {{??}}
    <p>Nobody here!</p>
</script>

调用方式:

var data = {name: 'John', age: '26'};
var intTmpl = doT.template(document.getElementById('intTmpl').innerText);
document.getElementById('int').innerHTML = intTmpl(data);

调用方式都是一样的。

3. 转译html

格式:
{% raw %}
{{! }}
{% endraw %}
模板:

<script id="intTmpl" type="text/template">
    {{!it.uri}} {{!it.html}}
</script>```
调用方式:  

var data = {uri:”http://www.zhangshuang.top”, html:”html元素“};
剩下的跟上面一样。

转译跟赋值的区别:  
转译是让html标签不使用html引擎渲染，也就是不会解析html构建DOM树，也不渲染树结构、布局、绘制样式等等，而是直接变成字符串渲染出来。  
赋值的话，如果数据中有html标签，就会解析html构建DOM树，渲染树结构，渲染树布局，绘制渲染树。

##### 4. 数组迭代
格式:  
{% raw %}
{{~ }}
{% endraw %}
模板:  

{{~it.array:value:index}}

{{=index+1}}：{{=value}}

{{~}}

调用方式:  

var data = {array: [“a1”, “a2”, “a3”]};
剩下两个步骤跟上面一样。
“`

其中it.array是找到那个数组，value是数组中的每一个值，index是数组的下标，换成a或b或其他都行。

上面这些事比较常用的，甚至，只要会使用json都能很好的使用doT.js，也就是每一个都通过赋值的方式去找。还有一些其他的，如果有想了解的也可以去官网了解一下。