在现代的 Web 开发中，前端工程师需要学习很多的开发技术和工具。其中一个很重要的组成部分就是模板引擎。模板引擎是一种将数据和 HTML 相结合的工具，用于在前端将后端数据可视化的过程中起到重要的作用。在本文中，我们将介绍如何使用 Express.js 和 Handlebars.js 来进行模板引擎开发。
什么是 Express.js 和 Handlebars.js？
Express.js 是一个基于 Node.js 的 Web 应用程序框架，它为 Web 应用程序提供了一个高度可定制的功能集。Express.js 提供了一个灵活的路由系统，可以集成多种模板引擎，为开发 Web 应用程序提供了许多工具和函数。
Handlebars.js 是一个简单的模板引擎，可以实现基本的数据绑定和 HTML 片段的封装。它支持 Express.js 框架，并提供了许多可定制的选项和扩展。Handlebars.js 可以将数据绑定到 HTML 模板中，使数据显示在 Web 应用程序中。
安装和设置
要使用 Express.js 和 Handlebars.js 开发你的模板引擎，你需要先安装它们。你可以使用 NPM (Node 包管理器) 方便地完成这个过程。
npm install --save express handlebars
创建模板引擎
在我们的 Express 应用程序中创建模板引擎非常简单。我们需要在项目的顶层目录创建一个“views”子目录，并在其中创建我们的模板文件。通常来说，模板文件的扩展名为“.handlebars”或“.hbs”。
我们创建一个名为“home.handlebars”的新文件。在这个文件中，我们将添加一些 HTML （代表我们希望在 Web 应用程序中显示的数据），然后使用 Handlebars.js 语法添加数据绑定。
-- -------------------- ---- -------
---- --------------- ---
--------- -----
----- ----------
------
----- ----------------
------------------------
-------
------
-------------------
----
------- -------
-----------------
---------
-----
-------
-------在我们的模板文件中，我们使用 Handlebars.js 语法添加了三个随机数据绑定。 {{title}} 显示在 HTML 页面的标题上，{{header}} 显示在 HTML 页面的头部中，{{items}} 显示一个包含一些列表项目的无序列表。
简单的路由
现在我们已经创建了模板，我们需要创建一些路由来将模板与我们的应用程序结合起来。我们创建一个名为“index.js”的新文件，并添加以下代码。
-- -------------------- ---- -------
-- --------
----- ------- - -------------------
----- ---------- - ----------------------
----- --- - ----------
------------------------ --------------
------------- -------- --------------
------------ ----- ---- -- -
------------------ -
------ --- ---- ------
------- -------- -- -- ---- ------
------ ------ --- ----- --- ----- ---
---
---
---------------- -- -- -
------------------- -- --------- -- ---- -------
---在这个代码中，我们将创建一个新的 Express 应用程序，使用 Handlebars.js 作为我们的模板引擎。我们使用 app.engine() 函数注册 Handlebars.js，将其作为 Express.js 模板引擎处理程序。之后，我们使用 app.set() 函数来设置我们的视图引擎，将其设置为 Handlebars.js。
在我们的应用程序中，我们使用 app.get() 来创建一个仅拥有根路径“/” 的路由。当我们的应用程序接收到一个新的 HTTP GET 请求时，它将根据我们的模板和数据渲染我们的模板，并将其发送回客户端。
完成这些设置后，运行 node index.js，在浏览器中打开“localhost:3000”，如果一切正常，你应该看到一个带有相应数据绑定的 HTML 网页。
自定义变量和扩展
Handlebars.js 是高度可定制的模板引擎，因此你可以使用更多的数据来扩展你的模板。在我们的模板文件中，你可以添加 Handlebars.js 帮助程序（Helpers），以便通过添加新的功能，比如条件渲染来更好地定义你的应用程序。
-- -------------------- ---- -------
------- ----------
----- --------
---- -------------- ---------
--------
---- ----------------
-------
-----------------
--------- -------------
---- ---------------- ---------------
---------------
------
---------在这个代码片段中，我们使用 Handlebars.js 的 each 帮助程序来迭代一个产品列表，并使用 if 帮助程序在列表项目需要打折时添加一个“on-sale”CSS 类。
结论
作为一名前端工程师，了解如何使用模板引擎是非常重要的。Express.js 和 Handlebars.js 组合起来是一个值得学习的方案，它很容易集成，并能帮助你轻松地创建基本的 Web 应用程序。在你的下一个 Web 项目中，考虑使用 Express.js 和 Handlebars.js 来快速创建一些优秀的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670c1ffa66ef9cf37fae68f7