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

defcon 發(fā)布于2019-08-01 18:15 / 2185人閱讀

前言

我們?cè)谧銮岸碎_(kāi)發(fā)時(shí)，經(jīng)常需要根據(jù)后臺(tái)返回的json數(shù)據(jù)動(dòng)態(tài)生成html并插入到頁(yè)面中顯示。最簡(jiǎn)單的方法就是通過(guò)jQuery去遍歷數(shù)據(jù)拼接html，如以下：

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

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

簡(jiǎn)介

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

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

使用方法 配置

doT.templateSettings默認(rèn)配置:

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

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

以下是默認(rèn)的分隔符列表:

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

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

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

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

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

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

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

其他說(shuō)明

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

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

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

模板編譯函數(shù)

function(tmpl, c, def)

tmpl : 模板文本

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

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

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

插值(evaluation)

用法：{{= }}

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

使用：

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

結(jié)果輸出：

Hello world.
 200

求值(evaluate)

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

創(chuàng)建模板：

使用：

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

結(jié)果輸出：

操作成功

條件語(yǔ)句(conditional)

用法：{{? }}

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

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

數(shù)組迭代(iterate)

用法：{{~ }}

創(chuàng)建模板：

使用：

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

結(jié)果輸出：

 1 zhangsan [email protected]    2 lisi [email protected]

編譯時(shí)包含模板和編譯時(shí)定義

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

創(chuàng)建模板：

使用：

var work = {
    title: "完善項(xiàng)目一需求提取",
    content: "請(qǐng)研發(fā)部爭(zhēng)取在月底前提取項(xiàng)目一需求",
    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é)果輸出：

工作內(nèi)容：
  以下使用"testHeaderTpl"模板內(nèi)容：
  標(biāo)題：完善項(xiàng)目一需求提取
  請(qǐng)研發(fā)部爭(zhēng)取在月底前提取項(xiàng)目一需求  截止時(shí)間：2017-11-25 23:00 
   以下是編譯時(shí)定義

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

參考

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

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

GPU云服務(wù)器云服務(wù)器 dot.js視頻 php模板的使用模板引擎 python模板引擎

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51599.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

defcon

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

剖析虛幻渲染體系（12）- 移動(dòng)端專題Part 3（渲染優(yōu)化）

閱讀 1529·2021-11-19 11:38
圖書館選座系統(tǒng)

閱讀 3592·2021-11-15 11:37
美國(guó)主要港口之一休斯頓港遭網(wǎng)絡(luò)攻擊運(yùn)營(yíng)及系統(tǒng)未受影響

閱讀 840·2021-09-30 09:48
VmShell：國(guó)慶期間每日免費(fèi)抽送虛擬(實(shí)體)VISA環(huán)球金卡!免費(fèi)用戶抽獎(jiǎng)/affman免費(fèi)領(lǐng)

閱讀 993·2021-09-29 09:46
Unicode? 標(biāo)準(zhǔn) 14.0 版本發(fā)布

閱讀 927·2021-09-23 11:22
一張圖搞懂Flex布局

閱讀 1904·2019-08-30 15:44
connect和next的withRouter共同時(shí)候時(shí)踩坑

閱讀 3432·2019-08-26 13:58
snabbdom源碼解析（一）準(zhǔn)備工作

閱讀 2410·2019-08-26 13:26

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

工作內(nèi)容：

以下使用"testHeaderTpl"模板內(nèi)容：

標(biāo)題：完善項(xiàng)目一需求提取

以下是編譯時(shí)定義

相關(guān)文章