Express.js 渲染 ejs 模板的最佳实践

什么是 ejs？

ejs（Embedded JavaScript templates）是一种简单的模板语言，它允许我们在 HTML 中嵌入 JavaScript 代码，以便动态生成 HTML 页面。ejs 模板文件通常以 .ejs 扩展名结尾。

Express.js 中使用 ejs 的步骤

在 Express.js 中使用 ejs 模板，需要完成以下步骤：

1. 安装 ejs 模块

   npm install ejs --save

2. 配置 Express.js 应用程序

   const express = require('express');
   const app = express();
   
   // 设置模板引擎为 ejs
   app.set('view engine', 'ejs');

3. 创建 ejs 模板文件

   在 views 目录下创建 ejs 模板文件，例如 index.ejs。

4. 渲染 ejs 模板

   在路由处理函数中使用 res.render() 方法渲染 ejs 模板。

   app.get('/', (req, res) => {
     res.render('index', { title: 'Express.js' });
   });

   在以上代码中，我们将 index.ejs 模板渲染后的 HTML 页面作为响应发送给客户端，并传递了一个对象 { title: 'Express.js' } 给模板，以便在模板中使用。

ejs 模板语法

ejs 模板语法非常简单，以下是一些常用的语法：

1. 输出变量

   使用 <%= %> 输出变量的值。

   <h1><%= title %></h1>

2. 执行 JavaScript 代码

   使用 <% %> 执行 JavaScript 代码。

   <% for (let i = 0; i < users.length; i++) { %>
     <li><%= users[i].name %></li>
   <% } %>

3. 包含其他模板文件

   使用 <% include filename %> 包含其他模板文件。

   <% include header.ejs %>

ejs 最佳实践

以下是一些 ejs 最佳实践：

1. 将公共部分提取为独立的模板文件

   如果多个页面都有相同的头部、尾部或导航栏等公共部分，可以将这些部分提取为独立的模板文件，然后在需要使用的页面中包含这些模板文件。

   <% include header.ejs %>

2. 使用模板继承

   如果多个页面有相同的布局，可以使用模板继承来避免重复代码。模板继承允许我们定义一个基础模板，然后在其他模板中继承并覆盖基础模板中的某些部分。

   // www.javascriptcn.com code example
   <!-- base.ejs -->
   <html>
     <head>
       <title><%= title %></title>
     </head>
     <body>
       <%- body %>
     </body>
   </html>
   
   <!-- index.ejs -->
   <% extends('base') %>
   
   <% block('body') { %>
     <h1><%= title %></h1>
     <p>Welcome to my website!</p>
   <% } %>

3. 避免在模板中执行复杂的 JavaScript 代码

   在模板中执行复杂的 JavaScript 代码会降低模板的可读性和可维护性。可以将复杂的 JavaScript 代码移动到路由处理函数中，在渲染模板时将结果传递给模板。

   app.get('/', (req, res) => {
     const users = getUsersFromDatabase();
     const sortedUsers = sortUsers(users); // 复杂的 JavaScript 代码
     res.render('index', { title: 'Express.js', users: sortedUsers });
   });

示例代码

以下是一个使用 ejs 模板的 Express.js 应用程序示例：

// www.javascriptcn.com code example
const express = require('express');
const app = express();

// 设置模板引擎为 ejs
app.set('view engine', 'ejs');

// 静态文件中间件
app.use(express.static('public'));

// 路由处理函数
app.get('/', (req, res) => {
  const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];
  res.render('index', { title: 'Express.js', users });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

index.ejs：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= title %></h1>
    <ul>
      <% for (let i = 0; i < users.length; i++) { %>
        <li><%= users[i].name %></li>
      <% } %>
    </ul>
  </body>
</html>

在以上示例代码中，我们首先设置了模板引擎为 ejs，然后使用 express.static() 中间件来提供静态文件服务。在路由处理函数中，我们渲染了 index.ejs 模板，并将一个包含三个用户信息的数组传递给模板。最后启动了服务器。

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