使用服务器端模板引擎实现HTML元素条件渲染-html教程-PHP中文网

使用服务器端模板引擎实现HTML元素条件渲染

DDD

发布： 2025-09-27 17:26:11

原创

857人浏览过

使用服务器端模板引擎实现html元素条件渲染

本文旨在探讨如何在不依赖JavaScript的情况下，根据动态变量（如{{xyz}}）的值来条件性地隐藏或显示HTML元素。由于HTML本身不具备逻辑判断能力，我们需要借助服务器端模板引擎，例如EJS，来实现基于变量状态的条件渲染，从而在页面加载时就确定元素的可见性。

理解HTML的局限性

HTML（超文本标记语言）是一种用于构建网页结构的标记语言，其核心职责是定义页面的内容和结构。它不具备编程语言的逻辑判断能力、变量处理或条件执行功能。这意味着，你无法直接在纯HTML文件中编写if...else语句来根据某个变量的值来决定是否渲染某个元素。例如，{{xyz}}这样的动态变量通常是由后端服务器在渲染页面时注入的，而HTML本身无法在客户端对这些变量进行评估并采取行动。

解决方案：服务器端模板引擎

要实现不使用JavaScript的条件渲染，核心在于将逻辑判断前置到服务器端。服务器端模板引擎正是为此目的而设计的工具。它们允许开发者在HTML文件中嵌入特定语法，这些语法在服务器将页面发送到客户端浏览器之前被解析和执行。当服务器处理模板时，它可以访问后端数据，执行条件判断，并根据结果生成最终的HTML。

EJS (Embedded JavaScript) 作为示例

EJS是一个流行的服务器端模板引擎，它允许你在HTML中嵌入JavaScript代码。通过EJS，你可以轻松地实现根据变量值来条件性地渲染HTML元素。

立即学习“前端免费学习笔记（深入）”；

EJS工作原理

当一个请求到达服务器时，服务器会查找并处理对应的EJS模板文件。在处理过程中，EJS会执行模板中嵌入的JavaScript代码，并将动态数据填充到模板中。最终，EJS会生成一个纯HTML字符串，然后将其发送给客户端浏览器。客户端浏览器接收到的已经是经过逻辑处理的最终HTML，无需再进行任何客户端逻辑判断。

实现条件隐藏“Some Number”标签

假设我们有一个名为xyz的变量，我们希望当xyz为空时，隐藏一个显示“Some Number”的<span>标签。

AiPPT模板广场

AiPPT模板广场-PPT模板-word文档模板-excel表格模板

147

查看详情

准备EJS模板文件（例如：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>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <h1>页面内容</h1>

    <% if (xyz && xyz.length > 0) { %>
        <!-- 只有当xyz不为空时才渲染此标签 -->
        <span class="label">Some Number: <%= xyz %></span>
    <% } else { %>
        <!-- 或者，你可以选择在为空时什么都不渲染，或者渲染一个占位符 -->
        <!-- <span class="label hidden">Some Number:</span> -->
        <!-- 
            如果你希望标签存在但隐藏，可以这样：
            <span class="label <%= xyz && xyz.length > 0 ? '' : 'hidden' %>">Some Number: <%= xyz %></span>
            但更推荐直接不渲染，减少DOM开销。
        -->
    <% } %>

    <p>这是页面上的其他内容。</p>
</body>
</html>

登录后复制

代码解释：

<% if (xyz && xyz.length > 0) { %> ... <% } %> 是EJS的控制流语法。它允许你像在JavaScript中一样编写if语句。
xyz && xyz.length > 0 用于判断xyz变量是否存在且其长度大于0（即不为空字符串）。如果xyz是一个数字或布尔值，你可能需要调整判断条件，例如if (xyz !== null && xyz !== undefined && xyz !== '')。
<%= xyz %> 是EJS输出变量值的语法。它会将xyz变量的值插入到HTML中。

后端服务器代码示例（使用Node.js和Express）

首先，确保你已经安装了express和ejs： npm install express ejs

然后，创建一个服务器文件（例如：app.js）：

const express = require('express');
const app = express();
const port = 3000;

// 设置EJS作为模板引擎
app.set('view engine', 'ejs');
// 设置模板文件存放的目录
app.set('views', './views'); // 假设你的ejs文件在项目根目录下的views文件夹中

app.get('/', (req, res) => {
    // 模拟两种情况：xyz有值和xyz为空
    const dataWithValue = { xyz: '12345' };
    const dataWithoutValue = { xyz: '' }; // 或者 { xyz: null } 或 { xyz: undefined }

    // 渲染模板，传入数据
    // 你可以根据需要选择传入哪个数据对象
    res.render('index', dataWithValue); // 示例：传入有值的xyz
    // res.render('index', dataWithoutValue); // 示例：传入空值的xyz
});

app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

登录后复制

运行： 将index.ejs放在views文件夹中，然后运行node app.js。访问http://localhost:3000，你将看到根据app.js中传入的xyz值，"Some Number"标签是否被渲染。

注意事项与最佳实践

选择合适的模板引擎： 除了EJS，还有许多其他优秀的服务器端模板引擎，如Pug (Jade)、Handlebars、Nunjucks、Jinja2 (Python)、Thymeleaf (Java)等。选择哪一个取决于你的后端技术栈和个人偏好。它们都提供了类似的条件渲染功能。
避免在模板中进行复杂逻辑： 模板引擎的主要目的是数据展示和简单的条件/循环渲染。过于复杂的业务逻辑应该放在后端控制器或服务层处理，保持模板的整洁和可读性。
安全性： 当输出用户提供的数据时，务必使用模板引擎提供的转义功能（例如EJS中的<%= ... %>会自动转义HTML特殊字符），以防止跨站脚本攻击（XSS）。
性能考虑： 服务器端渲染会增加服务器的负载，因为它需要在每次请求时生成HTML。对于静态内容或更新不频繁的内容，可以考虑缓存渲染结果。
与客户端JavaScript的协作： 尽管本教程专注于不使用JavaScript，但在现代Web开发中，服务器端渲染和客户端JavaScript通常是协同工作的。服务器端渲染负责初始页面加载和SEO，而客户端JavaScript则提供丰富的交互性。

总结

当需要在不使用JavaScript的情况下，基于后端变量的条件来控制HTML元素的显示与隐藏时，服务器端模板引擎是唯一且有效的解决方案。通过将逻辑判断转移到服务器端，我们可以确保在页面发送到客户端之前，HTML结构已经根据业务逻辑进行了精确的构建。EJS提供了一个直观的方式来在HTML中嵌入JavaScript逻辑，从而实现强大的动态内容生成能力。

以上就是使用服务器端模板引擎实现HTML元素条件渲染的详细内容，更多请关注php中文网其它相关文章！