模板引擎doT.js用法詳解

時間 2019-12-01

原文原文鏈接

做爲一名前端攻城師，常常會遇到從後臺ajax拉取數據再顯示在頁面的情境，一開始咱們都是從後臺拉取再用字符串拼接的方式去更達到數據顯示在頁面！javascript

<!-- 顯示區域 -->
<div id="testid"></div>

<script type="text/javascript">
var testjson={"name":"張三","age":31,"fun":"吃東西"};//假設是後臺拉取的數據
document.getElementById("testid").innerHTML="<p>"+
                                                "<span>姓名："+testjson.name+"</span>"+
                                                "<span>年齡："+testjson.age+"</span>"+
                                                "<span>愛好："+testjson.fun+"</span>"+
                                           "</p>";
</script>

這樣不但寫起來很麻煩，必須保證每個引號正確，特別是若是數據裏還有單雙號的時候，還要注意單雙引號混用，或者用轉義，效率很低下，很容易出錯，後面有接觸到知道有JS模板引擎像百度的baiduTemplate(百度)\artTemplate（騰訊）\juicer（淘寶）\doT\ tmpl\ handlebars\ easyTemplate\ underscoretemplate \ mustache \kissytemplate，在網上幾翻選擇，我仍是選擇了doT.js,它的大小隻有4KB，渲染性能很好，並且直接支持原生的寫法，不用依賴別的庫。下面就讓咱們來一塊兒瞭解下它的用法，讓數據渲染飛起來吧！html

首先準備工做，引入doT.js：前端

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

一、最常規用法{{=it.attr}}java

<!-- 要顯示的區域 -->
<div id="testid"></div>
<script type="text/x-dot-template" id="useType0">//模板存放區域 修改type類型，以避免會被解析成js
    <p>
        <span>姓名：{{=it.name}}</span>
        <span>年齡：{{=it.age}}</span>
        <span>愛好：{{=it.fun}}</span>
    </p>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
    /*基本用法*/
    var testjson={"name":"張三","age":31,"fun":"吃東西"},//定義要渲染數據，通常是從後臺ajax拉取
        tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//數據渲染
</script>

獲得的結果以下：jquery

二、循環數組{{~}}ios

<!-- 要顯示的區域 -->
<div id="testid"></div>
<!-- 模板存放區域 修改type類型，以避免會被解析成js -->
<script type="text/x-dot-template" id="useType0">
    <ul>
        {{~it:value:index}}
        <li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span><span>愛好：{{=value.fun}}</span></li>
        {{~}}
    </ul>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
    /*基本用法*/
    var testjson=[
        {"name":"張三","age":31,"fun":"吃東西"},
        {"name":"李四","age":24,"fun":"上網"},
        {"name":"王五","age":70,"fun":"散步，跑步"}
    ],//定義要渲染數據，通常是從後臺ajax拉取
        tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//數據渲染
</script>

獲得的結果以下：git

三、條件渲染{{？}}{{？？}}，至關於原生的if else ifgithub

<!-- 要顯示的區域 -->
<div id="testid"></div>
<!-- 模板存放區域 修改type類型，以避免會被解析成js -->
<script type="text/x-dot-template" id="useType0">
    <ul>
        {{~it:value:index}}
            {{?!value.age}}
                <li><span>姓名：{{=value.name}}</span><span>年齡：年齡數據缺失</span><span>愛好：{{=value.fun}}</span></li>
            {{??!value.fun}}
                <li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span><span>愛好：無趣的人</span></li>
            {{??}}
                <li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span><span>愛好：{{=value.fun}}</span></li>
            {{?}}
        {{~}}
    </ul>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
    /*基本用法*/
    var testjson=[
        {"name":"張三","age":31,"fun":"吃東西"},
        {"name":"李四","fun":"上網"},
        {"name":"王五","age":70}
    ],//定義要渲染數據，通常是從後臺ajax拉取
        tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//數據渲染
</script>

獲得的結果以下：ajax

四、編碼渲染{{!}},主要是爲了防止代碼注入以保障安全，如傳入一個HTML片斷或js片斷，它會以字符串的形式渲染json

