JS模版引擎實現原理

阿新 • • 發佈：2019-02-19

前言

模板引擎我用過的和了解的著實不少，如PHP的smarty、Java的freemark，javaScript的Jade、artTemplate、angularJS的模板引擎等，但一直沒有停下里好好思索它們的實現原理。今天有幸看到兩篇好文章，寫得甚是不錯，小生簡單剪輯和歸納了一下。不過文章比較長，有耐心的同學可以看看 ^_^

模板簡介

模板通常是指嵌入了某種動態程式語言程式碼的文字，資料和模板通過某種形式的結合，可以變化出不同的結果。模板通常用來定義顯示的形式，能夠使得資料展現更為豐富，而且容易維護。例如，下面是一個模板的例子：

<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程式碼：

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

如果不使用模板，想要達到同樣的效果，即將上面的資料展現成結果的樣子，需要像下面這樣做：

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

可以看出使用模板有如下好處：

簡化了html的書寫

通過程式設計元素（比如迴圈和條件分支），對資料的展現更具有控制的能力

分離了資料與展現，使得展現的邏輯和效果更易維護

模板引擎

通過分析模板，將資料和模板結合在一起輸出最後的結果的程式稱為模板引擎，模板有很多種，相對應的模板引擎也有很多種。一種比較古老的模板稱為ERB，在很多的web框架中被採用，比如：ASP.NET 、 Rails … 上面的例子就是ERB的例子。在ERB中兩個核心的概念：evaluate和interpolate。表面上evaluate是指包含在<% %>中的部分，interpolate是指包含在<%= %>中的部分。從模板引擎的角度，evaluate中的部分不會直接輸出到結果中，一般用於過程控制；而interpolate中的部分將直接輸出到結果中。

從模板引擎的實現上看，需要依賴程式語言的動態編譯或者動態解釋的特性，以簡化實現和提高效能。例如：ASP.NET利用.NET的動態編譯，將模板編譯成動態的類，並利用反射動態執行類中的程式碼。這種實現實際上是比較複雜的，因為C#是一門靜態的程式語言，但是使用javascript可以利用Function，以極少的程式碼實現一個簡易的模板引擎。本文就來實現一個簡易的ERB模板引擎，以展現javascript的強大之處。

模板文字轉化

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

<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>
    ' + ... ;

我們希望看到的應該是這樣的程式碼：

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

可見，我們只用了很少的程式碼就實現了一個簡易的模板。

總結

模板引擎的實現原理可以概括為5句話：

正則摳出要匹配的內容

裝入陣列

分辨js邏輯部分

引擎函式

把data扔進去

使用場景

畢竟是前端程式碼，所以寫出來是要為前端服務的，平時我們處理的一般是一個html的模板，通常的情況下，模板程式碼是放在script標籤或者textarea中，所以首先是要獲取到這裡頭的東西，然後再來做解析。

另外還有一點很重要，就是在單頁應用開發的時候前端模板引擎的資料如果要利用ajax從伺服器端獲取，那麼這個ajax就不能是非同步的了，而且必須是整個單例中最先載入的才行。因此對於單頁應用開發，模板引擎只能做首屏資料渲染，所有的非同步操作都是無法應用模板引擎的（當然如果你手動呼叫模板函式也是可以做到的）。不過介於以上我的弱點，我強烈建議大家用 angularJS的模板引擎，它可以實現雙向資料繫結，從而避免了一大堆的DOM操作。

遺留的問題

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

因為<%或者%>都是模板的邊界字元，如果模板需要輸出<%或者%>，那麼需要設計轉義的辦法。

如果資料物件中包含有null，顯然不希望最後輸出’null’,所以需要在function_body的程式碼中考慮null的情況。

在模板中每次使用obj的形參引用資料，可能不太方便，可以在function_body新增with(obj||{}){…}，這樣模板中可以直接使用obj的屬性。

可以設計將render返回出去，而不是返回轉化的結果，這樣外部可以快取生成的函式，以提高效能。

JS模版引擎實現原理

前言

模板簡介

模板引擎

模板文字轉化

JavaScript動態函式

實現思路

相對完整的程式碼

總結

使用場景

遺留的問題

JS模版引擎實現原理

js模版引擎開發實戰以及對eval函數的改進

JavaScript模板引擎實現原理和封裝

前端MVC，JS模板替換實現原理

js模版引擎是做什麼用的？

JavaScript 模板引擎實現原理解析

【Node.js】 bodyparser實現原理解析

Vue.js雙向綁定的實現原理

js模態框實現原理

使用DOM解析來實現PHP模版引擎

JS拖拽元素原理及實現程式碼

vue.js和angular雙向資料繫結的實現原理

Javascript模版引擎mustache.js簡介

JS模組化程式設計之AMD模型實現原理（Requirejs瀏覽器模型，nodejs伺服器模型）

JS與Ajax實現非同步區域性重新整理的原理

js instanceof 實現原理

網站統計中的資料收集原理及實現(js埋點實現)

JavaScript模板引擎的應用場景及實現原理

從 JS Event Loop 機制看 Vue 中 nextTick 的實現原理

flask-bootstrap 模版中所需的CSS/JS檔案如何實現本地引入

JS模版引擎實現原理

前言

模板簡介

模板引擎

模板文字轉化

JavaScript動態函式

實現思路

相對完整的程式碼

總結

使用場景

遺留的問題

相關推薦