理解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>标签。
-
准备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逻辑，从而实现强大的动态内容生成能力。