<!-- 要顯示的區域 -->
<div id="testid"></div>
<!-- 模板存放區域 修改type類型，以避免會被解析成js -->
<script type="text/x-dot-template" id="useType0">
    <ul>
        {{~it:value:index}}
            {{?value.bz}}
            <li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span><span>愛好：{{!value.html}}</span></li>
            {{??}}
            <li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span><span>愛好：{{=value.html}}</span></li>
            {{?}}
        {{~}}
    </ul>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
    /*基本用法*/
    var testjson=[
        {"name":"張三","age":31,"html":"<b>呵呵</b>","bz":true},
        {"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
    ],//定義要渲染數據，通常是從後臺ajax拉取
        tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//數據渲染
</script>

獲得的結果以下：

五、支持共用模塊定義{{##def.}}定義，{{#def.}}引用模塊

<!-- 要顯示的區域 -->
<div id="testid"></div>
<!-- 模板存放區域 修改type類型，以避免會被解析成js -->
<script type="text/x-dot-template" id="useType0">
    <!-- 模塊定義0 -->
    {{##def.togeter0:
        <li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span><span>愛好：{{!value.html}}</span></li>
    #}}
    <!-- 模塊定義1 -->
    {{##def.togeter1:
        <li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span><span>愛好：{{=value.html}}</span></li>
    #}}
    <ul>
        {{~it:value:index}}
            {{?value.bz}}
                <!-- 引用模塊0 -->
                {{#def.togeter0}}
            {{??}}
                <!-- 引用模塊1 -->
                {{#def.togeter1}}
            {{?}}
        {{~}}
    </ul>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
    /*基本用法*/
    var testjson=[
        {"name":"張三","age":31,"html":"<b>呵呵</b>","bz":true},
        {"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
    ],//定義要渲染數據，通常是從後臺ajax拉取
        tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//數據渲染
</script>

獲得的結果以下：

注：模塊定義也能夠一個json數據定義，再在生成模板函數函數的時候傳入便可，示例以下，其中tmpljson就是在外面以json定義的模塊：

<!-- 要顯示的區域 -->
<div id="testid"></div>
<!-- 模板存放區域 修改type類型，以避免會被解析成js -->
<script type="text/x-dot-template" id="useType0">
    <!-- 模塊定義0 -->
    {{##def.togeter0:
        <li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span><span>愛好：{{!value.html}}</span></li>
    #}}
    <!-- 模塊定義1 -->
    {{##def.togeter1:
        <li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span><span>愛好：{{=value.html}}</span></li>
    #}}
    <ul>
        {{~it:value:index}}
            {{?value.bz===true}}
                <!-- 引用模塊0 -->
                {{#def.togeter0}}
            {{??value.bz===false}}
                <!-- 引用模塊1 -->
                {{#def.togeter1}}
            {{??}}
                <!-- 引用傳入的模塊 -->
                {{#def.testmode}}
            {{?}}
        {{~}}
    </ul>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
    /*基本用法*/
    var testjson=[
        {"name":"張三","age":31,"html":"<b>呵呵</b>","bz":true},
        {"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false},
        {"name":"李四","age":24,"html":"<b>哈哈</b>"}
    ],//定義要渲染數據，通常是從後臺ajax拉取
        tmpljson={"testmode":"<li><span>姓名：{{=value.name}}</span><span>年齡：{{=value.age}}</span></li>"}//以json格式定義模塊
        tmpltxt=doT.template(document.getElementById("useType0").innerHTML,undefined,tmpljson);//生成模板方法,傳入了json定義的模塊
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//數據渲染
</script>

獲得的結果以下：

六、用原生的循環，條件渲染，這也是doT.js的一大吸引個人特色

<!-- 要顯示的區域 -->
<div id="testid"></div>
<!-- 模板存放區域 修改type類型，以避免會被解析成js -->
<script type="text/x-dot-template" id="useType0">
    <!-- 模塊定義0 -->
    {{##def.togeter0:
        <li><span>姓名：{{=itz.name}}</span><span>年齡：{{=itz.age}}</span><span>愛好：{{!itz.html}}</span></li>
    #}}
    <!-- 模塊定義1 -->
    {{##def.togeter1:
        <li><span>姓名：{{=itz.name}}</span><span>年齡：{{=itz.age}}</span><span>愛好：{{=itz.html}}</span></li>
    #}}
    <ul>
        {{ for(var i=0;i<it.length;i++){ }}
            {{ var itz=it[i]; }}
            {{ if(itz.bz){ }}
                <!-- 引用模塊0 -->
                {{#def.togeter0}}
            {{ }else{ }}
                <!-- 引用模塊1 -->
                {{#def.togeter1}}
            {{ } }}
        {{ } }}
    </ul>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
    /*基本用法*/
    var testjson=[
        {"name":"張三","age":31,"html":"<b>呵呵</b>","bz":true},
        {"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
    ],//定義要渲染數據，通常是從後臺ajax拉取
        tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//數據渲染
</script>

獲得的結果以下：

七、嵌套循環（很經常使用）

先準備好存放內容得容器：<div id="category-goods"></div>

<!-- 必須加上type="text/x-dot-template" -->
    <script id="category-goods-tmpl" type="text/x-dot-template">
        {{~it:item:index}}
        <div class="rxsp">
            <div class="aui-pull-left">
                <h3> {{= item.name }} 【索引： {{= index }} 】</h3>
            </div>
            <a class="aui-pull-right ">
                查看更多
                <span class="aui-iconfont aui-icon-right"></span>
            </a>
        </div>

        <div class="aui-list-item-inner">
            <div class="aui-row aui-row-padded">
                {{~it[index].goods:item:j}}
                <div class="aui-col-xs-6">
                    <img src="{{= item.logoimg }}" onclick="">
                    <p class="tit">{{= item.name }} </p>
                    <div class="aui-info" style="padding-top:0">
                        <div class="aui-info-item">
                            <span class="red">￥{{= item.price }}
                        </div>
                    </div>
                </div>
                {{~}}
            </div>
        </div>
        {{~}}
    </script>

    <script type="text/javascript">
        var goods_list = {
            "list": [{
                    "id": "1",
                    "name": "衣服",
                    "goods": [{
                            "goods_id": "1",
                            "name": "衣服1",
                            "price": "100",
                            "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                        },
                        {
                            "goods_id": "2",
                            "name": "衣服2",
                            "price": "200",
                            "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                        }
                    ]
                },
                {
                    "id": "2",
                    "name": "鞋子",
                    "goods": [{
                            "goods_id": "3",
                            "name": "鞋子1",
                            "price": "100",
                            "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                        },
                        {
                            "goods_id": "4",
                            "name": "鞋子2",
                            "price": "200",
                            "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                        }
                    ]
                }
            ]
        };

//        var tmpltxt = doT.template(document.getElementById("category-goods-tmpl").innerHTML);
//        document.getElementById("category-goods").innerHTML = tmpltxt(goods_list.list); //數據渲染

        var evalText = doT.template($("#category-goods-tmpl").html());
        $("#category-goods").html(evalText(goods_list.list));
    </script>