doT.js特點，以及好處這里不再贅述，直接上手
下載點這里
來來來，先找點兒成就感，
這里默認(rèn)頁面已經(jīng)引入了這個js工具了哦
首先模擬一個請求回來的數(shù)據(jù)，這是截取了一部分的杰森串

// 數(shù)據(jù)
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>優(yōu)惠價格：{{= it.newprice || '暫無優(yōu)惠' }}</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時刻：

首先,想要在頁面輸出并渲染數(shù)據(jù)，需要三個部分：定義模板、模板在html中的掛載點、掛載語法部分。
1、先定義輸出模板，看好script中的type的值text/x-dot-template，里面就是正經(jīng)的html標(biāo)簽，模板的語法放在{{}}內(nèi)，輸出內(nèi)容的語法是{{= }},一定要注意{{}}與=前面的中間不能有空格，等于號后面的內(nèi)容可以有空格，{{= it.name }}，這是血淚史啊。。。
2、在body區(qū)域創(chuàng)建一個盒子，用來承載輸出的數(shù)據(jù)模板沒什么好說的，隨便扔一個，定義個ID就行
3、孤男寡女，干柴烈火，就差一個火星兒，那就能薪火相傳了。所以需要一個火星，就是寫在普通script區(qū)域的這串不知好歹的代碼了。首先使用doT.template()獲取到剛剛的模板內(nèi)容，然后獲取到body區(qū)域的掛載點，然后把數(shù)據(jù)傳進(jìn)去basicOutputTmep(data.entity[0])。歐克，給五米伐吳。
*模板中的it是默認(rèn)接收數(shù)據(jù)的名稱

效果是這樣嬸兒滴：

圖片.png

for循環(huán)

<!-- for循環(huán)模板 -->
    <script id="forOutput" type="text/x-dot-template">
        {{ for (var key in it){ }}
            <h2>商品：{{= it[key].name }}</h2>
            <div>優(yōu)惠價格：{{= it[key].newprice || '暫無優(yōu)惠' }}</div>
        {{ } }}
    </script>

<!-- for循環(huán)掛載點 -->
    <div id="forOutputAncher"></div>

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

基本語法

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

沒什么好解釋的，研究一下傳進(jìn)去的數(shù)據(jù)，再看看模板，就歐克了。

效果是這樣嬸兒滴：

圖片.png

數(shù)組的for循環(huán)

<!-- for數(shù)組循環(huán)輸出模板 -->
<script id="forArrayOutput" type="text/x-dot-template">
    <div>今日特價水果:</div>
    {{~it:value:index}}
        {{= index+1 }}、{{= value }}
    {{~}}
</script>
<!-- for數(shù)組循環(huán)輸出掛載點 -->
<div id="forArrayOutputAncher"></div>
<script>
  //for數(shù)組循環(huán)輸出
  var forArrayOutputTemp = doT.template(document.getElementById('forArrayOutput').innerText);
  document.getElementById('forArrayOutputAncher').innerHTML = forArrayOutputTemp(data.array);
</script>

專業(yè)的人，做專業(yè)的事兒，這個語法確實循環(huán)數(shù)組很合適，但是在ThinkPHP等框架搭建的環(huán)境中，這個語法報錯，用上面的for循環(huán)可以解決，

效果是這樣嬸兒滴:

圖片.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>優(yōu)惠價格：{{= it[key].newprice }}</div>
        {{?}}
        <!-- if判斷結(jié)束 -->
    {{ } }}
</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循環(huán)，if判斷的語法

語法                    等價于
{{? }}                   if
{{?? }}                 else if
{{??}}                  else
{{?}}                    if的結(jié)束標(biāo)簽

這個?前面跟{{}}中間也不能有空格，然后就是正經(jīng)的js中的if判斷了

效果是這樣嬸兒滴：

圖片.png

代碼直接輸出

先來段杰森串吧

var codeData = {"html":"<div style='background: #f00; height: 50px; line-height: 50px;text-align:center;color:#fff;'>編碼輸出內(nèi)容</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

有點兒要叨叨的：這里只是基礎(chǔ)的展示，如果用熟練了，可以解鎖各種姿勢，各種配合隨心所欲，這里就不展示了?？偟膩碚f這個東東還是自由度非常高的，可以換著花樣兒。。。不說了，再說好像玷污人家女程序媛作者，嘿嘿，反正就是用起來很舒服的。
哦，對了，還可以模板套模板的，自己去研究吧，另外我這里使用的document.getElementById原生的方式獲取的元素，當(dāng)然可以用jQuery等你熟悉的方式

比如用最后一個例子為實例，最后的js可以這樣寫，當(dāng)然別忘了引入jQuery

<script>
  //編碼輸出
  var codeOutputTemp = doT.template($("#codeOutput").text());
  $("#codeOutputAncher").html(codeOutputTemp(codeData));
</script>