EJS 是一种简单、高效的模板引擎，它可以帮助我们在 Node.js 应用程序中实现动态的 HTML 页面生成。在本篇文章里，我们将深入讲解 EJS 的使用方法，并提供详细的指导和示例代码，帮助你快速掌握这一技术。
什么是 EJS？
EJS(Embedded JavaScript Templating) 是一个简单的 JavaScript 模板引擎，可以帮助我们在 Node.js 中创建动态的 HTML 页面。EJS 的工作原理是将 JavaScript 代码嵌入到 HTML 页面中，然后根据数据源动态生成 HTML 内容。EJS 本身非常灵活，可以支持布局、数据缓存、模板继承等功能。
EJS 的最大特点是使用简单，即使你没有学过其他模板引擎，也可以很快上手。
安装 EJS
在开始学习 EJS 之前，需要先安装该模板引擎。可以使用 npm 命令进行安装：
npm install ejs
安装完成后，你可以在项目文件夹下创建一个名为 index.ejs 的文件作为 EJS 模板，然后在 Node.js 中运行该模板以生成 HTML 内容。
使用 EJS
创建 EJS 模板
首先，我们需要创建一个 EJS 模板文件。在模板文件中，可以通过 <% %> 标签来嵌入 JavaScript 代码。
下面是一个简单的 EJS 模板示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- -- --- ----------------
-------
------
----------- -- --- ----- -------
-------
-------在这个模板中，我们使用了 <%= %> 标签来输出 JavaScript 变量 title 的值。
渲染 EJS 模板
当我们创建好 EJS 模板后，就需要在 Node.js 应用程序中渲染该模板了。可以使用 ejs.render() 方法来实现模板的渲染。
下面是一个简单的 Node.js 应用程序示例，用于渲染上文中创建的 EJS 模板：
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----- --- - ---------------
-------------------------- ----- ---- -
------------------------ -------- ----- ----- -
-- ----- -
-----------------
----------
-------
-
----- ---- - --------------------------- ------- -------- -- --- ------------
------------------ ---------------- --------------
----------------
----------
---
----------------在这个 Node.js 应用程序中，我们使用了 fs.readFile() 方法来加载 EJS 模板文件，然后使用 ejs.render() 方法渲染该模板。注意，第二个参数是一个对象，它包含了要传递给模板的数据。
最后，我们使用 http.createServer() 方法创建了一个 HTTP 服务器并将渲染后的 HTML 内容发送给客户端。
渲染 EJS 模板和数据
当我们要在 EJS 模板中使用数据时，可以通过 JavaScript 对象来传递数据。
下面是一个示例，演示了如何使用 JavaScript 对象来传递数据：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - ---------------
-------------------------- ----- ---- -
----- ---- - ---------------------- --- ---- ---------- ------ ----------
------------------ ---------------- --------------
----------------
----------
----------------在这个示例中，我们使用了 JavaScript 对象 {name: "World"} 来传递数据到模板中。
EJS 的高级用法
条件判断
在 EJS 模板中，可以使用 <% if () {} %> 标签来实现条件判断。下面是一个示例：
<% if (name) { %>
<p>Hello, <%= name %>!</p>
<% } else { %>
<p>Hello, World!</p>
<% } %>在这个示例中，我们使用了 <% if () {} %> 标签来判断 name 是否存在，根据条件输出不同的内容。
循环
在 EJS 模板中，可以使用 <% for () {} %> 标签来实现循环。下面是一个示例：
<ul>
<% for (let i = 0; i < users.length; i++) { %>
<li><%= users[i].name %></li>
<% } %>
</ul>在这个示例中，我们使用了 <% for () {} %> 标签来循环遍历一个包含多个用户的数组，然后输出每个用户的名称。
布局
在 EJS 模板中，可以使用布局来组织页面结构。布局是一种在多个页面中重复使用共同元素的方式。EJS 支持 include 标签来引入其他模板的内容。
下面是一个示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- ----------
--- ------------------------ --
-------
------
--- -------------------------- --
---- ------------------
--- ---- --
------
--- -------------------------- --
-------
-------在这个示例中，我们使用了 include 标签来引入三个不同的模板：
partials/head：该模板包含了页面中的头部信息，如 CSS 和 JS 文件的链接。partials/header：该模板包含了页面的导航栏和页眉。partials/footer：该模板包含了页面的页脚信息。
在这个示例中，<%- body %> 标签是一个动态的占位符，用于填充页面的内容。当你在 Node.js 中使用 ejs.render() 方法渲染该模板时，可以将实际内容传递到该标签中。
结论
在本篇文章中，我们介绍了 EJS 模板引擎的概念、使用方法和高级用法。EJS 是一种非常简单、灵活的模板引擎，可以帮助 Node.js 开发者快速构建动态的 HTML 页面。如果你还没有尝试过 EJS，赶快动手试试吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670c69db66ef9cf37fb0e3ef