JavaScript模板引擎是一種將數(shù)據(jù)和HTML結(jié)構(gòu)整合到一起的工具，它能夠根據(jù)一定的規(guī)則，將數(shù)據(jù)填充到預設的HTML模板中，生成最終的HTML代碼。有很多流行的JavaScript模板引擎,如 Handlebars、Mustache、EJS、Vue.js等。

下面以Handlebars為例，來介紹如何使用JavaScript模板引擎。

//HTML模板
<script id="myTemplate" type="text/x-handlebars-template"><div><p>Name: {{ name }}</p><p>Age: {{ age }}</p></div></script>

//JavaScript代碼
var source = document.getElementById("myTemplate").innerHTML;
var template = Handlebars.compile(source);
var data = {
name: "Lucy",
age: 18
};
var html = template(data);
document.getElementById("output").innerHTML = html;

在上面的代碼中，我們首先定義了一個HTML模板，使用<script>標簽將它嵌入到頁面中。這個模板中包含了一些占位符，例如{{name}}和{{age}}，它們用于后面填充數(shù)據(jù)。然后在JavaScript代碼中，我們使用Handlebars.compile方法對模板進行編譯，生成一個可執(zhí)行的模板函數(shù)。

接著我們定義數(shù)據(jù)，將需要動態(tài)填充的數(shù)據(jù)存儲在一個對象中。最后，我們調(diào)用模板函數(shù)，將數(shù)據(jù)和模板整合到一起，生成最終的HTML代碼，并將它插入到頁面中的指定位置。

除了上面的基本用法外，JavaScript模板引擎還支持更高級的特性，例如循環(huán)、條件語句、自定義輔助函數(shù)等。這些特性能夠更加靈活地控制HTML的渲染過程，讓我們可以輕松地處理各種復雜的渲染場景。

//循環(huán)示例
<script id="myTemplate" type="text/x-handlebars-template"><ul>{{#each items}}
<li>{{ this }}</li>{{/each}}
</ul></script>

//JavaScript代碼
var source = document.getElementById("myTemplate").innerHTML;
var template = Handlebars.compile(source);
var data = {
items: ["item1", "item2", "item3"]
};
var html = template(data);
document.getElementById("output").innerHTML = html;

在上面的示例中，我們利用了Handlebars的#each語句實現(xiàn)了一個簡單的循環(huán)。我們首先定義了一個數(shù)組items，然后在模板中使用#each語句遍歷這個數(shù)組，并通過this關鍵字獲取每個數(shù)組項的值，最后將它們以<li>的形式輸出到頁面中。

總之，JavaScript模板引擎是一種非常有用的工具，通過它我們能夠更加靈活地控制HTML的渲染過程，優(yōu)化頁面性能，提高開發(fā)效率。