淺談web中前端模板引擎的使用

模板引擎

模板引擎-百度詞條

什麼是模板引擎？（百度詞條）

模板引擎（這裏特指用於Web開發的模板引擎）是爲了使用戶界面與業務數據分離而產生的，它能夠生成特定格式的文檔，用於網站的模板引擎會生成一個標準的HTML文檔。

原理（百度詞條）

模板引擎的實現方式有不少，最簡單的是「置換型」模板引擎，這類模板引擎將指定模板內容（字符竄）中的特定標記（子字符竄）替換一下變生成了最終須要的業務數據（好比網頁）。

置換型模板引擎的優勢：實現簡單， 缺點： 效率低，沒法知足高負載的應用請求。

用途（百度詞條）

模板引擎可讓（網站）程序實現界面與數據分離，業務代碼與邏輯代碼的分離，提高開發效率，良好的設計也提升了代碼的複用性。

咱們司空見慣的模板安裝卸載等概念，基本上都和模板引擎有着千絲萬縷的聯繫。模板引擎不僅是可讓你實現代碼分離（業務邏輯代碼和用戶界面代碼），也能夠實現數據分離（動態數據與靜態數據），還能夠實現代碼單元共享（代碼重用），設置是多語言、動態頁面與靜態頁面自動均衡（SDE）等等與用戶界面可能沒有關係的功能。

前端模板

AJAX的出現使得先後端分離成爲可能。

後端專一於業務邏輯，爲前端提供接口。

前端經過AJAX的方式向後端的接口請求數據，而後動態渲染頁面。

//假設接口數據以下
//[{friends: "Sharon"}, {friends: "Sandy"}, {friends: "Roc"}]

//假設渲染後的頁面

<div>
    <ul class="friends-list">
        <li>Sharon</li>
        <li>Sandy</li>
        <li>Roc</li>
    </ul>
</div>

模板引擎出現以前，固然是在js中遍歷拼接字符竄。

<div></div>

<script>
//假設接口的數據爲
var data = [{friends: "Sharon"}, {friends: "Sandy"}, {friends: "Roc"}];

var htmlStr = '';

htmlStr += '<ul class="friends-list">';

for(var i= 0; i < data.legnth; i ++ ) {
    htmlStr += '<li>' + data[i].friends + '</li>';
}

htmlStr += '</ul>';

document.querySelector('div').innerHTML = str;
</script>

確實很簡單方便，可是也有不少缺點：

html代碼(View層) 和 JS代碼 （Controller層），UI與邏輯代碼混雜在一塊兒，很是不便於閱讀。 一旦業務複雜起來，不容易維護。

從安全角度來說，也會有代碼注入攻擊風險（code injection)。

從代碼者的角度來說，若是須要拼接的HTML代碼裏有不少引號的話（好比標籤裏面有不少屬性），那麼就很是容易出錯。

---

既然這樣，總要想辦法解決問題！

這就引出模板引擎， Underscore的_.template多是最簡單的前端模板引擎了（或者能夠說，這就是個前端模板函數）。

引用_.template，將以上的代碼改寫。

<div></div>

<script src="http://cdn.bootcss.com/underscore.js/1.8.3/underscore.js"></script>


<script type="text/template" id="tpl">
    <ul class="list">
        <%_.each(data, function(item){%>
            <li><%= item.friends %></li>
        <%});%>
    </ul>
</script>


<script>
// 模擬數據
var data = [{friends: "Sharon"}, {friends: "Sandy"}, {friends: "Roc"}];
var compiled = _.template(document.getElementById("tpl").innerHTML);
var htmlStr = compiled(data);
document.querySelector('div').innerHTML = htmlStr;
</script>

這樣的話，前端須要改HTML代碼，只須要改模板便可。

用戶界面與邏輯代碼不在混雜，可維護性和擴展性大大的提升了。

如何實現一個模板引擎呢？ 實現的思路是什麼呢？

感興趣的話，能夠看看我翻譯的兩篇文章。

翻譯_20行代碼創造JavaScript模板引擎（一）

翻譯_只需20行代碼創造JavaScript模板引擎（二）