EJS,全称为Embedded JavaScript,是一种流行的服务器端模板引擎,它允许开发者使用JavaScript语法来构建动态网页。掌握EJS可以帮助开发者更高效地实现前端和后端的交互,下面就来详细解析一下EJS模板引擎的使用技巧。
EJS基础语法
EJS模板引擎使用双大括号{{ }}来插入变量,单大括号{{ }}用于显示表达式。以下是一些基础语法示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EJS Template Example</title>
</head>
<body>
<h1>{{ title }}</h1>
<p>Here is a list of items:</p>
<ul>
{{#items}}
<li>{{this}}</li>
{{/items}}
</ul>
</body>
</html>
在上面的例子中,{{ title }}会显示传递给模板的title变量,而{{#items}} ... {{/items}}循环遍历items数组,显示列表项。
EJS的指令
EJS提供了多种指令来控制模板的渲染流程,以下是一些常用的指令:
1. 逻辑指令
逻辑指令用于条件判断,例如{{#if}}、{{#unless}}、{{#else}}等。
{{#if user}}
<p>Welcome, {{user.name}}!</p>
{{/if}}
2. 循环指令
循环指令用于遍历数组或对象,例如{{#each}}。
{{#each items}}
<li>{{this}}</li>
{{/each}}
3. 控制指令
控制指令用于控制模板的渲染流程,例如{{#assign}}。
{{#assign result "Hello, world!"}}
<p>{{result}}</p>
{{/assign}}
EJS与Express框架结合
EJS通常与Express框架结合使用,以下是一个简单的Express应用示例:
const express = require('express');
const app = express();
const port = 3000;
// 设置模板引擎为EJS
app.set('view engine', 'ejs');
// 模板文件目录
app.set('views', './views');
app.get('/', (req, res) => {
res.render('index', { title: 'Welcome to EJS!', items: ['Item 1', 'Item 2', 'Item 3'] });
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
在上面的示例中,我们创建了一个简单的Express应用,它使用EJS作为模板引擎,并在根路由上渲染一个名为index.ejs的模板。
EJS的高级技巧
1. 传递对象和数组
在EJS模板中,可以传递对象和数组作为上下文,这样就可以在模板中使用这些数据。
// 传递对象
app.get('/profile', (req, res) => {
const user = { name: 'Alice', age: 30 };
res.render('profile', { user: user });
});
// 传递数组
app.get('/list', (req, res) => {
const items = ['Item 1', 'Item 2', 'Item 3'];
res.render('list', { items: items });
});
2. 使用过滤器
EJS支持过滤器,可以用来对变量进行格式化或转换。
<p>{{ user.age | numberFormat }}</p>
在上面的例子中,numberFormat是一个自定义过滤器,它将数字格式化为带有千位分隔符的字符串。
3. 优化性能
EJS模板引擎允许开发者使用缓存来提高性能。在Express应用中,可以使用express.static中间件来启用缓存。
const express = require('express');
const app = express();
const port = 3000;
// 启用缓存
app.set('view cache', true);
// 设置静态文件目录
app.use(express.static('public'));
// ...
总结
EJS模板引擎是构建动态网页的强大工具,它可以帮助开发者轻松实现前端和后端的交互。通过掌握EJS的基础语法、指令和高级技巧,你可以更高效地开发动态网页。希望本文能帮助你更好地理解EJS模板引擎,并将其应用于实际项目中。
