在使用 Express.js 时，选择合适的视图引擎能够帮助我们提高开发效率，打造出更加优雅的界面。本文将介绍 Express.js 中常用的视图引擎，包括 EJS、Handlebars、Pug、Nunjucks 和 Marko，并给出相应的示例代码。希望本文能够帮助读者选择正确的视图引擎，以提高开发效率。
EJS
EJS 是一种嵌入式 JavaScript 模板引擎，它可以将 JavaScript 代码与 HTML 标记组合使用，非常适合构建动态 Web 应用程序。在 Express.js 中，我们可以使用 EJS 渲染动态内容。
下面是一个简单的 EJS 示例代码：
-- -------------------- ---- -------
---- --------- ---
------
------
---------- ----- ----------
-------
------
------- ------- -------
-------
--------- -------------------- ---- ------- -- ------ ----- ------- - ------------------ ----- --- - --------- ------------- -------- ------ ------------ ----- ---- -- - ------------------- - ------ -------- -------- --------- -- -- ---------------- -- -- - ------------------- ------- -- ---- ------ --
Handlebars
Handlebars 是一种流行的模板引擎，它有类似于 EJS 的语法，但是提供了更多的功能和灵活性。使用 Handlebars，我们可以轻松地创建复杂的视图，并将数据动态地注入到这些视图中。
下面是一个简单的 Handlebars 示例代码：
-- -------------------- ---- -------
---- ---------------- ---
------
------
--------- ----- ----------
-------
------
------ ------- -------
-------
--------- -------------------- ---- ------- -- ------ ----- ------- - ------------------ ----- ------ - ----------------------------- ----- --- - --------- ------------------------ -------- -------------- ------ --- ------------- -------- ------------- ------------ ----- ---- -- - ------------------- - ------ --------------- -------- ---------------- -- -- ---------------- -- -- - ------------------- ------- -- ---- ------ --
Pug
Pug（早期称为 Jade）是一种强大的模板引擎，它使用的是一种缩进式语法。它的设计灵感来自于 Haml，使得 HTML 构建更加简单和直观。
下面是一个简单的 Pug 示例代码：
// index.pug
html
head
title= title
body
h1= message-- -------------------- ---- ------- -- ------ ----- ------- - ------------------ ----- --- - --------- ------------- -------- ------ ------------ ----- ---- -- - ------------------- - ------ -------- -------- --------- -- -- ---------------- -- -- - ------------------- ------- -- ---- ------ --
Nunjucks
Nunjucks 是由 Mozilla 开发的模板引擎，它支持继承、块和过滤器，非常适合构建复杂的视图。
下面是一个简单的 Nunjucks 示例代码：
-- -------------------- ---- -------
---- --------- ---
------
------
--------- ----- ----------
-------
------
------ ------- -------
-------
--------- -------------------- ---- ------- -- ------ ----- ------- - ------------------ ----- -------- - ------------------- ----- --- - --------- --------------------------- - ----------- ----- -------- --- -- ------------- -------- ------ ------------ ----- ---- -- - ------------------- - ------ ------------- -------- -------------- -- -- ---------------- -- -- - ------------------- ------- -- ---- ------ --
Marko
Marko 是一种快速、简单且强大的模板引擎，它使用标记标记，支持组件化和呈现引擎独立。Marko 官方网站表示其相比其他引擎速度更快，渲染更高效。
下面是一个简单的 Marko 示例代码：
-- -------------------- ---- -------
---- ----------- ---
------
------
----------------------------
-------
------
------------------------
-------
--------- -------------------- ---- ------- -- ------ ----- ------- - ------------------ ----- ----- - ---------------- ----- --- - --------- -------------------- ---------------- ------------- -------- -------- ------------ ----- ---- -- - ------------------ - ------ ---------- -------- ----------- -- -- ---------------- -- -- - ------------------- ------- -- ---- ------ --
结论
以上是最常用的五种 Express.js 视图引擎。选择正确的视图引擎可以帮助我们更加高效地开发出更具吸引力的 Web 应用程序。总之，EJS 和 Handlebars 更适合轻量级的应用程序，Pug 和 Nunjucks 很适合构建更复杂的界面，而 Marko 是性能最佳的引擎，适用于需要高效响应的应用程序。
希望本文的介绍和示例能够帮助读者选择正确的视图引擎，以提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f75c67c5c563ced597da35