正文

掌握EJS模板引擎：轻松实现动态网页开发技巧解析

/0 浏览量
0414

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模板引擎，并将其应用于实际项目中。

-- 展开阅读全文 --