前端模板引擎doT.js的使用

原文地址：https://blog.lanweihong.com/posts/16522/

前言

我們在做前端開發(fā)時，經(jīng)常需要根據(jù)后臺返回的json數(shù)據(jù)動態(tài)生成html并插入到頁面中顯示。最簡單的方法就是通過jQuery去遍歷數(shù)據(jù)拼接html，如以下：

<script>
    var data = {
        list: [{
            id: 1,
            name: 'zhangsan',
            email: 'zhangsan@lwhweb.com'
        }, {
            id: 2,
            name: 'lisi',
            email: 'lisi@lwhweb.com'
        }]
    };
    var html = '';
    $.each(data.list, function(index, item) {
        html += '<tr></tr>';
        html += '<td>' + item.id + '</td>';
        html += '<td>' + item.name + '</td>';
        html += '<td>' + item.email + '</td>';
        html += '</tr>'
    });
    $('#userList').empty();
    $('#userList').html(html); 
</script>

但是，這種通過拼接html的方式使用在比較簡單的結(jié)構(gòu)還好；如果結(jié)構(gòu)比較復雜，拼接的時候還得注意引號之間的嵌套，而且代碼維護起來也比較困難，代碼可讀性也差。因此使用模板引擎可以幫我們很好的避免這個問題。

常用的模板引擎有artTemplate、Jade、Mustache、doT.js、juicer等，此編文章僅介紹doT.js的使用。

簡介

官方Github：https://github.com/olado/doT

doT.js快速，體積小并不依賴其他插件。

使用方法

配置

doT.templateSettings默認配置:

