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

前言

咱們在作前端開發時，常常須要根據後臺返回的json數據動態生成html並插入到頁面中顯示。最簡單的方法就是經過jQuery去遍歷數據拼接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的方式使用在比較簡單的結構還好；若是結構比較複雜，拼接的時候還得注意引號之間的嵌套，並且代碼維護起來也比較困難，代碼可讀性也差。所以使用模板引擎能夠幫咱們很好的避免這個問題。

經常使用的模板引擎有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
};

若是你想使用本身的分隔符，能夠根據本身需求修改doT.templateSettings中的正則。

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

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

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

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

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

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

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

{{~ }}：用於數組迭代(iterate)

其餘說明

varname : 模板數據引用變量名

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

append : 性能優化設置。經過它調整性能，根據使用的 javascript 引擎和模板的大小，append 設置成 false，可能會產生更好的效果

模板編譯函數

function(tmpl, c, def)

tmpl : 模板文本

c : 自定義編譯設置，若是爲 null，用到 doT.templateSettings

def : 編譯時求值的數據

默認狀況下，調用此函數編譯產生的方法有一個參數data，命名爲it，即默認配置的varname。

插值(evaluation)

用法：{{= }}

建立模板，默認狀況下，模板中的數據用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)函數，tplText爲模板文本
var tpl = doT.template($("#testTpl").text()); //某些瀏覽器可能會取不到模板內容，可用$("#testTpl").html()
//傳入數據獲取html
var html = tpl(message);
console.log(html);

結果輸出：

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

求值(evaluate)

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

建立模板：

<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);

結果輸出：

<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是同樣的。

數組迭代(iterate)

用法：{{~ }}

建立模板：

<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);

結果輸出：

<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>

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

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

建立模板：

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

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

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

使用：

var work = {
    title: '完善項目一需求提取',
    content: '請研發部爭取在月底前提取項目一需求',
    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);

結果輸出：

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

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

參考

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

原文地址：https://www.lwhweb.com/2017/11/25/dot-js/