doT.js 数据渲染引擎初体验

doT.js特点，以及好处这里不再赘述，直接上手
下载点这里
来来来，先找点儿成就感，
这里默认页面已经引入了这个js工具了哦
首先模拟一个请求回来的数据，这是截取了一部分的杰森串

// 数据
var time = new Date().getFullYear;
var data = {
        'entity':[
            {
                'img':'图片1',
                'name':'商品名称1',
                'oldprice':'1780',
                'newprice':'',
                'sale':'100',
                'details':'详情',
                'buy':'购买链接1',
                'goodsid': '500',
                'time': time
            },
            {
                'img':'图片2',
                'name':'商品名称2',
                'oldprice':'2380',
                'newprice':'2180',
                'sale':'200',
                'details':'详情',
                'buy':'购买链接2',
                'goodsid': '500',
                'time': time
            }
        ],
        'array':[
            '橘子',
            '香蕉',
            '苹果',
            '大鸭梨'
        ]
    }

欧克，搓搓手，开始了

<!-- 基本输出模板 -->
<script id="basicOutput" type="text/x-dot-template">
    <h2>商品：{{= it.name }}</h2>
    <div>优惠价格：{{= it.newprice || '暂无优惠' }}</div>
</script>
<!-- 基本输出挂载点 -->
<div id="basicOutputAnchor"></div>

<script>
// 基本输出
var basicOutputTmep = doT.template(document.getElementById('basicOutput').innerText);
document.getElementById('basicOutputAnchor').innerHTML = basicOutputTmep(data.entity[0]);
</script>

好了，下面装X时刻：

首先,想要在页面输出并渲染数据，需要三个部分：定义模板、模板在html中的挂载点、挂载语法部分。
1、先定义输出模板，看好script中的type的值text/x-dot-template，里面就是正经的html标签，模板的语法放在{{}}内，输出内容的语法是{{= }},一定要注意{{}}与=前面的中间不能有空格，等于号后面的内容可以有空格，{{= it.name }}，这是血泪史啊。。。
2、在body区域创建一个盒子，用来承载输出的数据模板没什么好说的，随便扔一个，定义个ID就行
3、孤男寡女，干柴烈火，就差一个火星儿，那就能薪火相传了。所以需要一个火星，就是写在普通script区域的这串不知好歹的代码了。首先使用doT.template()获取到刚刚的模板内容，然后获取到body区域的挂载点，然后把数据传进去basicOutputTmep(data.entity[0])。欧克，给五米伐吴。
*模板中的it是默认接收数据的名称

效果是这样婶儿滴：

图片.png

for循环

<!-- for循环模板 -->
    <script id="forOutput" type="text/x-dot-template">
        {{ for (var key in it){ }}
            <h2>商品：{{= it[key].name }}</h2>
            <div>优惠价格：{{= it[key].newprice || '暂无优惠' }}</div>
        {{ } }}
    </script>

<!-- for循环挂载点 -->
    <div id="forOutputAncher"></div>

  <script>
//for循环
        var forOutputTemp = doT.template(document.getElementById('forOutput').innerText);
        document.getElementById('forOutputAncher').innerHTML = forOutputTemp(data.entity);
  </script>

基本语法

        {{ for (var key in it){ }}
          
        {{ } }}

没什么好解释的，研究一下传进去的数据，再看看模板，就欧克了。

效果是这样婶儿滴：

图片.png

数组的for循环

<!-- for数组循环输出模板 -->
<script id="forArrayOutput" type="text/x-dot-template">
    <div>今日特价水果:</div>
    {{~it:value:index}}
        {{= index+1 }}、{{= value }}
    {{~}}
</script>
<!-- for数组循环输出挂载点 -->
<div id="forArrayOutputAncher"></div>
<script>
  //for数组循环输出
  var forArrayOutputTemp = doT.template(document.getElementById('forArrayOutput').innerText);
  document.getElementById('forArrayOutputAncher').innerHTML = forArrayOutputTemp(data.array);
</script>

专业的人，做专业的事儿，这个语法确实循环数组很合适，但是在ThinkPHP等框架搭建的环境中，这个语法报错，用上面的for循环可以解决，

效果是这样婶儿滴:

图片.png

if判断

<!-- if判断输出模板 -->
<script id="ifOutput" type="text/x-dot-template">
    {{ for (var key in it){ }}
        <h2>商品：{{= it[key].name }}</h2>
        <!-- if判断开始 -->
        {{? it[key].newprice == ''}}
        <div>商品价格：{{= it[key].oldprice }}</div>
        {{?? it[key].oldprice == ''}}
        <div>暂无价格</div>
        {{??}}
        <del>原价：{{= it[key].oldprice }}</del>
        <div>优惠价格：{{= it[key].newprice }}</div>
        {{?}}
        <!-- if判断结束 -->
    {{ } }}
</script>

<!-- if判断输出挂载点 -->
<div id="ifOutputAncher"></div>

<script>
  //if判断  
  var forArrayOutputTemp = doT.template(document.getElementById('ifOutput').innerText);
  document.getElementById('ifOutputAncher').innerHTML = forArrayOutputTemp(data.entity);
</script>

这里为了效果展示，嵌套了for循环，if判断的语法

语法                    等价于
{{? }}                   if
{{?? }}                 else if
{{??}}                  else
{{?}}                    if的结束标签

这个?前面跟{{}}中间也不能有空格，然后就是正经的js中的if判断了

效果是这样婶儿滴：

图片.png

代码直接输出

先来段杰森串吧

var codeData = {"html":"<div style='background: #f00; height: 50px; line-height: 50px;text-align:center;color:#fff;'>编码输出内容</div>"};

重点来了

<!-- 编码输出模板 -->
<script id="codeOutput" type="text/x-dot-template">
    <h3>直接输出代码:</h3>
    {{!it.html}}
    <h3>编译代码展示:</h3>
    {{=it.html}}
</script>
<!-- 编码输出挂载点 -->
<div id="codeOutputAncher"></div>
<script>
  //编码输出
  var codeOutputTemp = doT.template(document.getElementById('codeOutput').innerText);
  document.getElementById('codeOutputAncher').innerHTML = codeOutputTemp(codeData);
</script>

为了展示效果我写了两种样式，直接输出代码的话{{! }}就欧克

效果是这样婶儿滴：

图片.png

有点儿要叨叨的：这里只是基础的展示，如果用熟练了，可以解锁各种姿势，各种配合随心所欲，这里就不展示了。总的来说这个东东还是自由度非常高的，可以换着花样儿。。。不说了，再说好像玷污人家女程序媛作者，嘿嘿，反正就是用起来很舒服的。
哦，对了，还可以模板套模板的，自己去研究吧，另外我这里使用的document.getElementById原生的方式获取的元素，当然可以用jQuery等你熟悉的方式

比如用最后一个例子为实例，最后的js可以这样写，当然别忘了引入jQuery

<script>
  //编码输出
  var codeOutputTemp = doT.template($("#codeOutput").text());
  $("#codeOutputAncher").html(codeOutputTemp(codeData));
</script>