[總結] js 模板引擎

時間  2019-12-07
標籤 總結 模板 引擎 欄目 JavaScript 简体版
原文   原文鏈接

嗯，這也是一個學習筆記，材料均來自網絡，有改動。。
文章主要分爲三部分，第一部分經過實現一個簡易的ERB模板引擎來介紹其原理，參考javascript模板引擎和實現原理，有改動，看了不少關於模板引擎的文章，就這一篇最通俗易懂，適合入門。第二部分介紹一個很是NB的模板引擎，參考JavaScript template engine in just 20 lines，超級簡潔，僅20行，適合進階。第三部分介紹一種js模板引擎——art Template，之因此介紹他是由於。。。。你猜。javascript

一.入門－簡易的ERB模板引擎

模板簡介

模板一般是指嵌入了某種動態編程語言代碼的文本，數據和模板經過某種形式的結合，能夠變化出不一樣的結果。模板一般用來定義顯示的形式，可以使得數據展示更爲豐富，並且容易維護。例如，下面是一個模板的例子：html

<ul>
    <% for(var i in items){ %>
        <li class='<%= items[i].status %>'><%= items[i].text %></li>
    <% } %>
</ul>

若是有以下items數據：前端

items:[
    { text: 'text1' ,status:'done' },
    { text: 'text2' ,status:'pending' },
    { text: 'text3' ,status:'pending' },
    { text: 'text4' ,status:'processing' }
]

經過某種方式的結合，能夠產生下面的Html代碼：java

<ul>
    <li class='done'>text1<li>
    <li class='pending'>text2<li>
    <li class='pending'>text3<li>
    <li class='processing'>text4<li>
</ul>

若是不使用模板，想要達到一樣的效果，即將上面的數據展示成結果的樣子，須要像下面這樣將html標籤拼接成字符串：web

var temp = '<ul>';
for(var i in items){
    temp += "<li class='" + items[i].status + "'>" + items[i].text + "</li>";
}
temp += '</ul>';

能夠看出使用模板有以下好處：正則表達式

  • 簡化了html的書寫編程

  • 經過編程元素（好比循環和條件分支），對數據的展示更具備控制的能力segmentfault

  • 分離了數據與展示，使得展示的邏輯和效果更易維護後端

模板引擎

經過分析模板，將數據和模板結合在一塊兒輸出最後的結果的程序稱爲模板引擎，模板有不少種，相對應的模板引擎也有不少種。一種比較古老的模板稱爲ERB，在不少的web框架中被採用，好比：ASP.NET 、 Rails ... 上面的例子就是ERB的例子。在ERB中兩個核心的概念：evaluate和interpolate。表面上evaluate是指包含在<% %>中的部分，interpolate是指包含在<%= %>中的部分。從模板引擎的角度，evaluate中的部分不會直接輸出到結果中，通常用於過程控制；而interpolate中的部分將直接輸出到結果中。
從模板引擎的實現上看，須要依賴編程語言的動態編譯或者動態解釋的特性，以簡化實現和提升性能。例如：ASP.NET利用.NET的動態編譯，將模板編譯成動態的類，並利用反射動態執行類中的代碼。這種實現其實是比較複雜的，由於C#是一門靜態的編程語言，可是使用javascript能夠利用Function，以極少的代碼實現一個簡易的模板引擎。數組

模板文本轉化

針對上面的例子，回顧一下使用模板和不使用模板的差異。
模板寫法：

<ul>
    <% for(var i in items){ %>
        <li class='<%= items[i].status %>'><%= items[i].text %></li>
    <% } %>
</ul>

非模板寫法：

var temp = '<ul>';
for(var i in items){
    temp += "<li class='" + items[i].status + "'>" + items[i].text + "</li>";
}
temp += '</ul>';

仔細觀察，實際上這兩種方法十分「類似」，可以找到某種意義上的一一對應。若是可以將模板的文本變成代碼執行，那麼就能實現模板轉化。在轉化過程當中有兩個原則：

  • 遇到普通的文本直接當成字符串拼接

  • 遇到interpolate(即<%= %>)，將其中的內容當成變量拼接在字符串中

  • 遇到evaluate(即<% %>)，直接當成代碼

將上面的例子按照上述原則進行變換，再添加一個總的函數：

var template = function(items){
    var temp = '';
    //開始變換
    temp += '<ul>';
    for(var i in items){
        temp += "<li class='" + items[i].status + "'>" + items[i].text + "</li>";
    }
    temp += '</ul>';
}

最後執行這個函數，傳入數據參數便可：

