JavaScript模板引擎是一種將html結構與其中包含內容分離的方法，是為了使用戶介面與業務資料分離而產生的，可以產生一個標準的html文件；模板引擎就是在讓動態頁面渲染的時候，可以用來簡化字串拼接操作的東西。
本教學操作環境：windows10系統、javascript1.8.5版、Dell G3電腦。
模板引擎（這裡特別指用於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影片教學、web前端】
以上是javascript模板引擎是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
