Express.js 中使用模板引擎的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

在 Web 应用程序开发中，模板引擎是不可或缺的一部分。模板引擎允许开发人员将数据和模板结合起来，生成最终的 HTML 页面。在 Express.js 中，有许多流行的模板引擎可供选择，例如 Handlebars、EJS 和 Pug。在本文中，我们将探讨 Express.js 中使用模板引擎的最佳实践。

为什么使用模板引擎？

在 Express.js 应用程序中，使用模板引擎的主要原因是将数据呈现为 HTML 页面。模板引擎可以将数据和模板结合起来，生成最终的 HTML 页面。这使得开发人员可以更轻松地创建动态的 Web 页面，并在不同的设备上呈现相同的内容。

选择模板引擎

在选择模板引擎时，需要考虑以下因素：

语法：模板引擎的语法应该易于理解和使用。
性能：模板引擎应该具有良好的性能，以便在大型应用程序中使用。
社区支持：模板引擎应该有一个活跃的社区，提供支持和更新。

以下是 Express.js 中一些流行的模板引擎：

Handlebars

Handlebars 是一种基于 Mustache 模板语法的模板引擎。它使用大括号来标记变量和表达式。Handlebars 具有良好的性能，并且易于使用。

EJS

EJS 是一种基于 JavaScript 的模板引擎。它使用尖括号来标记变量和表达式。EJS 具有良好的性能，并且易于使用。

Pug

Pug（以前称为 Jade）是一种基于缩进的模板引擎。它使用缩进来表示 HTML 元素。Pug 具有良好的性能，并且易于使用。

在 Express.js 中使用模板引擎

要在 Express.js 中使用模板引擎，需要安装相应的模板引擎。例如，要使用 Handlebars，可以使用以下命令：

npm install --save express-handlebars

安装完成后，需要在 Express.js 应用程序中配置模板引擎：

const express = require('express');
const exphbs  = require('express-handlebars');

const app = express();

app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

在这个例子中，我们使用了 express-handlebars 模块，并将其配置为 Express.js 应用程序的模板引擎。我们还将视图引擎设置为 handlebars。

最佳实践

以下是在 Express.js 中使用模板引擎的最佳实践：

将视图文件存储在单独的目录中

将视图文件存储在单独的目录中可以使代码更易于维护。我们可以将视图文件存储在 views 目录中，并在 Express.js 应用程序中配置视图路径：

app.set('views', path.join(__dirname, 'views'));

使用布局文件

布局文件允许我们在多个页面中使用相同的 HTML 结构。我们可以将通用的 HTML 结构存储在单独的布局文件中，并在视图文件中使用它们。在 Handlebars 中，我们可以使用 {{{body}}} 占位符来插入视图文件的内容。

使用模板助手

模板助手是一些可在模板中使用的函数。它们允许我们在视图中执行一些常见的操作，例如格式化日期和时间。在 Handlebars 中，我们可以使用 registerHelper 方法注册模板助手：

const hbs = exphbs.create({
    helpers: {
        formatDate: function(date) {
            // Format date
        }
    }
});

在这个例子中，我们创建了一个名为 formatDate 的模板助手，它接受一个日期参数并返回格式化后的日期字符串。

使用视图模型

视图模型是一个简单的 JavaScript 对象，它包含视图所需的数据。使用视图模型可以使代码更易于维护，并分离数据和视图。在 Express.js 中，我们可以使用 res.render 方法将视图模型传递给视图：

app.get('/', function(req, res) {
    const viewModel = {
        title: 'Home',
        message: 'Welcome to my website!'
    };
    res.render('home', viewModel);
});

在这个例子中，我们将视图模型传递给名为 home 的视图。

示例代码

以下是一个使用 Handlebars 模板引擎的示例 Express.js 应用程序。它包括视图文件、布局文件、模板助手和视图模型。

视图文件

<!-- views/home.handlebars -->
{{!< layout}}

<h1>{{title}}</h1>
<p>{{message}}</p>

布局文件

-- -------------------- ---- -------
---- ----------------------------- ---
--------- -----
------
------
    ----- ----------------
    ------------------------
-------
------
    ----------
-------
-------

模板助手

const hbs = exphbs.create({
    helpers: {
        formatDate: function(date) {
            const options = { year: 'numeric', month: 'long', day: 'numeric' };
            return date.toLocaleDateString('en-US', options);
        }
    }
});

视图模型

app.get('/', function(req, res) {
    const viewModel = {
        title: 'Home',
        message: 'Welcome to my website!',
        date: new Date()
    };
    res.render('home', viewModel);
});

结论

在 Express.js 中使用模板引擎可以使代码更易于维护，并使开发人员更轻松地创建动态的 Web 页面。在选择模板引擎时，需要考虑语法、性能和社区支持。在使用模板引擎时，需要遵循最佳实践，例如将视图文件存储在单独的目录中、使用布局文件、使用模板助手和使用视图模型。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6759482736908a98ca6c787c