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本身的程式碼的。所以我們加入了一些標記符，我們這裡用72637aecae1027e7d023ac098a170986來包裹住邏輯碼。

<%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 = &#39;var str = "";&#39;,
    str = str.replace(/[\r\t\n]/g, " ");
while (str.length) {
    if (match = reg.exec(str)) {
        if (/^<%=/.exec(str)) {
            str = str.replace(match[0], &#39;&#39;);
            str2 += (&#39;str +&#39; + match[0].replace(/<%|%>/g, &#39;&#39;));
            str2 += &#39;;&#39;;
        } else {
            str = str.replace(match[0], &#39;&#39;);
            str2 += match[0].replace(/<%|%>/g, &#39;&#39;);
            str2 += &#39;;&#39;;
        }
    } else {
        match = reg2.exec(str)[1];
        str = str.replace(match[0], &#39;&#39;);
        str2 += &#39;str +="&#39;;
        str2 += match[0];
        str2 += &#39;";&#39;;
    }
}
str2 += &#39;return str;&#39;
var f = new Function(str2);
return f.call(data);

}這是自己寫的一個玩具引擎，還有bug，先做一個demo展示吧（畢竟邏輯簡單）。在這裡我們透過簡單的正規，把模板變成了一段純粹的js程式碼，當匯入資料來源後，執行結果就是我們所要的html程式碼了。我們只要執行：

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

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

【相關推薦：javascript影片教學、web前端】

以上是javascript模板引擎是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！