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,这个是代指引用的数据,也就是代码中的datait.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,也就是每一个都通过赋值的方式去找。还有一些其他的,如果有想了解的也可以去官网了解一下。

发表评论

邮箱地址不会被公开。 必填项已用*标注