前言
我們在做前端開發時,經常需要根據后臺返回的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);
結果輸出:
求值(evaluate)Hello world.200
用法:{{ }},可在表達式中使用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/
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92179.html
前言 我們在做前端開發時,經常需要根據后臺返回的json數據動態生成html并插入到頁面中顯示。最簡單的方法就是通過jQuery去遍歷數據拼接html,如以下: var data = { list: [{ id: 1, name: zhangsan, email: zhangsan@lwhweb.co...
摘要:簡介是一個輕邏輯模板解析引擎,它的優勢在于可以應用在等多種編程語言中。這里主要是看中的應用。 mustache簡介 Mustache 是一個 logic-less (輕邏輯)模板解析引擎,它的優勢在于可以應用在 Javascript、PHP、Python、Perl 等多種編程語言中。這里主要是看JavaScript中的應用。Javascript 語言的模板引擎,目前流行有 Mustac...
摘要:置換型模板引擎的優點實現簡單,缺點效率低,無法滿足高負載的應用請求。用途百度詞條模板引擎可以讓網站程序實現界面與數據分離,業務代碼與邏輯代碼的分離,提升開發效率,良好的設計也提高了代碼的復用性。前端模板的出現使得前后端分離成為可能。 模板引擎 模板引擎-百度詞條 什么是模板引擎?(百度詞條) 模板引擎(這里特指用于Web開發的模板引擎)是為了使用戶界面與業務數據分離而產生的,它可以生成...
摘要:前端模板的出現使得前后端分離成為可能。總結本文簡單介紹了模板引擎在前后端的使用,下文我們回到,重點分析下的使用方式以及源碼原理。樓主對于模板引擎的認識比較淺顯,有不正之處希望指出感謝 前言 這篇文章本來不打算寫的,實話說樓主對前端模板的認識還處在非常初級的階段,但是為了整個 源碼解讀系列 的完整性,在深入 Underscore _.template 方法源碼后,覺得還是有必要記下此文,...
摘要:原作者唐斌騰訊什么原名是一個簡單易用的前端模板預編譯工具。本文作者為來自騰訊團隊的唐斌,他在本文中為我們分析了傳統前端模板內嵌的弊端,如開發調試效率低下自動化構建復雜度比較高等特點,并針對目前現狀給出了較好的解決方案。 原作者: 唐斌(騰訊)| TmodJS什么 TmodJS(原名atc)是一個簡單易用的前端模板預編譯工具。它通過預編譯技術讓前端模板突破瀏覽器限制,實現后端模板一樣的同...
閱讀 3688·2021-11-19 09:56
閱讀 1468·2021-09-22 15:11
閱讀 1127·2019-08-30 15:55
閱讀 3371·2019-08-29 14:02
閱讀 2911·2019-08-29 11:07
閱讀 433·2019-08-28 17:52
閱讀 3172·2019-08-26 13:59
閱讀 436·2019-08-26 13:53