在前端开发中，模板引擎是一个不可或缺的工具。它可以将数据和 HTML 模板结合起来，生成最终的 HTML 页面。在 Node.js 的开发中，Express.js 是一个非常流行的 Web 框架，而 Pug 则是 Express.js 中最常用的模板引擎之一。本文将详细介绍 Pug 的使用以及优劣分析，帮助读者更好地了解和掌握这个模板引擎。
Pug 的基本语法
Pug 是一种简洁的模板语言，它的主要特点是使用缩进来表示 HTML 的层级关系。下面是一个简单的 Pug 示例：
html
head
title My Page
body
h1 Hello, world!在上面的代码中，我们可以看到，Pug 采用了类似 Python 的缩进风格，将 HTML 的层级结构表示出来。通过这种方式，可以使代码更加简洁、易读、易于维护。
Pug 还有一些其他的特点，例如：
- 可以使用变量和 JavaScript 表达式
- 支持标签属性的简写
- 支持循环和条件语句等控制结构
下面我们来逐一介绍这些特点。
变量和 JavaScript 表达式
在 Pug 中，可以使用 #{} 语法来插入变量或 JavaScript 表达式。例如：
- var name = 'John'
h1 Hello, #{name}!上面的代码中，我们定义了一个变量 name，并将其插入到了 h1 标签中。如果要插入 JavaScript 表达式，可以将其放在 #{} 中，例如：
- var now = new Date()
p The time is #{now.toLocaleTimeString()}.在上面的代码中，我们获取了当前时间，并将其插入到了 p 标签中。
标签属性的简写
在 Pug 中，如果一个标签只有一个属性，可以使用类似 CSS 的语法来简写。例如：
a(href='https://www.example.com') Go to Example
在上面的代码中，我们创建了一个链接，并指定了它的 href 属性。
循环和条件语句
Pug 还支持循环和条件语句等控制结构。例如，下面的代码演示了如何使用 each 来遍历一个数组，并将其中的元素插入到一个列表中：
- var items = ['apple', 'banana', 'orange']
ul
each item in items
li= item在上面的代码中，我们定义了一个数组 items，并使用 each 来遍历其中的元素。在每次循环中，我们将元素插入到一个 li 标签中，并使用 = 号来插入元素的值。
Pug 还支持 if 和 else 等条件语句，例如：
- var score = 80 if score >= 90 p You got an A! else if score >= 80 p You got a B. else p You need to study harder.
在上面的代码中，我们根据分数的不同，输出不同的提示信息。
Pug 的优势和劣势
Pug 作为 Express.js 中最常用的模板引擎之一，具有许多优势，例如：
- 简洁：Pug 的语法非常简洁，使用缩进来表示 HTML 的层级结构，可以使代码更加易读、易于维护。
- 灵活：Pug 支持变量和 JavaScript 表达式，以及循环和条件语句等控制结构，可以满足各种复杂的模板需求。
- 生态丰富：Pug 有大量的第三方库和插件，可以方便地扩展其功能。
当然，Pug 也有一些劣势，例如：
- 学习成本较高：Pug 的语法与传统的 HTML 语法有较大的差异，需要一定的学习成本。
- 性能较低：由于 Pug 需要将模板转换成 JavaScript 代码，再执行生成 HTML，所以性能比较低。
综合来看，Pug 作为一种简洁、灵活的模板引擎，适合用于中小型 Web 应用的开发。对于大型 Web 应用，可能需要考虑性能等因素，选择其他更为高效的模板引擎。
Pug 的使用示例
下面我们来看一个使用 Pug 的示例，这个示例演示了如何使用 Pug 来生成一个简单的博客页面。
首先，我们需要安装 Pug：
npm install pug --save
然后，我们创建一个名为 views/index.pug 的文件，内容如下：
html
head
title My Blog
body
h1 My Blog
each post in posts
h2= post.title
p= post.content在上面的代码中，我们定义了一个 HTML 页面，其中包含一个标题和若干篇博客文章。博客文章的内容来自一个名为 posts 的数组，我们将其插入到了页面中。
接下来，我们创建一个名为 app.js 的文件，内容如下：
// javascriptcn.com 代码示例
const express = require('express')
const app = express()
const port = 3000
app.set('view engine', 'pug')
app.get('/', (req, res) => {
const posts = [
{ title: 'Hello, world!', content: 'This is my first post.' },
{ title: 'My favorite food', content: 'I love pizza and sushi.' },
{ title: 'My travel experience', content: 'I have been to Japan and France.' }
]
res.render('index', { posts: posts })
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})在上面的代码中，我们创建了一个 Express.js 应用程序，并使用 app.set() 方法设置了 Pug 为默认的模板引擎。在路由中，我们定义了一个根路由 /，并通过 res.render() 方法将数据传递给模板引擎。
最后，我们启动应用程序：
node app.js
在浏览器中访问 http://localhost:3000，就可以看到我们生成的博客页面了。
总结
Pug 是 Express.js 中最常用的模板引擎之一，具有简洁、灵活等优点。在使用 Pug 的过程中，我们需要注意学习成本和性能等问题。在选择模板引擎时，需要根据具体的需求和应用场景来进行选择。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65712faad2f5e1655d9e1f32