JavaScript模板引擎實例應用

時間 2019-11-30

原文原文鏈接

在以前的一篇名爲《移動端基於HTML模板和JSON數據的JavaScript交互》的文章中，我向你們說明了爲何要使用JavaScript模板以及如何使用，文末還提到了laytpl、artTemplate、doT、baiduTemplate、kissyTemplate等模板引擎。javascript

本文將舉實例向你們講解幾個經常使用模板引擎的簡單使用。css

演示地址：
模板引擎示例
http://me.52fhy.com/demo/jstemp/html

準備工做

演示數據：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頁面：java

<!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獲取數據並顯示到頁面的『內容展現區』。node

不使用模板

這種方式是你們見過或者使用最多的了：git

模板
無需模板。github

js代碼
在success裏面加上代碼：ajax

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

代碼裏明顯看到一大堆的拼接符號，顯得不是很優雅，不方便後期維護。json

簡單的模板引擎

這裏不須要引入第三方模板引擎插件，本身寫一個：

/*
 * 實現簡單模板渲染功能  不支持對象嵌套
 * 不支持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點了。洗洗睡了，各位晚安。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。