Express.js 模板引擎使用指南：从入门到实践
【免费下载链接】expressjs.com 
项目地址: https://gitcode.com/gh_mirrors/ex/expressjs.com
什么是模板引擎？
模板引擎是现代Web开发中不可或缺的工具，它允许开发者将动态数据注入到静态模板文件中，最终生成HTML页面发送给客户端。在Express.js框架中，模板引擎的使用尤为简便，它极大地简化了动态网页的创建过程。
为什么选择模板引擎？
- 分离关注点：将业务逻辑与展示层分离
- 提高开发效率：减少重复代码的编写
- 增强可维护性：模板文件更易于管理和修改
- 支持动态内容：轻松实现数据绑定和条件渲染
Express.js支持的模板引擎
Express.js兼容多种流行的模板引擎，包括但不限于：
- Pug（原Jade）：简洁的缩进语法，减少冗余代码
- EJS（Embedded JavaScript）：类似HTML的语法，易于上手
- Handlebars：基于Mustache模板系统，扩展性强
配置模板引擎
基本配置步骤
- 设置视图目录： 指定模板文件存放的位置，默认为项目根目录下的
views文件夹。
app.set('views', './views')
- 指定模板引擎： 设置默认使用的模板引擎类型。
app.set('view engine', 'pug') // 以Pug为例
- 安装引擎依赖： 通过包管理器安装对应的模板引擎。
npm install pug --save
模板引擎工作原理
Express.js要求模板引擎实现__express方法，这是Express与模板引擎之间的约定接口。当调用res.render()时，Express会调用这个方法来渲染模板。
创建第一个模板
以Pug为例，创建一个简单的模板文件views/index.pug：
html
head
title= title
body
h1= message
if showDetails
p 这里是详细信息
else
p 只显示简要内容
渲染模板
在路由处理中渲染模板非常简单：
app.get('/', (req, res) => {
res.render('index', {
title: '我的网站',
message: '欢迎光临',
showDetails: true
})
})
高级特性
1. 局部模板（Partial）
大多数模板引擎支持将页面拆分为可重用的组件：
//- views/partials/header.pug
header
nav
a(href='/') 首页
a(href='/about') 关于我们
//- views/index.pug
include partials/header
2. 布局模板（Layout）
创建基础布局，其他模板继承它：
//- views/layout.pug
html
head
block title
title 默认标题
body
block content
//- views/index.pug
extends layout
block title
title 首页
block content
h1 欢迎来到首页
3. 条件渲染
根据数据动态显示内容：
if user.isAdmin
button 管理面板
else
button 普通用户面板
4. 循环渲染
展示列表数据：
ul
each item in items
li= item.name
性能优化
- 模板缓存：Express默认会缓存编译后的模板（开发环境建议关闭）
- 预编译：某些引擎支持预编译模板以提高性能
- 合理组织视图结构：避免深层嵌套的视图目录
常见问题解答
Q：如何在不重启服务的情况下更新模板？
A：在开发环境中，可以禁用视图缓存：
app.set('view cache', false)
Q：可以同时使用多个模板引擎吗？
A：可以，但需要明确指定每个渲染请求使用的引擎：
res.render('special.ejs') // 指定使用EJS引擎
Q：如何处理模板中的静态资源？
A：建议使用Express的静态文件中间件：
app.use(express.static('public'))
最佳实践
- 保持模板简洁，复杂的逻辑应该放在路由或控制器中
- 合理使用模板继承和局部模板减少重复代码
- 为模板变量提供默认值，避免渲染错误
- 在团队项目中保持一致的模板风格
通过掌握Express.js的模板引擎使用，开发者可以高效地构建动态Web应用，同时保持代码的整洁和可维护性。选择适合项目需求的模板引擎，合理组织视图结构，将显著提升开发体验和应用性能。
【免费下载链接】expressjs.com 项目地址: https://gitcode.com/gh_mirrors/ex/expressjs.com
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