var result = template(items);

javascript動態函數

可見上面的轉化邏輯其實十分簡單，可是關鍵的問題是，模板是變化的，這意味着生成的程序代碼也必須是在運行時生成並執行的。好在javascript有許多動態特性，其中一個強大的特性就是Function。
咱們一般使用function關鍵字在js中聲明函數，不多用Function。在js中function是字面語法，js的運行時會將字面的function轉化成Function對象，因此實際上Function提供了更爲底層和靈活的機制。

用 Function 類直接建立函數的語法以下：

var function_name = new Function(arg1, arg2, ..., argN, function_body)

例如：

//建立動態函數    
var sayHi = new Function("sName", "sMessage", "alert(\"Hello \" + sName + sMessage);");
//執行    
sayHi('Hello','World');

函數體和參數都可以經過字符串來建立！So cool！有了這個特性，能夠將模板文本轉化成函數體的字符串，這樣就能夠建立動態的函數來動態的調用了。

實現思路

首先利用正則式來描述interpolate和evaluate，括號用來分組捕獲：

var interpolate_reg = /<%=([\s\S]+?)%>/g;
var evaluate_reg = /<%([\s\S]+?)%>/g;

爲了對整個模板進行連續的匹配將這兩個正則式合併在一塊兒，可是注意，全部可以匹配interpolate的字符串都能匹配evaluate，因此interpolate須要有較高的優先級：

var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>/g

設計一個函數用於轉化模板，輸入參數爲模板文本字串和數據對象

var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>/g
//text: 傳入的模板文本字串
//data: 數據對象
var template = function(text,data){ ... }

使用replace方法，進行正則的匹配和「替換」，實際上咱們的目的不是要替換interpolate或evaluate，而是在匹配的過程當中構建出「方法體"：

var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>/g
//text: 傳入的模板文本字串
//data: 數據對象
var template = function(text,data){
    var index = 0;//記錄當前掃描到哪裏了
    var function_body = "var temp = '';";
    function_body += "temp += '";
    text.replace(matcher,function(match,interpolate,evaluate,offset){
        //找到第一個匹配後，將前面部分做爲普通字符串拼接的表達式
        function_body += text.slice(index,offset);

        //若是是<% ... %>直接做爲代碼片斷，evaluate就是捕獲的分組
        if(evaluate){
            function_body += "';" + evaluate + "temp += '";
        }
        //若是是<%= ... %>拼接字符串，interpolate就是捕獲的分組
        if(interpolate){
            function_body += "' + " + interpolate + " + '";
        }
        //遞增index，跳過evaluate或者interpolate
        index = offset + match.length;
        //這裏的return沒有什麼意義，由於關鍵不是替換text，而是構建function_body
        return match;
    });
    //最後的代碼應該是返回temp
    function_body += "';return temp;";
}

至此，function_body雖然是個字符串，但裏面的內容其實是一段函數代碼，能夠用這個變量來動態建立一個函數對象，並經過data參數調用：

var render = new Function('obj', function_body);
return render(data);

這樣render就是一個方法，能夠調用，方法內部的代碼由模板的內容構造，可是大體的框架應該是這樣的：

function render(obj){
    var temp = '';
    temp += ...
    ...
    return temp;
}

注意到，方法的形參是obj，因此模板內部引用的變量應該是obj：

<script id='template' type='javascript/template'>
    <ul>
        <% for(var i in obj){ %>
            <li class="<%= obj[i].status %>"><%= obj[i].text %></li>
        <% } %>
    </ul>
</script>

看似到這裏就OK了，可是有個必須解決的問題。模板文本中可能包含\r \n \u2028 \u2029等字符，這些字符若是出如今代碼中，會出錯，好比下面的代碼是錯誤的：

temp += '
        <ul>
    ' + ... ;

注意：javascript 中的字符串是不能跨行的！
咱們但願看到的應該是這樣的代碼：

temp += '\n \t\t<ul>\n' + ...;

這樣須要把\n前面的\轉義成\\便可，最終變成字面的\\n。

另外，還有一個問題是，上面的代碼沒法將最後一個evaluate或者interpolate後面的部分拼接進來，解決這個問題的辦法也很簡單，只須要在正則式中添加一個行尾的匹配便可：

var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>|$/g;

相對完整的代碼

var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>|$/g

//模板文本中的特殊字符轉義處理
var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
var escapes = {
    "'":      "'",
    '\\':     '\\',
    '\r':     'r',
    '\n':     'n',
    '\t':     't',
    '\u2028': 'u2028',
    '\u2029': 'u2029'
  };

