Web前端模板引擎の字符串模板

Pluser 發(fā)布于2019-08-20 18:15 / 390人閱讀

摘要：這是一個系列文章，將會介紹目前前端領(lǐng)域里用到的三種模板引擎技術(shù)，它們分別是基于字符串的模板基于操作的模板基于虛擬的模板本文是這個系列的第一篇，著重介紹基于字符串的模板引擎的實(shí)現(xiàn)原理，分析它的優(yōu)點(diǎn)缺點(diǎn)以及使用的場景。

這是一個系列文章，將會介紹目前Web前端領(lǐng)域里用到的三種模板引擎技術(shù)，它們分別是：

基于字符串的模板

基于Dom操作的模板

基于虛擬Dom的模板

本文是這個系列的第一篇，著重介紹基于字符串的模板引擎的實(shí)現(xiàn)原理，分析它的優(yōu)點(diǎn)缺點(diǎn)以及使用的場景。

進(jìn)入正文之前，我們先回顧一下在模板引擎出現(xiàn)之前，暫且稱之為“石器時代”，我們是如何利用JS改變頁面結(jié)構(gòu)的。對于下面的代碼：


    我們正處于刀耕火種的石器時代

如果我們需要修改container里面的內(nèi)容，一般有2種方法：

通過JS的DOM API直接操作DOM

    var newTxt = "石器時代需要自己擼工具，摩擦摩擦，似魔鬼的步伐...";
    var container = document.getElementById("container");
    var desc = document.createElement("H1");
    var txt = document.createTextNode(newTxt);
    desc.appendChild(txt);
    container.replaceChild(desc, container.childNodes[0]);

通過innerHTML批量修改DOM結(jié)構(gòu)

    var newTxt = "石器時代需要自己擼工具，摩擦摩擦，似魔鬼的步伐...";
    var template = "" + newTxt + "";
    var container = document.getElementById("container");
    container.innerHTML=template;

相比之下，第二種方式通過innerHTML更新DOM要簡單許多，它無需考慮DOM的層級結(jié)構(gòu)，只要做簡單的字符串拼接就能實(shí)現(xiàn)需求。但這種方式的問題是代碼可讀性很差，同時開發(fā)者還必須保證最終拼接的字符串的正確性。當(dāng)需要作出修改時，面對一坨的字符也很痛苦。

在上面的例子中，我們的需求是將一個變量注入到模板當(dāng)中，類似ES6的模板字符串：

var newTxt = "石器時代需要自己擼工具，摩擦摩擦，似魔鬼的步伐...";
var template = `${newTxt}
`;

但ES6這種現(xiàn)代化的常規(guī)武器，對石器時代而言是天方夜譚。部落里的老司機(jī)憑借深厚的JS功底，擼出了各種基于字符串的模板。這些模板又可以細(xì)分為2類：一種是不包含邏輯處理，只作數(shù)據(jù)綁定用的，如mustache.js；另一種是既有邏輯處理，也有數(shù)據(jù)綁定的，如EJS。

下面，我以EJS的語法為例，實(shí)現(xiàn)一個簡單的字符串模板引擎。模版引擎的編譯流程如下：

1.首先，需要編譯模板字符串，將其轉(zhuǎn)換為JS能夠理解的語法。第一步是利用正則表達(dá)式，區(qū)分出字符串中哪些是模板語法，哪些是正常的HTML標(biāo)簽。以下是一個EJS語法的例子：


    <% for(var i=0; i
        <%= supplies[i] %>
    <% } %>

在‘<%=’和‘%>’之間是JS的表達(dá)式，而在‘<%’和’%>‘之間是普通的JS語句，可以進(jìn)行邏輯判斷和條件循環(huán)等操作。可以使用以下正則表達(dá)式抽取：

// 匹配表達(dá)式，只能有一行
let evalExpr = /<\%=(.+?)\%>/g;

// 匹配語句，可以有多行
let expr = /<\%([sS]+?)\%>/g;

對于普通的HTML標(biāo)簽，需要用自定義的echo函數(shù)包裹一下，在使用eval函數(shù)編譯的時候直接輸出字符串。echo函數(shù)的定義如下：

