一、引言
在 Node.js 的开发世界里，模板引擎可是个好东西，它能让我们更方便地生成动态的 HTML 页面。今天咱们就来聊聊 Node.js 里常用的两个模板引擎：EJS 和 Pug，看看它们在实战应用中到底有啥不一样。
二、EJS 模板引擎
2.1 EJS 简介
EJS 全称 Embedded JavaScript，也就是嵌入式 JavaScript。它的语法和 JavaScript 很像，用起来非常直观，对于有 JavaScript 基础的开发者来说，上手特别容易。
2.2 EJS 示例
// 技术栈：Node.js + EJS
const express = require('express');
const app = express();
// 设置视图引擎为 EJS
app.set('view engine', 'ejs');
// 定义路由
app.get('/', (req, res) => {
const data = {
title: 'EJS 示例',
message: '欢迎使用 EJS 模板引擎'
};
// 渲染 EJS 模板
res.render('index', data);
});
// 启动服务器
const port = 3000;
app.listen(port, () => {
console.log(`服务器运行在 http://localhost:${port}`);
});
在项目根目录下创建一个 views 文件夹，然后在里面创建 index.ejs 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
</head>
<body>
<h1><%= message %></h1>
</body>
</html>
在这个示例中，<%= %> 是 EJS 的输出标签，用于输出变量的值。
2.3 EJS 应用场景
EJS 适合那些需要直接嵌入 JavaScript 代码的场景。比如说，你要动态生成一些表格数据，就可以在 EJS 模板里使用 JavaScript 的循环语句来遍历数据并输出表格的每一行。
2.4 EJS 优缺点
优点
- 简单易懂：和 JavaScript 语法相似，开发者很容易上手。
- 灵活性高：可以直接在模板里写 JavaScript 代码，方便处理复杂的逻辑。
缺点
- 代码可读性较差：当模板里嵌入大量 JavaScript 代码时，会让模板变得复杂，难以维护。
- 安全性问题：如果直接输出用户输入的数据，可能会导致 XSS 攻击。
2.5 EJS 注意事项
- 转义输出：为了防止 XSS 攻击，对于用户输入的数据，要使用
<%- %>进行转义输出。 - 代码分离：尽量把复杂的逻辑放到后端处理，不要在模板里写太多 JavaScript 代码，以提高代码的可维护性。
三、Pug 模板引擎
3.1 Pug 简介
Pug 以前叫 Jade，它是一种简洁的模板语言，使用缩进来表示 HTML 元素的嵌套关系，代码看起来非常简洁。
3.2 Pug 示例
// 技术栈：Node.js + Pug
const express = require('express');
const app = express();
// 设置视图引擎为 Pug
app.set('view engine', 'pug');
// 定义路由
app.get('/', (req, res) => {
const data = {
title: 'Pug 示例',
message: '欢迎使用 Pug 模板引擎'
};
// 渲染 Pug 模板
res.render('index', data);
});
// 启动服务器
const port = 3000;
app.listen(port, () => {
console.log(`服务器运行在 http://localhost:${port}`);
});
在 views 文件夹下创建 index.pug 文件：
doctype html
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title= title
body
h1= message
Pug 使用缩进表示 HTML 元素的嵌套，= 用于输出变量的值。
3.3 Pug 应用场景
Pug 适合创建简洁、结构化的 HTML 页面。比如，你要快速搭建一个博客网站的页面，使用 Pug 可以让代码更加清晰易读。
3.4 Pug 优缺点
优点
- 代码简洁：使用缩进代替 HTML 标签，减少了代码量，提高了开发效率。
- 可读性高：代码结构清晰，容易理解和维护。
缺点
- 学习成本较高：对于习惯了 HTML 语法的开发者来说，需要一定的时间来学习 Pug 的语法。
- 调试困难：由于 Pug 代码和 HTML 代码有很大差异，调试时可能不太方便。
3.5 Pug 注意事项
- 缩进严格：Pug 对缩进要求非常严格，一定要注意缩进的正确性，否则会导致渲染错误。
- 属性语法：Pug 的属性语法和 HTML 有所不同，需要花时间去熟悉。
四、EJS 与 Pug 的对比
4.1 语法复杂度
EJS 的语法和 JavaScript 相似，对于熟悉 JavaScript 的开发者来说很容易上手。而 Pug 的语法是一种新的模板语言，需要一定的学习成本，尤其是对于习惯了 HTML 语法的开发者来说。
4.2 代码可读性
在代码可读性方面，Pug 具有明显的优势。它使用缩进表示元素的嵌套关系，代码看起来更加简洁明了。而 EJS 可能会因为嵌入大量 JavaScript 代码而变得复杂，影响可读性。
4.3 灵活性
EJS 的灵活性更高，因为它可以直接在模板里写 JavaScript 代码，处理复杂的逻辑。而 Pug 的语法相对固定，处理复杂逻辑时可能不太方便。
4.4 性能
在性能方面，两者相差不大。但是在处理大量数据时，EJS 可能会因为嵌入大量 JavaScript 代码而导致性能下降，而 Pug 的简洁语法可能会有一些优势。
五、实战应用分析
5.1 项目需求
假设我们要开发一个简单的博客网站，需要显示文章列表和文章详情。
5.2 使用 EJS 实现
// 技术栈：Node.js + EJS
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
// 模拟文章数据
const articles = [
{ id: 1, title: '文章 1', content: '这是文章 1 的内容' },
{ id: 2, title: '文章 2', content: '这是文章 2 的内容' }
];
// 文章列表页路由
app.get('/', (req, res) => {
res.render('articles', { articles });
});
// 文章详情页路由
app.get('/articles/:id', (req, res) => {
const id = parseInt(req.params.id);
const article = articles.find(a => a.id === id);
res.render('article', { article });
});
const port = 3000;
app.listen(port, () => {
console.log(`服务器运行在 http://localhost:${port}`);
});
在 views 文件夹下创建 articles.ejs 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章列表</title>
</head>
<body>
<h1>文章列表</h1>
<ul>
<% articles.forEach(article => { %>
<li><a href="/articles/<%= article.id %>"><%= article.title %></a></li>
<% }); %>
</ul>
</body>
</html>
创建 article.ejs 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= article.title %></title>
</head>
<body>
<h1><%= article.title %></h1>
<p><%= article.content %></p>
</body>
</html>
5.3 使用 Pug 实现
// 技术栈：Node.js + Pug
const express = require('express');
const app = express();
app.set('view engine', 'pug');
// 模拟文章数据
const articles = [
{ id: 1, title: '文章 1', content: '这是文章 1 的内容' },
{ id: 2, title: '文章 2', content: '这是文章 2 的内容' }
];
// 文章列表页路由
app.get('/', (req, res) => {
res.render('articles', { articles });
});
// 文章详情页路由
app.get('/articles/:id', (req, res) => {
const id = parseInt(req.params.id);
const article = articles.find(a => a.id === id);
res.render('article', { article });
});
const port = 3000;
app.listen(port, () => {
console.log(`服务器运行在 http://localhost:${port}`);
});
在 views 文件夹下创建 articles.pug 文件：
doctype html
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title 文章列表
body
h1 文章列表
ul
each article in articles
li
a(href=`/articles/${article.id}`)= article.title
创建 article.pug 文件：
doctype html
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title= article.title
body
h1= article.title
p= article.content
5.4 对比分析
从上面的示例可以看出，使用 EJS 时，代码更贴近 JavaScript 和 HTML 的结合，对于习惯这种方式的开发者来说更容易理解。而使用 Pug 时，代码更加简洁，结构更加清晰，但是需要花费一定时间学习语法。
六、总结
EJS 和 Pug 都是 Node.js 中优秀的模板引擎，它们各有优缺点。EJS 适合那些需要直接嵌入 JavaScript 代码、处理复杂逻辑的场景，它的优点是简单易懂、灵活性高，但代码可读性较差。Pug 则适合创建简洁、结构化的 HTML 页面，它的优点是代码简洁、可读性高，但学习成本较高。在实际开发中，我们可以根据项目的需求和团队的技术水平来选择合适的模板引擎。
评论