JavaScript 模板引擎|极客笔记

JavaScript 模板引擎

什么是模板引擎

模板引擎是一种将数据和模板结合生成最终 HTML 内容的工具。通过模板引擎，我们可以将前端的逻辑与界面部分分离，有效地实现前后端的分离开发。

在前端开发中，模板引擎可以帮助我们动态生成 HTML 内容，并将数据动态填充到模板中。这样我们就可以方便地管理数据与视图之间的关系，提高前端代码的可维护性和复用性。

常见的 JavaScript 模板引擎

在 JavaScript 开发中，有很多优秀的模板引擎可供选择。以下是一些常见的 JavaScript 模板引擎：

Handlebars
Handlebars 是一个简单易用的 JavaScript 模板引擎，它使用 Mustache 格式的模板语法，并提供了强大的逻辑控制功能。Handlebars 支持条件判断、循环遍历等常用逻辑，让模板的编写更加灵活。
EJS
EJS（Embedded JavaScript Templates）是一个简洁方便的 JavaScript 模板引擎，它使用类似于 HTML 的标记语法来定义模板，支持在模板中嵌入 JavaScript 代码，方便处理复杂的逻辑。
Pug
Pug（formerly Jade）是一种功能强大的模板引擎，它使用缩进来表示 HTML 结构，让模板更加简洁易读。Pug 支持模板继承、变量引用等高级特性，是一个优秀的选择。

这些模板引擎都有自己的特点和优势，根据项目需求和个人喜好可以选择适合的模板引擎来使用。

使用 Handlebars 示例

下面我们通过一个简单的示例来演示如何使用 Handlebars 模板引擎来动态生成 HTML 内容：

步骤一：引入 Handlebars 库

首先，在 HTML 文件中引入 Handlebars 库。可以通过 CDN 引入，也可以下载到本地引入：

<script src="https://cdn.jsdelivr.net/npm/handlebars/dist/handlebars.min.js"></script>

步骤二：准备模板和数据

定义一个 Handlebars 模板，例如：

<script id="entry-template" type="text/x-handlebars-template">
  <div>
    <h1>{{title}}</h1>
    <p>{{content}}</p>
  </div>
</script>

准备要填充到模板中的数据：

var context = {title: "Hello", content: "Welcome to the world of Handlebars!"};

步骤3：编译模板并渲染

使用 Handlebars 编译模板，并将数据填充到模板中：

var source = document.getElementById('entry-template').innerHTML;
var template = Handlebars.compile(source);
var html = template(context);

document.getElementById('result').innerHTML = html;