//text: 傳入的模板文本字串
//data: 數據對象
var template = function(text,data){
    var index = 0;//記錄當前掃描到哪裏了
    var function_body = "var temp = '';";
    function_body += "temp += '";
    text.replace(matcher,function(match,interpolate,evaluate,offset){
        //找到第一個匹配後，將前面部分做爲普通字符串拼接的表達式
        //添加了處理轉義字符
        function_body += text.slice(index,offset)
            .replace(escaper, function(match) { return '\\' + escapes[match]; });

        //若是是<% ... %>直接做爲代碼片斷，evaluate就是捕獲的分組
        if(evaluate){
            function_body += "';" + evaluate + "temp += '";
        }
        //若是是<%= ... %>拼接字符串，interpolate就是捕獲的分組
        if(interpolate){
            function_body += "' + " + interpolate + " + '";
        }
        //遞增index，跳過evaluate或者interpolate
        index = offset + match.length;
        //這裏的return沒有什麼意義，由於關鍵不是替換text，而是構建function_body
        return match;
    });
    //最後的代碼應該是返回temp
    function_body += "';return temp;";
    var render = new Function('obj', function_body);
    return render(data);
}

調用代碼能夠是這樣：

<script id='template' type='javascript/template'>
    <ul>
        <% for(var i in obj){ %>
            <li class="<%= obj[i].status %>"><%= obj[i].text %></li>
        <% } %>
    </ul>
</script>

...

var text = document.getElementById('template').innerHTML;
var items = [
    { text: 'text1' ,status:'done' },
    { text: 'text2' ,status:'pending' },
    { text: 'text3' ,status:'pending' },
    { text: 'text4' ,status:'processing' }
];
console.log(template(text,items));

遺留的問題

還有幾個細節的問題須要注意：

  • 由於<%或者%>都是模板的邊界字符，若是模板須要輸出<%或者%>，那麼須要設計轉義的辦法

  • 若是數據對象中包含有null，顯然不但願最後輸出null,因此須要在function_body的代碼中考慮null的狀況

  • 在模板中每次使用obj的形參引用數據，可能不太方便，能夠在function_body添加with(obj||{}){...}，這樣模板中能夠直接使用obj的屬性

  • 能夠設計將render返回出去，而不是返回轉化的結果，這樣外部能夠緩存生成的函數，以提升性能

二.進階－超簡潔js模板引擎

js模板引擎

var TemplateEngine = function(html, options) {
    var re = /<%([^%>]+)?%>/g, reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, code = 'var r=[];\n', cursor = 0, match;//1
    var add = function(line, js) {//2
        js? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') :
            (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
        return add;
    }
    while(match = re.exec(html)) {//3
        add(html.slice(cursor, match.index))(match[1], true);
        cursor = match.index + match[0].length;
    }
    add(html.substr(cursor, html.length - cursor));
    code += 'return r.join("");';
    return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);//4
}

解釋

標註1

re = /<%([^%>]+)?%>/g

該正則表達式用於獲取模板中的標識字段<%...%>,而後用傳入引擎中的數據去填充它們.

reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g

該正則的做用是，若是一段JS代碼以if, for, else, switch, case, break, |開頭，那它們將會直接添加到函數體中。若是不是，則會被push到code變量中。

若是你看不懂上述正則表達式，請參考這裏 js正則表達式語法

標註2

