一文帶你深入理解JavaScript模板引擎

更新時間：2023年06月18日 09:29:32 作者：純愛掌門人

在Web前端開發(fā)中，需要將數(shù)據(jù)動態(tài)渲染到頁面上，隨著應用程序的復雜度增加，數(shù)據(jù)渲染的邏輯也變得越來越復雜，這時候就需要使用模板引擎來幫助我們動態(tài)生成HTML標記，本文將深入介紹 JavaScript 模板引擎，幫助讀者更好地理解和應用模板引擎

什么是模板引擎

模板引擎是一種將數(shù)據(jù)和模板結合起來生成最終結果的工具，它將一個模板和一個數(shù)據(jù)對象作為輸入，通過模板解析和渲染生成最終的結果。通俗地說，模板引擎就是用來生成 HTML 等標記的工具。

為什么需要模板引擎

在 Web 開發(fā)中，數(shù)據(jù)的呈現(xiàn)通常是基于 HTML 和 CSS 的，而數(shù)據(jù)的變化又是非常頻繁的，需要根據(jù)數(shù)據(jù)動態(tài)生成 HTML 標記。手動拼接 HTML 標記顯然是一種非常低效的方式，不僅容易出錯，而且難以維護。這時候就需要使用模板引擎來完成面向數(shù)據(jù)的標記生成。

前端模板引擎的分類

JavaScript 模板引擎通常分為以下幾類：

原生字符串拼接
字符串模板
函數(shù)式模板
編譯型模板

原生字符串拼接

最早期的模板引擎實現(xiàn)方式是通過字符串拼接來生成需要的 HTML，這種實現(xiàn)方式通常需要手動拼接 HTML 標簽，非常繁瑣，同時也容易出錯。下面是一個使用原生字符串拼接實現(xiàn)模板引擎的示例：

function render(data) {
    var html = "<ul>";
    for (var i = 0; i < data.length; i++) {
        html += "<li>" + data[i].name + "</li>";
    }
    html += "</ul>";
    return html;
}

這種實現(xiàn)方式的缺點是難以維護，但是優(yōu)點是非常簡單。

字符串模板

字符串模板通過字符串替換來實現(xiàn)模板引擎，它可以在字符串中插入變量和表達式，因此字符串模板看起來更加直觀和易于維護。下面是一個基于字符串模板的簡單模板引擎實現(xiàn)示例：

function render(data) {
    var tpl = "<ul>";
    for (var i = 0; i < data.length; i++) {
        tpl += "<li>{{name}}</li>".replace("{{name}}", data[i].name);
    }
    tpl += "</ul>";
    return tpl;
}

這種實現(xiàn)方式相比于原生字符串拼接更加直觀和易于維護。

函數(shù)式模板

函數(shù)式模板通常是通過函數(shù)的調(diào)用來生成需要的 HTML，函數(shù)接受一個數(shù)據(jù)對象作為參數(shù)，并返回一個代表 HTML 的字符串。這種方式通常使用字符串模板來實現(xiàn)，但是相比于字符串模板更加靈活。下面是一個基于函數(shù)式模板的示例：

function listItem(data) {
    return "<li>" + data.name + "</li>";
}
function render(data) {
    var html = "<ul>" + data.map(listItem).join("") + "</ul>";
    return html;
}

這種實現(xiàn)方式的優(yōu)點是靈活，可以通過函數(shù)實現(xiàn)復雜的邏輯，同時也比字符串模板更加易于維護。

編譯型模板

編譯型模板通常將模板轉(zhuǎn)換成一個 JavaScript 函數(shù)，這個函數(shù)接受一個數(shù)據(jù)對象作為參數(shù)，并返回一個代表 HTML 的字符串。這種方式的優(yōu)點是性能好，而且可以預編譯模板，提高渲染效率。下面是一個基于編譯型模板的示例：

var tpl = "<ul>{{#each data}}<li>{{name}}</li>{{/each}}</ul>";
var compiled = Handlebars.compile(tpl);
function render(data) {
    return compiled({ data: data });
}

這種實現(xiàn)方式的缺點是需要引入編譯器，同時也需要一定的學習成本。

JavaScript 模板引擎的實現(xiàn)原理

模板解析

模板引擎通常需要將模板解析成一個 AST（抽象語法樹），這個 AST 會記錄模板中的變量、表達式和文本等信息，同時也可以用來驗證模板的語法正確性。模板解析通常是一個比較復雜的過程，需要處理一些復雜的語法結構（如條件語句、循環(huán)語句等），同時還需要支持一些擴展特性（如過濾器、自定義標簽等）。

模板渲染

模板渲染通常是一個根據(jù)數(shù)據(jù)和 AST 生成 HTML 的過程，它需要遍歷 AST，并將 AST 中的變量和表達式替換成實際的值。模板渲染通常需要考慮一些細節(jié)問題（如文本轉(zhuǎn)義、屬性值處理等），同時也需要支持一些擴展特性（如數(shù)據(jù)格式化、事件綁定等）。

常見的 JavaScript 模板引擎

目前比較流行的 JavaScript 模板引擎有 Mustache、EJS、Jade/Pug、Handlebars 和 Vue Template 等。

Mustache

Mustache 是一種基于字符串模板的模板引擎，它支持數(shù)據(jù)綁定、條件語句、循環(huán)語句等語法結構，同時也支持自定義標簽和過濾器等擴展特性。下面是一個基于 Mustache 的示例：

var tpl = "<ul>{{#data}}<li>{{name}}</li>{{/data}}</ul>";
function render(data) {
    return Mustache.render(tpl, { data: data });
}

EJS

EJS 是一種基于字符串模板的模板引擎，它支持數(shù)據(jù)綁定、條件語句、循環(huán)語句等語法結構，同時也支持模板繼承和局部模板等特性。下面是一個基于 EJS 的示例：

var tpl = "<ul><% for (var i = 0; i < data.length; i++) { %><li><%= data[i].name %></li><% } %></ul>";
function render(data) {
    return ejs.render(tpl, { data: data });
}

Jade/Pug

Jade/Pug 是一種基于縮進的模板引擎，它將 HTML 標記和 JavaScript 代碼混合在一起，通過縮進來表示代碼的層次結構。Jade/Pug 支持數(shù)據(jù)綁定、條件語句、循環(huán)語句等語法結構，同時也支持模板繼承和動態(tài)屬性等特性。下面是一個基于 Jade/Pug 的示例：

var tpl = "ul\n  each data\n    li #{this.name}";
function render(data) {
    var fn = pug.compile(tpl);
    return fn({ data: data });
}

Handlebars

Handlebars 是一種基于編譯型模板的模板引擎，它支持數(shù)據(jù)綁定、條件語句、循環(huán)語句等語法結構，同時也支持自定義標簽和助手函數(shù)等擴展特性。下面是一個基于 Handlebars 的示例：

var tpl = "<ul>{{#each data}}<li>{{name}}</li>{{/each}}</ul>";
var compiled = Handlebars.compile(tpl);
function render(data) {
    return compiled({ data: data });
}

Vue Template

Vue Template 是 Vue.js 框架內(nèi)置的模板引擎，它支持數(shù)據(jù)綁定、條件語句、循環(huán)語句等語法結構，同時也支持計算屬性、事件綁定和組件化等擴展特性。下面是一個基于 Vue Template 的示例：

<template>
  <ul>
    <li v-for="item in data">{{item.name}}</li>
  </ul>
</template>
<script>
export default {
  props: {
    data: { type: Array }
  }
}
</script>
<style scoped>
ul { list-style-type: none; }
</style>