doT.templateSettings = {
  evaluate:    /\{\{([\s\S]+?)\}\}/g,
  interpolate: /\{\{=([\s\S]+?)\}\}/g,
  encode:      /\{\{!([\s\S]+?)\}\}/g,
  use:         /\{\{#([\s\S]+?)\}\}/g,
  define:      /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
  conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
  iterate:     /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,
  varname: 'it',
  strip: true,
  append: true,  
  selfcontained: false
};

如果你想使用自己的分隔符，可以根據(jù)自己需求修改doT.templateSettings中的正則。

以下是默認的分隔符列表:

{{ }}：用于求值(evaluate)

{{= }}：用于插值(interpolate)

{{! }}： 用于插值編碼(encode)

{{# }}：用于編譯時求值/包含局部模板(use)

{{## #}}：用于編譯時定義(define)

{{? }}：用于條件語句(conditional)

{{~ }}：用于數(shù)組迭代(iterate)

其他說明

varname : 模板數(shù)據(jù)引用變量名

strip : 控制空白字符, true:全部去掉空格; false:保留空格

append : 性能優(yōu)化設置。通過它調(diào)整性能，根據(jù)使用的 javascript 引擎和模板的大小，append 設置成 false，可能會產(chǎn)生更好的效果

模板編譯函數(shù)

function(tmpl, c, def)

tmpl : 模板文本

c : 自定義編譯設置，如果為 null，用到 doT.templateSettings

def : 編譯時求值的數(shù)據(jù)

默認情況下，調(diào)用此函數(shù)編譯產(chǎn)生的方法有一個參數(shù)data，命名為it，即默認配置的varname。

插值(evaluation)

用法：{{= }}

創(chuàng)建模板，默認情況下，模板中的數(shù)據(jù)用it作為引用，可修改配置中的varname來改變變量名；

<script type="text/x-dot-template" id="testTpl">
    <div>{{= it.msg }}</div>
    <div>{{= it.code }}</div>
</script>

使用：

var message = {
    msg: 'Hello world.',
    code: 200
};
//使用doT.template(tplText)函數(shù)，tplText為模板文本
var tpl = doT.template($("#testTpl").text()); //某些瀏覽器可能會取不到模板內(nèi)容，可用$("#testTpl").html()
//傳入數(shù)據(jù)獲取html
var html = tpl(message);
console.log(html);

結(jié)果輸出：

<div class="msg">Hello world.</div> <div class="code">200</div>

求值(evaluate)

用法：{{ }}，可在表達式中使用js腳本

創(chuàng)建模板：

<script type="text/x-dot-template" id="testTpl2">
    {{ if (it.status == true) { }}
        <div class="success">操作成功</div>
    {{ } else { }}
        <div class="error">操作錯誤</div>
    {{ } }}
</script>

使用：

var result = {
    status: true,
    error: ''
};
var tpl = doT.template($("#testTpl2").text());
var html = tpl(result);
console.log(html);

結(jié)果輸出：

<div class="success">操作成功</div>

條件語句(conditional)

用法：{{? }}

在上個 求值(evaluate) 例子中的模板恰好是條件判斷，我們可以用{{? }}改寫模板以達到一樣的效果：

<script type="text/x-dot-template" id="testTpl2">
    {{? it.status == true }}
        <div class="success">操作成功</div>
    {{?? }}
        <div class="error">操作錯誤</div>
    {{? }}
</script>

使用方法參考求值(evaluate)例子，最后輸出html是一樣的。

數(shù)組迭代(iterate)

用法：{{~ }}

創(chuàng)建模板：

<script type="text/x-dot-template" id="testTpl3">
    {{~ it.list:item:index }}
        <tr>
            <td>{{= index + 1 }}</td>
            <td>{{= item.name }}</td>
            <td>{{= item.email }}</td>
        </tr>
    {{~ }}
</script>

使用：

var data = {
    status: true,
    msg: 'success',
    list: [{
        id: 1,
        name: 'zhangsan',
        email: 'zhangsan@lwhweb.com'
    }, {
        id: 2,
        name: 'lisi',
        email: 'lisi@lwhweb.com'
    }]
};
var tpl = doT.template($("#testTpl3").html());
var html = tpl(data);
console.log(html);

結(jié)果輸出：

<tr> <td>1</td> <td>zhangsan</td> <td>zhangsan@lwhweb.com</td> </tr>  <tr> <td>2</td> <td>lisi</td> <td>lisi@lwhweb.com</td> </tr>

編譯時包含模板和編譯時定義

用法：{{# }}和{{## #}}

創(chuàng)建模板：

<script type="text/x-dot-template" id="testHeaderTpl">
           <h2>標題：{{= it.title }}</h2>
</script>

<script type="text/x-dot-template" id="testPageTpl5">
    <h2>以下使用'testHeaderTpl'模板內(nèi)容：</h2>
    {{#def.header }}
    {{= it.content }}
    {{#def.injectIntoHeader || '' }}
</script>

<script type="text/x-dot-template" id="testBodyTpl">
    <h2>工作內(nèi)容：</h2>
    {{#def.body }}
    <h2>以下是編譯時定義</h2>
    {{##def.injectIntoHeader:
        <div>截止時間：{{= it.dealine }} </div>
    #}}
</script>

使用：

var work = {
    title: '完善項目一需求提取',
    content: '請研發(fā)部爭取在月底前提取項目一需求',
    dealine: '2017-11-25 23:00'
};
var def = {
    header: $('#testHeaderTpl').text(),
    body: $('#testPageTpl5').text()
};
var tpl = doT.template($("#testBodyTpl").html(), null, def);
var html = tpl(work);
console.log(html);

結(jié)果輸出：

<h2>工作內(nèi)容：</h2>  <h2>以下使用'testHeaderTpl'模板內(nèi)容：</h2>  <h2>標題：完善項目一需求提取</h2>  請研發(fā)部爭取在月底前提取項目一需求  <div>截止時間：2017-11-25 23:00 </div>   <h2>以下是編譯時定義</h2>

更多用法可參考官方說明：http://olado.github.io/doT/

參考文檔

http://olado.github.io/doT/

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。