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

lanweihong發表於2019-02-16
前端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:    /{{([sS]+?)}}/g,
  interpolate: /{{=([sS]+?)}}/g,
  encode:      /{{!([sS]+?)}}/g,
  use:         /{{#([sS]+?)}}/g,
  define:      /{{##s*([w.$]+)s*(:|=)([sS]+?)#}}/g,
  conditional: /{{?(?)?s*([sS]*?)s*}}/g,
  iterate:     /{{~s*(?:}}|([sS]+?)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/

相關文章