Node.js 被广泛应用于 Web 开发领域，作为一名前端开发工程师，我们需要掌握 Node.js 中模板引擎的使用，它能帮我们更便捷地生成页面，提升开发效率。
一、什么是模板引擎
模板引擎是一种将模板和数据结合生成 HTML 文档的工具。模板是一个包含哪些需要展示的标记和占位符的文本，数据则是填充到模板中的具体内容。
Node.js 中常用的模板引擎有 EJS、Handlebars、Pug 等。
二、EJS 模板引擎
EJS 是一种简单的模板语言，它支持 JavaScript 模板语法和 HTML 标记。通过嵌入 JavaScript 代码，我们可以在 EJS 模板中实现很多更为复杂的功能。
1. EJS 模板引擎的基本使用
在 Node.js 环境下使用 EJS 模板引擎，需要先安装 ejs 模块，命令如下：
npm install ejs --save
安装完成后，在 Node.js 文件中加载 ejs 模块，代码如下：
const ejs = require('ejs');然后，我们就可以使用 ejs 模板引擎了。示例代码如下：
-- -------------------- ---- -------
----- --- - ---------------
----- -------- - -
------- ----- -------
----
-- --- ---- - - -- - - ------------- ---- - --
------- -------- -------
-- - --
-----
--
----- ---- - -
------ ---- ----
------ ------ ----- ----- -----
--
----- ---- - -------------------- ------
------------------输出结果如下：
<h1>EJS 使用</h1> <ul> <li>模板</li> <li>语法</li> <li>变量</li> <li>循环</li> </ul>
2. EJS 模板引擎的语法
EJS 模板引擎的语法相对简单，以下是 EJS 模板引擎的常用语法：
- 输出 HTML：
<%= ... %> - 输出 HTML（不转义）：
<%- ... %> - 执行 JavaScript 代码：
<% ... %> - 条件判断：
<% if(...) { ... } %> - 循环：
<% for(...) { ... } %>
我们可以通过这些语法，实现模板的基本功能。
3. EJS 模板引擎的数据渲染
在 EJS 模板中，我们可以使用两种方式渲染数据：一种是通过传递数据对象，另一种是通过设置模板选项。
使用数据对象的方式，我们可以将数据直接绑定到模板上，如下所示：
-- -------------------- ---- ------- ----- -------- - - ------- ----- ------- -- ----- ---- - - ------ ---- --- -- ----- ---- - -------------------- ------
我们也可以通过模板选项设置不同的数据，如下所示：
-- -------------------- ---- ------- ----- -------- - - ------- ----- ------- -- ----- ------- - - ------ ---- --- -- ----- ---- - -------------------- ---------
4. EJS 模板引擎的文件包含
在 EJS 模板中，我们可以使用 include 语句来引入其他模板文件的内容。例如，我们有一个头部模板文件和一个主体模板文件，可以通过如下方式来包含它们：
header.ejs 文件：
<header> <h1><%= title %></h1> </header>
body.ejs 文件：
<body> <% include header.ejs %> <p><%= content %></p> </body>
我们在引用 body.ejs 模板时，会自动包含 header.ejs 文件的内容。
5. EJS 模板引擎的实例
以下是一个完整的 EJS 模板引擎实例，包含了基本的语法、数据渲染、文件包含等功能。
-- -------------------- ---- -------
---- --------- ---
--------- -----
------
------
---------- ----- ----------
-------
------
-- ------- ---------- --
------ ------- ------
-------
-------
---- ---------- ---
--------
------- ----- -------
---------
-- ------
----- --- - ---------------
----- -- - --------------
----- -------- - ------------------------------------ --------
----- ---- - -
------ ---- ----
-------- ----- --- -----
--
----- ---- - -------------------- ------
------------------这个例子中，我们在 index.ejs 文件中使用包含语句，引入了 header.ejs 文件的内容，在 app.js 文件中，我们读取 index.ejs 文件，并使用数据对象渲染了页面。
三、Handlebars 模板引擎
Handlebars 是一款高度可定制、一致性较强的模板引擎，它支持许多常用的功能，如条件语句、循环语句、Partials 等。在使用 Handlebars 进行模板开发时，我们需要遵循一定的规则，但这些规则带来的好处是可以让我们更为高效地开发模板。
1. Handlebars 模板引擎的基本使用
使用 Handlebars 模板引擎需要先安装 handlebars 模块，命令如下：
npm install handlebars --save
安装完成后，在 Node.js 文件中加载 handlebars 模块，代码如下：
const handlebars = require('handlebars');然后，我们就可以使用 handlebars 模板引擎了。示例代码如下：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - -
------ ----- -------
----
------- -------
------ ---- -------
---------
-----
--
----- ---- - -
------ ----------- ----
------ ------ ----- ----- -----
--
----- ---- - -----------------------------------
------------------输出结果如下：
<h1>Handlebars 使用</h1> <ul> <li>模板</li> <li>语法</li> <li>变量</li> <li>循环</li> </ul>
2. Handlebars 模板引擎的语法
Handlebars 模板引擎的语法与 EJS 模板引擎相似，以下是 Handlebars 模板引擎的常用语法：
- 输出 HTML：
{{ ... }} - 输出 HTML（不转义）：
{{{ ... }}} - 条件判断：
{{#if ... }} ... {{/if}} - 循环：
{{#each ... }} ... {{/each}} - 局部模板：
{{> ... }}
除此之外，Handlebars 模板引擎还支持更为复杂的语法，例如嵌套表达式、Helper 函数等。
四、Pug 模板引擎
Pug 是一款在 Node.js 中运行的模板引擎，它采用了简洁的语法和缩进的方式。Pug 模板引擎在表达视图方面具有很高的灵活性，使用 Pug 可以让我们更加清晰地展现 HTML 代码的结构。
1. Pug 模板引擎的基本使用
使用 Pug 模板引擎需要先安装 pug 模块，命令如下：
npm install pug --save
安装完成后，在 Node.js 文件中加载 pug 模块，代码如下：
const pug = require('pug');然后，我们就可以使用 pug 模板引擎了。示例代码如下：
-- -------------------- ---- -------
----- --- - ---------------
----- -------- - -
----
----
----- --- --
----
--- -----
--
---- ---- -- -----
--- ----
--
----- ---- - -
------ ---- ----
------ ------ ----- ----- -----
--
----- ---- - -------------------- ------
------------------输出结果如下：
-- -------------------- ---- -------
------
------
---------- ----------
-------
------
------- -------
----
-----------
-----------
-----------
-----------
-----
-------
-------2. Pug 模板引擎的语法
Pug 模板引擎的语法比较特殊，它使用空格和缩进的方式来表达 HTML 的结构。以下是 Pug 模板引擎的常用语法：
- 标签：
标签名 - 标签属性：
属性名="属性值" - 行内元素：
元素名 属性名="属性值" 元素内容 - 子元素：
父元素 子元素 - 循环：
each item in items - 条件判断：
if condition
除此之外，Pug 模板引擎还支持更为复杂的语法，例如 Mixins、Filters 等。
五、总结
以上是 Node.js 中常用的三种模板引擎的使用方法，包括了 EJS、Handlebars 和 Pug。在选择模板引擎时，我们需要根据实际项目的需求来选择合适的模板引擎。同时，我们还需要学习和掌握模板引擎的基本语法和语法规则，以便更好地使用模板引擎来开发应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c6c5c968c7c53b07788cf