// 臨時變量，保存編譯后的模板字符串
let output = "";
  
// 直接將html字符串拼接到output后面
function echo(html){
    output += html;
}

完整的compile函數(shù)代碼如下：

function compile(template){
  
    // 匹配表達(dá)式，只能有一行
    let evalExpr = /<\%=(.+?)\%>/g;
  
    // 匹配語句，可以有多行
    let expr = /<\%([sS]+?)\%>/g;
  
    // 內(nèi)容為空的部分
    let empty = /echo("");/g;
  
    template = template
        // 轉(zhuǎn)換JS表達(dá)式
        .replace(evalExpr, "`); 
 echo( $1 ); 
 echo(`")
    
        // 轉(zhuǎn)換JS語句
        .replace(expr, "`); 
 $1 
 echo(`");
  
    // 在模板的最外層包裹一個echo
    template = "echo(`" + template + "`);";
  
    // 清除空的echo
    template = template
        .replace(empty, "");
  
    // 保存編譯后的字符串，此處用了ES6的模板字符串特性，相當(dāng)于eval了一下
    let script = 
        `(function parse(data){
  
            // 臨時變量，保存編譯后的模板字符串
            var output = "";
  
            // 直接將html字符串拼接到output后面
            function echo(html){
                output += html;
            }
  
            // 包含echo的模板字符串
            ${ template }
  
            return output;
        })`;
    
    return script;
}

經(jīng)過正則表達(dá)式處理后，這段代碼：


    <% for(var i=0; i
        <%= supplies[i] %>
    <% } %>

會轉(zhuǎn)化為：

    echo(``); 
        for(var i=0; i`); 
                echo( data.supplies[i] ); 
            echo(``); 
        }  
    echo(`
`);

完整代碼亦可見JSFiddle

2.第二步，我們將模板中用到的數(shù)據(jù)data注入到compile函數(shù)的parse子函數(shù)中，生成最終的字符串。

3.最后，我們再通過innerHTML，把字符串插入到DOM合適的位置。

字符串模板之所以能夠更新頁面，最核心的原理是使用innerHTML這個api將字符串直接插入到DOM節(jié)點(diǎn)中。因此，我們分析字符串模板的優(yōu)缺點(diǎn)就離不開使用innerHTML更新DOM的優(yōu)缺點(diǎn)。先談?wù)剝?yōu)點(diǎn)：

直觀，容易理解。更新后的DOM結(jié)構(gòu)可以一目了然的反映在字符串當(dāng)中。

容易維護(hù)。當(dāng)需要更改模板時，直接改相應(yīng)字符串就可以，新人也容易上手。

可用于服務(wù)端渲染。簡單的字符串拼接，不依賴DOM，對應(yīng)的字符串可由服務(wù)器端直接生成。

再來談?wù)勅秉c(diǎn)：

安全隱患。模板字符串中完全可以出現(xiàn)此類代碼：

慢！特別對于需要頻繁更新的場景。由于innerHTML是直接替換掉原有元素，因此就涉及到相應(yīng)節(jié)點(diǎn)和對應(yīng)事件的卸載，然后再裝載新的節(jié)點(diǎn)和事件。在這個過程中，界面也會被重排和重繪，對性能是嚴(yán)重的損耗。

不智能。當(dāng)只需要修改模板里面的某一部分?jǐn)?shù)據(jù)時，整個模板頁都需要被刷新。

維護(hù)困難。這不是打臉嘛，上面才說了容易維護(hù)，這里又講維護(hù)困難！？這當(dāng)然是有原因的嘛。當(dāng)不需要考慮性能的時候，一個頁面可能只需要維護(hù)一個模板，這難道不簡單？但考慮到性能的時候，就需要對模板進(jìn)行拆分和拼裝，維護(hù)這些相互依賴的模板會讓人很崩潰。

綜上所述，我們可以很簡單的總結(jié)出字符串模板引擎的使用場景：如果你的應(yīng)用比較簡單，交互也不多，也希望有一個快速的首屏?xí)r間，請使用字符串模板引擎。反之，你硬要上字符串模板引擎的話，我建議你先看看我下一期或者下下一期的文章再做決定，哈哈哈哈～

未完待續(xù)...