在之前的一篇名為《移動端基於HTML模板和JSON數據的JavaScript交互》的文章中，我向大家說明了為什么要使用JavaScript模板以及如何使用，文末還提到了laytpl、artTemplate、doT、baiduTemplate、kissyTemplate等模板引擎。
本文將舉實例向大家講解幾個常用模板引擎的簡單使用。
演示地址：
模板引擎示例
http://me.52fhy.com/demo/jstemp/
准備工作
演示數據：blog.json
結構：
{
"list": [
{
"title": "這是title",
"url": "http://www.cnblogs.com/52fhy/p/5271447.html",
"desc": "摘要"
},
{
"title": "這是title2",
"url": "http://www.cnblogs.com/52fhy/p/4823390.html",
"desc": "摘要"
}]
}
html頁面：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>demo</title>
<!--weui.css僅為快速的做出頁面，可刪除-->
<link rel="stylesheet" href="static/weui.css"/>
<script src="static/zepto.min.js"></script>
</head>
<body>
<div class="weui_panel weui_panel_access">
<!--內容展示區：實際演示將會去掉，使用js動態生成-->
<div class="weui_panel_hd">文字組合列表</div>
<div class="weui_panel_bd">
<div class="weui_media_box weui_media_text">
<h4 class="weui_media_title">標題一</h4>
<p class="weui_media_desc">由各種物質組成的巨型球狀天體，叫做星球。星球有一定的形狀，有自己的運行軌道。</p>
</div>
</div>
<!--/內容展示區-->
</div>
<script type="text/javascript">
$(function(){
$.ajax({
url: 'static/blog.json',
type: 'get',
dataType: 'json',
success: function (response) {
//后文主要改動的地方之一
//這里暫時為空
},
error: function (jqXHR, textStatus, errorThrown) {
if (textStatus == 'timeout') {
alert('請求超時');
return false;
}
console.log(jqXHR.responseText);
},
});
});
</script>
</body>
下文將講解使用ajax獲取數據並顯示到頁面的『內容展示區』。
不使用模板
這種方式是大家見過或者使用最多的了：
模板
無需模板。
js代碼
在success里面加上代碼：
var htmlList = '';
var data = response.list;
$.each(data, function(i,el) {
htmlList +='<div class="weui_media_box weui_media_text">'+
'<a href="'+ el.url +'" target="_blank"><h4 class="weui_media_title">'+ el.title +'</h4></a>'+
'<p class="weui_media_desc">'+ el.desc +'</p>'+
'</div>';
});
$('.js-blog-list').empty().append(htmlList);
代碼里明顯看到一大堆的拼接符號，顯得不是很優雅，不方便后期維護。
簡單的模板引擎
這里不需要引入第三方模板引擎插件，自己寫一個：
/*
* 實現簡單模板渲染功能 不支持對象嵌套
* 不支持if等語句
*/
String.prototype.temp = function(obj) {
return this.replace(/\$\w+\$/gi, function(matchs) {
var returns = obj[matchs.replace(/\$/g, "")];
return (returns + "") == "undefined"? "": returns;
});
};
記得放到頁面的js代碼里。
模板
<!--模板-->
<textarea class="js-tmp" style="display:none;">
<div class="weui_media_box weui_media_text">
<a href="$url$" class="" target="_blank">
<h4 class="weui_media_title">$title$</h4>
</a>
<p class="weui_media_desc">$desc$</p>
</div>
</textarea>
<!--/模板-->
變量使用$$占位。
這里的模板放在 <textarea> 中，一般情況設置其CSS樣式display:none來隱藏掉textarea。
還有一種方式是模板放在 <script> 中，設置type屬性為text/template或text/html，用id標識:
<script id='test1' type="text/template">
<!-- 模板部分 -->
<!-- 模板結束 -->
</script>
大家喜歡哪種就使用哪種。
js代碼
var htmlList = '';
var data = response.list;
var htmlTemp = $("textarea.js-tmp").val(); //讀取模板內容
$.each(data, function(i,el) {
htmlList += htmlTemp.temp(el); //模板渲染並生成最終內容
});
$('.js-blog-list').empty().append(htmlList);
代碼量並不多，比較簡單。注意temp方法來源於String.prototype.temp。
laytpl
上一篇文章也介紹過這個模板引擎，這里不多介紹，大家可以去其官網看詳細信息。
簡介：
laytpl官網 - 精妙的JavaScript模板引擎 http://laytpl.layui.com/
支持if等語句{{# if(){ //some code ... }} {{# } }}
模版語法:
輸出一個普通字段，不轉義html： {{ d.field }}
輸出一個普通字段，並轉義html： {{= d.field }}
JavaScript腳本： {{# JavaScript statement }}
使用前需要引入laytpl.js：
<script src="laytpl/laytpl.js"></script>
模板
<!--模板-->
<textarea class="js-tmp" style="display:none;">
<div class="weui_media_box weui_media_text">
<a href="{{d.url}}" class="" target="_blank">
<h4 class="weui_media_title">{{d.title}}</h4>
</a>
<p class="weui_media_desc">{{d.desc}}</p>
</div>
</textarea>
<!--/模板-->
laytpl模板引擎使用{{d.變量}}表示變量。注意不要忘記了前綴d.，任何情況都要加上。這也算是模板的一大特色。
js代碼
js代碼很簡單，這里不全部復制過來了，僅顯示與簡單的模板引擎有區別的：
$.each(data, function(i,el) {
//htmlList += htmlTemp.temp(el);
htmlList += laytpl(htmlTemp).render(el);//模板渲染並生成最終內容
});
很簡單吧！注釋的那一行是簡單的模板引擎所用的代碼，這里進行對比。這里不多做解釋。
underscore
underscore是個js工具庫，其種_.underscore()方法支持模板功能。
簡介：
Underscore.js(1.8.3)
中文文檔 http://www.css88.com/doc/underscore/
template_.template(templateString, [settings])
將 JavaScript 模板編譯為可以用於頁面呈現的函數, 對於通過JSON數據源生成復雜的HTML並呈現出來的操作非常有用。
模板函數可以使用 <%= … %>插入變量, 也可以用<% … %>執行任意的 JavaScript 代碼。 如果您希望插入一個值, 並讓其進行HTML轉義,請使用<%- … %>。 當你要給模板函數賦值的時候，可以傳遞一個含有與模板對應屬性的data對象 。
如果您要寫一個一次性的, 您可以傳對象 data 作為第二個參數給模板 template 來直接呈現, 這樣頁面會立即呈現而不是返回一個模板函數。
使用前需要引入underscore-min.js。
模板
<!--模板-->
<textarea class="js-tmp" style="display:none;">
<div class="weui_media_box weui_media_text">
<a href="<%= url %>" class="" target="_blank">
<h4 class="weui_media_title"><%= title %></h4>
</a>
<p class="weui_media_desc"><%= desc %></p>
</div>
</textarea>
<!--/模板-->
underscore使用<%= 變量 %>進行表示。
js代碼
這里同樣僅展示與上例不一樣的地方：
$.each(data, function(i,el) {
//可以這樣：
//var compiled = _.template(htmlTemp);
//htmlList += compiled(el);
/*或者*/
htmlList += _.template(htmlTemp)(el);
});
使用方法其實很相似。
artTemplate
這個還是比較有名的。
簡介：
artTemplate-3.0 新一代 javascript 模板引擎
https://github.com/aui/artTemplate
template.js (簡潔語法版, 2.7kb)
支持if等語句{{ if admin }} {{/if}}
template(id, data)
根據 id 渲染模板。內部會根據document.getElementById(id)查找模板。
如果沒有 data 參數，那么將返回一渲染函數。
性能卓越，執行速度通常是 Mustache 與 tmpl 的 20 多倍（性能測試）
支持運行時調試，可精確定位異常模板所在語句（演示）
對 NodeJS Express 友好支持
安全，默認對輸出進行轉義、在沙箱中運行編譯后的代碼（Node版本可以安全執行用戶上傳的模板）
支持include語句
可在瀏覽器端實現按路徑加載模板（詳情）
支持預編譯，可將模板轉換成為非常精簡的 js 文件
模板語句簡潔，無需前綴引用數據，有簡潔版本與原生語法版本可選
支持所有流行的瀏覽器
artTemplate區分簡潔語法版和原生語法版。這里先演示簡潔語法版。
使用前同樣先引入artTemplate.js:
<script src="artTemplate/template.js"></script>
模板
<!--模板-->
<script id="js-tmp" type="text/html">
<div class="weui_media_box weui_media_text">
<a href="{{ url }}" class="" target="_blank">
<h4 class="weui_media_title">{{ title }}</h4>
</a>
<p class="weui_media_desc">{{ desc }}</p>
</div>
</script>
<!--/模板-->
注意這里模板與前面的示例不一樣了，直接使用一個type="text/html"的script標簽存放模板。artTemplate不支持textarea標簽。
模板里變量使用{{ 變量 }}占位。
js代碼
/本例不再需要手動取模板內容
//var htmlTemp = $("textarea.js-tmp").val();
$.each(data, function(i,el) {
htmlList += template("js-tmp", el); //注意第一個參數是id
});
artTemplate使用基於document.getElementById(id)的方式直接獲取模板內容。這一點與其它模板有點不同，需要注意。
下面再看看artTemplate原生語法版。
需要引入替換成：
<script src="artTemplate/template-native.js"></script>
模板
<!--模板-->
<script id="js-tmp" type="text/html">
<div class="weui_media_box weui_media_text">
<a href="<%= url %>" class="" target="_blank">
<h4 class="weui_media_title"><%= title %></h4>
</a>
<p class="weui_media_desc"><%= desc %></p>
</div>
</script>
<!--/模板-->
原生語法版的artTemplate模板也不一樣，使用<%= 變量 %>的方式表示變量。
js代碼
無需改動，和上面簡潔語法版是一樣的。
BaiduTemplate
宣稱『最簡單好用的JS模板引擎，JS語法學習無成本』 。
簡介：
百度JS模板引擎 baiduTemplate 1.0.6 版 http://tangram.baidu.com/BaiduTemplate/
https://github.com/wangxiao/BaiduTemplate
//方法一：直接傳入data，返回編譯后的HTML片段
var html0 = baidu.template(tpl,data);
//或直接傳入id即可
var html0 = baidu.template('test1',data);
支持if等語句<% if(admin) %> <%}%>
使用前引入：
<script src="BaiduTemplate/baiduTemplate.js"></script>
模板
<!--模板-->
<textarea class="js-tmp" id="js-tmp" style="display:none;">
<div class="weui_media_box weui_media_text">
<a href="<%= url %>" class="" target="_blank">
<h4 class="weui_media_title"><%= title %></h4>
</a>
<p class="weui_media_desc"><%= desc %></p>
</div>
</textarea>
<!--/模板-->
使用<%= 變量 %>的方式表示變量。
js代碼
var htmlTemp = $("textarea.js-tmp").val();
$.each(data, function(i,el) {
//htmlList += baidu.template(htmlTemp,el);
//或者通過ID直接得到模板內容:
htmlList += baidu.template("js-tmp",el);
});
使用很靈活，值得一試。
doT
文檔是英文的，且不是很詳細。但想想用法也是差不多的。
簡介：
doT.js https://github.com/olado/doT
olado/doT: The fastest + concise javascript template engine for nodejs and browsers. Partials, custom delimiters and more.
用法類似underscore的_.template
引入doT.min.js：
<script src="dot/doT.min.js"></script>
模板
<!--模板 ： 需要加對象前綴it-->
<textarea class="js-tmp" style="display:none;">
<div class="weui_media_box weui_media_text">
<a href="{{= it.url }}" class="" target="_blank">
<h4 class="weui_media_title">{{= it.title }}</h4>
</a>
<p class="weui_media_desc">{{= it.desc }}</p>
</div>
</textarea>
<!--/模板-->
和laytpl一樣需要追加前綴。使用{{= it.變量 }}表示變量。
js代碼
$.each(data, function(i,el) {
//htmlList += _.template(htmlTemp)(el);
htmlList += doT.template(htmlTemp)(el);
});
沒什么好說的。這里加入了 _.template的對比，大家看看。
Juicer
簡介：
Juicer – 一個Javascript模板引擎的實現和優化 http://juicer.name/
PaulGuo/Juicer: A Light Javascript Templete Engine. https://github.com/PaulGuo/Juicer
當前最新版本: 0.6.14
Juicer 是一個高效、輕量的前端 (Javascript) 模板引擎，使用 Juicer 可以是你的代碼實現數據和視圖模型的分離(MVC)。除此之外，它還可以在 Node.js 環境中運行。
引入juicer：
<script src="juicer/juicer-min.js"></script>
模板
<!--模板-->
<textarea class="js-tmp" style="display:none;">
<div class="weui_media_box weui_media_text">
<a href="${url}" class="" target="_blank">
<h4 class="weui_media_title">${title}</h4>
</a>
<p class="weui_media_desc">${desc}</p>
</div>
</textarea>
<!--/模板-->
模板表示變量的方式感覺有點別扭，使用的${變量}。
js代碼
$.each(data, function(i,el) {
htmlList += juicer(htmlTemp,el);
});
文章到此結束，講的比較簡單。寫完此文，已經晚上12點了。洗洗睡了，各位晚安。