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

defcon 發布于2019-08-01 18:15 / 2155人閱讀

前言

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

但是，這種通過拼接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來改變變量名；

使用：

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

結果輸出：

Hello world.
 200

求值(evaluate)

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

創建模板：

使用：

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

結果輸出：

操作成功

條件語句(conditional)

用法：{{? }}

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

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

數組迭代(iterate)

用法：{{~ }}

創建模板：

使用：

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

結果輸出：

 1 zhangsan zhangsan@lwhweb.com    2 lisi lisi@lwhweb.com

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

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

創建模板：

使用：

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

結果輸出：

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

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

參考

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51599.html

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

前言我們在做前端開發時，經常需要根據后臺返回的json數據動態生成html并插入到頁面中顯示。最簡單的方法就是通過jQuery去遍歷數據拼接html，如以下： var data = { list: [{ id: 1, name: zhangsan, email: zhangsan@lwhweb.co...

劉玉平 2019-08-22 11:19 評論0 收藏0
mustache：web模板引擎

摘要：簡介是一個輕邏輯模板解析引擎，它的優勢在于可以應用在等多種編程語言中。這里主要是看中的應用。 mustache簡介 Mustache 是一個 logic-less （輕邏輯）模板解析引擎，它的優勢在于可以應用在 Javascript、PHP、Python、Perl 等多種編程語言中。這里主要是看JavaScript中的應用。Javascript 語言的模板引擎，目前流行有 Mustac...

klivitamJ 2019-08-20 16:36 評論0 收藏0
淺談web中前端模板引擎的使用

摘要：置換型模板引擎的優點實現簡單，缺點效率低，無法滿足高負載的應用請求。用途百度詞條模板引擎可以讓網站程序實現界面與數據分離，業務代碼與邏輯代碼的分離，提升開發效率，良好的設計也提高了代碼的復用性。前端模板的出現使得前后端分離成為可能。模板引擎模板引擎-百度詞條什么是模板引擎？（百度詞條）模板引擎（這里特指用于Web開發的模板引擎）是為了使用戶界面與業務數據分離而產生的，它可以生成...

妤鋒シ 2019-08-23 12:36 評論0 收藏0
淺談 Web 中前后端模板引擎的使用

摘要：前端模板的出現使得前后端分離成為可能。總結本文簡單介紹了模板引擎在前后端的使用，下文我們回到，重點分析下的使用方式以及源碼原理。樓主對于模板引擎的認識比較淺顯，有不正之處希望指出感謝前言這篇文章本來不打算寫的，實話說樓主對前端模板的認識還處在非常初級的階段，但是為了整個源碼解讀系列的完整性，在深入 Underscore _.template 方法源碼后，覺得還是有必要記下此文，...

chenjiang3 2019-08-20 11:56 評論0 收藏0
基于TmodJS的前端模板工程化解決方案

摘要：原作者唐斌騰訊什么原名是一個簡單易用的前端模板預編譯工具。本文作者為來自騰訊團隊的唐斌，他在本文中為我們分析了傳統前端模板內嵌的弊端，如開發調試效率低下自動化構建復雜度比較高等特點，并針對目前現狀給出了較好的解決方案。原作者: 唐斌（騰訊）| TmodJS什么 TmodJS（原名atc）是一個簡單易用的前端模板預編譯工具。它通過預編譯技術讓前端模板突破瀏覽器限制，實現后端模板一樣的同...

zhaochunqi 2019-08-20 13:35 評論0 收藏0