javascript模板引擎實例分析

本篇內容主要講解“javascript模板引擎實例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“javascript模板引擎實例分析”吧!

JavaScript模板引擎是一種將html結構與其中包含內容分離的方法，是為了使用戶界面與業務數據分離而產生的，可以生成一個標準的html文檔；模板引擎就是在讓動態頁面渲染的時候，可以用于簡化字符串拼接操作的東西。

本教程操作環境：windows10系統、javascript1.8.5版、Dell G3電腦。

javascript模板引擎是什么

模板引擎（這里特指用于Web開發的模板引擎）是為了使用戶界面與業務數據（內容）分離而產生的，它可以生成特定格式的文檔，用于網站的模板引擎就會生成一個標準的HTML文檔。

模板引擎就是為了讓動態頁面渲染的時候，可以簡化字符串的拼接操作的東西。

JavaScript模板是一種將HTML結構與其中包含的內容分離的方法。 模板系統通常會引入一些新語法，但通常使用起來非常簡單，尤其是如果我們以前在其他地方使用過模板系統（例如PHP中的Twig ）。 需要注意的有趣一點是，令牌替換通常由雙大括號（ {{ ... }} ）表示，Mustache和Handlebars源自其大括號（提示：將其側向查看相似性）。

比如我們需要在頁面渲染一個列表：

<li>111</li>
<li>222</li>
<li>333</li>

列表中的數據是動態獲取的一個數組data=['111','222','333']。那么我們直接用代碼寫，需要循環data，然后拼接每一個li的數據。寫慣了頁面的同學，希望把代碼邏輯直接寫在一個html里面，只要更換數據源，就能輸出不同的頁面代碼了。比如我們可以這樣寫：

for(var i = 0; i < this.list.length; i++){
  <li>this.list[i]</li>
}

當更換this.list的數據后，就可以獲得不同的結果了。但是這樣的代碼，是沒法區分哪里是邏輯代碼，哪里是html本身的代碼的。所以我們加入了一些標記符，我們這里用<% %>來包裹住邏輯代碼。

<%for(var i = 0; i < this.list.length; i++){%>
  <li><%=this.list[i]%></li>
<%}%>

這段代碼我們可以加在script標簽內，修改type為text/html或者其它格式，在需要使用的時候，通過dom獲取到里面的文本內容。如果js可以理解這段代碼，就可以通過變更數據源來更新模板內容了。我們可以通過正則匹配，捕獲所有的邏輯代碼，然后進行分析。這里我取了巧，利用js可以new Function執行代碼的途徑，將邏輯代碼以外的部分，加成了一個字符串，執行后輸出最后的字符串結果：var etj = function (str, data) {

var reg = /^<%.*?%>/,
    reg2 = /^(.*?)<%/,
    str2 = 'var str = "";',
    str = str.replace(/[\r\t\n]/g, " ");
while (str.length) {
    if (match = reg.exec(str)) {
        if (/^<%=/.exec(str)) {
            str = str.replace(match[0], '');
            str2 += ('str +' + match[0].replace(/<%|%>/g, ''));
            str2 += ';';
        } else {
            str = str.replace(match[0], '');
            str2 += match[0].replace(/<%|%>/g, '');
            str2 += ';';
        }
    } else {
        match = reg2.exec(str)[1];
        str = str.replace(match[0], '');
        str2 += 'str +="';
        str2 += match[0];
        str2 += '";';
    }
}
str2 += 'return str;'
var f = new Function(str2);
return f.call(data);

}這是自己寫的一個玩具引擎，還有bug，先做一個demo展示吧（畢竟邏輯簡單）。在這里我們通過簡單的正則，把模板變成了一段純粹的js代碼，當導入數據源后，執行結果就是我們所要的html代碼了。我們只要執行：

etj(str, {'list': [1, 2, 3]});

就可以了，這樣，html的邏輯也不用嵌入js的代碼中。

到此，相信大家對“javascript模板引擎實例分析”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！