var add = function(line, js) {
        js? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') :
            (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
        return add;
    }

js模板由三部分組成

1.普通文本字符串，好比標籤元素ul等
2.js流程控制語句，好比if, for, else等等，對應ERB模板中的interpolate
3.變量，須要用輸入的數據替換的部分，對應ERB模板中的evaluate

注意：有的將模板分爲兩部分，js代碼（對應2）和文本（對應一、3）

註釋2中add函數的做用是生成渲染函數的函數體字符串（Function函數體字符串），該函數最終返回HTML文檔字符串。模板中的全部部分都須要拼接組成函數體字符串，但根據是否須要拼接到HTML文檔字符串中，須要對不一樣部分執行不一樣的操做。js代碼做爲流程控制語句，不須要拼接到HTML文檔字符串中（函數返回的字符串中不會包括該部分），直接做爲代碼執行，而對於文本須要拼接成HTML文檔字符串，具體分析以下：

註釋：拼接HTML文檔字符串有兩種方式，一種是利用+運算符，另外一種是將須要拼接到HTML文檔字符串的部分push到數組中，而後利用'join'函數合併。

1.對於普通文本字符串，須要做爲字符串拼接到HTML字符串中，此時，js取false，將執行

(code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');

注意：push到數組中的內容須要被""包圍的，所以若是普通文本中包含有"，須要轉譯爲\\"

2.對於流程控制語句和變量，他們都是被標識符號<%%>包圍的部分，對應的js去true，將執行

(code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n')

1）對於js流程控制語句，line.match(reExp)爲true,不須要拼接到HTML文檔字符串中，所以不須要push到數組中，而直接拼接到函數體字符串中。
2)對於變量，須要拼接到HTML文檔字符串中，可是不能被""包圍，不然會做爲字符串輸出，而不會做爲變量。

另外：注意add函數最後又返回了自身，相似於js中的鏈式操做。

標註3

while(match = re.exec(html)) {
        add(html.slice(cursor, match.index))(match[1], true);
        cursor = match.index + match[0].length;
    }

這裏須要瞭解exec函數,不懂得請移步這裏JavaScript exec() 方法

標註4

return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);

利用apply設置Function函數做用域，在函數內部，this指向options,能夠利用this.attr訪問options.attr。

三.art Template

簡介

javascript模板引擎是數據與界面分離工做中最重要一環。雖然每一個引擎從模板語法、語法解析、變量賦值、字符串拼接的實現方式各有所不一樣，但關鍵的渲染原理仍然是動態執行 javascript 字符串。

artTemplate 是新一代 javascript 模板引擎，它採用預編譯方式讓性能有了質的飛躍，而且充分利用 javascript 引擎特性，使得其性能不管在前端仍是後端都有極其出色的表現。

art Template高效的祕密

預編譯

在通常的模板引擎實現原理中，由於要對模板變量進行賦值，因此每次渲染都須要動態編譯 javascript 字符串完成變量賦值。而 artTemplate 的編譯賦值過程倒是在渲染以前完成的，這種方式稱之爲「預編譯」。

更快的字符串拼接方式

不少人誤覺得數組 push 方法拼接字符串會比 += 快，要知道這僅僅是 IE6-8 的瀏覽器下。實測代表現代瀏覽器使用 += 會比數組 push 方法快，而在 v8 引擎中，使用 += 方式比數組拼接快 4.7 倍。因此 artTemplate 根據 javascript 引擎特性採用了兩種不一樣的字符串拼接方式。

使用方法

  1. 引用js文件：<script src="js/arttmpl.js"></script>

  2. 頁面中，使用一個type="text/template"的script標籤存放模板：

<script id='doctor-template' type="text/template">
        <% for(var i in data){ var item=data[i]; %>
            <li class="mui-table-view-cell mui-media ">
                <a href="javascript:;" class="mui-navigate-right">
                    <div class="mui-media-object mui-pull-left">
                        <img src="<%=(item.photo)%>" width="100%">
                        <span class="mui-badge mui-badge-danger"><%=(item.score)%>分</span>    
                    </div>
                    <div class="mui-media-body">
                        <%=(item.name)%>&nbsp;<span class="mui-badge mui-badge-warning"><%=(item.position)%></span>
                        <p class="mui-ellipsis"><%=(item.hospital)%></p>
                        <p class="mui-ellipsis"><%=(item.desc)%></p>
                    </div>
                </a>
            </li>
        <% } %>
    </script>

模板邏輯語法開始與結束的界定符號爲<% 與 %>，若<%後面緊跟=號則輸出變量內容。同ERB模板

3.渲染模板

template.render(id, data);

繼續上面的例子：

var fragment = template('doctor-template', {
                "data":[
                    {
                        name:"王靜",
                        score:4.5,
                        photo:'images/logo.png',
                        hospital:"江蘇省中醫院",
                        desc:'婦科、不孕不育症、月經病等',
                        position:'副醫師'
                    },
                    {
                        name:"啦啦",
                        score:4.9,
                        photo:'images/logo.png',
                        hospital:"鼓樓醫院",
                        desc:'兒童呼吸系統疾病的診治，對於兒童疾病',
                        position:'主治醫師'
                    }
                ]
            });

四.參考

1.javascript 模板引擎系列文章（一）
2.JavaScript模板引擎原理，幾行代碼的事兒
3.高性能JavaScript模板引擎原理解析
4.javascript模板引擎和實現原理
5.js模板引擎——art Template
6.[譯] 只有 20 行的 JavaScript 模板引擎
7.javascript模板引擎和實現原理
8.推薦五款流行的JavaScript模板引擎

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程