Web前端模板引擎字串模板

這是乙個系列文章，將會介紹目前web前端領域裡用到的三種模板引擎技術，它們分別是：

本文是這個系列的第一篇，著重介紹基於字串的模板引擎的實現原理，分析它的優點缺點以及使用的場景。

進入正文之前，我們先回顧一下在模板引擎出現之前，暫且稱之為「石器時代」，我們是如何利用js改變頁面結構的。對於下面的**：

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

如果我們需要修改container裡面的內容，一般有2種方法：

var newtxt = '石器時代需要自己擼工具，摩擦摩擦，似魔鬼的步伐...';
var container = document.getelementbyid('container');
var desc = document.createelement('h1');
var txt = document.createtextnode(newtxt);
container.replacechild(desc, container.childnodes[0]);

var newtxt = '石器時代需要自己擼工具，摩擦摩擦，似魔鬼的步伐...';
var template = '';
var container = document.getelementbyid('container');
container.innerhtml=template;

相比之下，第二種方式通過innerhtml更新dom要簡單許多，它無需考慮dom的層級結構，只要做簡單的字串拼接就能實現需求。但這種方式的問題是**可讀性很差，同時開發者還必須保證最終拼接的字串的正確性。當需要作出修改時，面對一坨的字元也很痛苦。

在上面的例子中，我們的需求是將乙個變數注入到模板當中，類似es6的模板字串：

var newtxt = '石器時代需要自己擼工具，摩擦摩擦，似魔鬼的步伐...';
var template = ``;

但es6這種現代化的常規**，對石器時代而言是天方夜譚。部落裡的老司機憑藉深厚的js功底，擼出了各種基於字串的模板。這些模板又可以細分為2類：一種是不包含邏輯處理，只作資料繫結用的，如mustache.js；另一種是既有邏輯處理，也有資料繫結的，如ejs。

下面，我以ejs的語法為例，實現乙個簡單的字串模板引擎。模版引擎的編譯流程如下：

1.首先，需要編譯模板字串，將其轉換為js能夠理解的語法。第一步是利用正規表示式，區分出字串中哪些是模板語法，哪些是正常的html標籤。以下是乙個ejs語法的例子：

在『』之間是js的表示式，而在『『之間是普通的js語句，可以進行邏輯判斷和條件迴圈等操作。可以使用以下正規表示式抽取：

// 匹配表示式，只能有一行
let evalexpr = /\/g;
// 匹配語句，可以有多行
let expr = /\/g;

對於普通的html標籤，需要用自定義的echo函式包裹一下，在使用eval函式編譯的時候直接輸出字串。echo函式的定義如下：

// 臨時變數，儲存編譯後的模板字串
let output = "";
// 直接將html字串拼接到output後面
function echo(html)

完整的compile函式**如下：

function compile(template)
// 包含echo的模板字串
$return output;
})`;
return script;
}

經過正規表示式處理後，這段**：

會轉化為：

echo(``);

完整**亦可見jsfiddle

2.第二步，我們將模板中用到的資料data注入到compile函式的parse子函式中，生成最終的字串。

3.最後，我們再通過innerhtml，把字串插入到dom合適的位置。

字串模板之所以能夠更新頁面，最核心的原理是使用innerhtml這個api將字串直接插入到dom節點中。因此，我們分析字串模板的優缺點就離不開使用innerhtml更新dom的優缺點。先談談優點：

直觀，容易理解。更新後的dom結構可以一目了然的反映在字串當中。

容易維護。當需要更改模板時，直接改相應字串就可以，新人也容易上手。

可用於服務端渲染。簡單的字串拼接，不依賴dom，對應的字串可由伺服器端直接生成。

再來談談缺點：

安全隱患。模板字串中完全可以出現此類**：

慢！特別對於需要頻繁更新的場景。由於innerhtml是直接替換掉原有元素，因此就涉及到相應節點和對應事件的解除安裝，然後再裝載新的節點和事件。在這個過程中，介面也會被重排和重繪，對效能是嚴重的損耗。

不智慧型。當只需要修改模板裡面的某一部分資料時，整個模板頁都需要被重新整理。

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

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

未完待續...

Web前端模板引擎 字串模板

字串模板

模板字串

模板字串

相關推薦

Web前端模板引擎字串模板