在构建 Web 应用程序的过程中，我们经常会面临一个根本性的选择：是使用传统的静态 HTML 文件，还是转向像 EJS 这样的动态模板引擎？这不仅仅是文件扩展名的变化，更是我们从“静态内容展示”向“动态数据交互”思维转变的关键一步。在这篇文章中，我们将深入探讨 INLINECODE86d4c621 和 INLINECODE6a0c2486 之间的核心区别，剖析它们各自的工作原理，并通过实际的代码示例，向你展示为什么在现代 Web 开发中，掌握模板引擎是至关重要的一环。
目录
HTML：网页的基石与静态呈现
什么是 HTML？
HTML（超文本标记语言）是我们构建网页世界的通用语言。严格来说，它并不像 C++、Java 或 Python 那样属于图灵完备的编程语言，而是一种用于定义网页结构和内容的标记语言。你可以把 HTML 想象成建筑的“钢筋混凝土骨架”，它决定了网页哪里是标题，哪里是段落，哪里放置图片。
HTML 的工作流程
当我们访问一个静态网页时，浏览器会向服务器请求 index.html 文件。服务器的工作非常简单：找到文件，原封不动地将其发送给浏览器。浏览器接收到 HTML 后，会解析这些标记，并将其渲染成 DOM（文档对象模型）树。
静态页面的局限性
虽然 HTML 非常适合展示固定不变的内容，但在处理动态数据时，它的局限性就暴露无遗了。
实际场景痛点：
假设你需要为公司建立一个内部员工薪资查询页面。如果你使用纯 HTML (index.html)，每当有新员工入职或老员工调薪时，你都需要手动打开 HTML 文件，复制粘贴表格行，修改姓名和数字，然后重新上传到服务器。这在技术上是可行的，但在维护上是灾难性的。随着数据量的增加，这种手工操作不仅效率低下，而且极易出错。
代码示例：静态 HTML 页面 (index.html)
这是一个典型的静态 HTML 示例。请注意看，所有的数据都是“硬编码”在 HTML 里的。一旦数据变化，代码必须随之改变。
员工薪资表 (静态版)
body { font-family: ‘Segoe UI‘, Tahoma, Geneva, Verdana, sans-serif; }
table {
margin: 50px auto;
border-collapse: collapse;
width: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #009879;
color: #ffffff;
}
tr:hover {background-color: #f5f5f5;}
员工薪资列表
员工姓名
薪资数额
张三
¥15,000
李四
¥18,500
王五
¥12,000
在这个例子中，如果你想添加一位新员工，你必须直接编辑 HTML 源代码。这就是静态 HTML 的核心特征：内容与结构高度耦合，无法灵活应变。
模板引擎与 EJS：动态生成的魔法
什么是模板引擎？
为了解决 HTML 无法处理动态数据的问题，我们引入了“模板引擎”。你可以把模板引擎想象成一个“超级加工厂”。
在这个工厂里：
- 原材料：我们预先写好的 HTML 模板（其中留有一些“空位”）。
- 辅料：来自服务器、数据库或 API 的动态数据（如 JSON 对象）。
- 机器：模板引擎（如 EJS）。
- 成品：最终生成的、填满数据的 HTML 字符串，发送给浏览器。
什么是 EJS？
EJS 的全称是 Embedded JavaScript（嵌入式 JavaScript）。正如其名，它允许我们直接在 HTML 标记中嵌入 JavaScript 代码。对于那些熟悉 HTML 和 JavaScript 的开发者来说，EJS 的学习曲线几乎为零，因为它本质上就是在 HTML 里加了几个特殊的标签而已。
HTML 与 EJS 的本质联系
我们需要明确一点：EJS 并不是要替代 HTML，而是增强 HTML。
我们在 INLINECODEddf218e6 文件中编写的，大部分依然是标准的 HTML 代码。EJS 的作用是提供一种机制，让我们可以在 HTML 的特定位置插入变量或执行逻辑。当服务器接收到请求时，EJS 引擎会读取 INLINECODE243f540f 文件，执行其中的 JavaScript 逻辑，将数据填充进去，最后“吐”出一个纯净的 .html 文件给浏览器。浏览器最终看到的，依然是它最熟悉的 HTML。
index.ejs 与 index.html 的核心区别
让我们通过一个对比表格来清晰地看清两者的差异，这有助于我们在开发时做出正确的技术选型。
index.html (静态文件)
:—
适用于内容固定的页面（如关于我们、帮助文档）。
纯 HTML 标记。
无法直接处理数据。数据必须硬编码在页面中。
服务器直接读取文件并返回，不做任何计算。
INLINECODEbd54470f
深入实战：使用 EJS 重构薪资页面
现在，让我们把刚才那个死板的静态 HTML 页面，升级为使用 EJS 和 Node.js 的动态 Web 应用。我们将展示如何让数据与页面分离，实现真正的动态渲染。
场景设定
我们将创建一个简单的 Node.js 服务器，使用 Express 框架。我们的目标是维护一份员工薪资列表，但这份数据不再写在 HTML 里，而是存储在服务器的变量（模拟数据库）中。
准备工作
首先，你需要初始化一个 Node.js 项目并安装必要的模块。在终端中运行以下命令：
# 初始化项目
npm init -y
# 安装 Express 和 EJS
npm install express ejs
步骤 1：编写服务器代码 (index.js)
在这个文件中，我们模拟了一个数据库数据，并设置路由来渲染 EJS 文件。请注意代码中的注释，它们解释了每一步的关键操作。
// 引入 express 框架
const express = require(‘express‘);
const app = express();
// 设置视图引擎为 EJS
// 这告诉 Express：当我们要渲染视图时，请去 ‘views‘ 文件夹里找 .ejs 文件
app.set(‘view engine‘, ‘ejs‘);
// 模拟数据库数据：员工薪资数组
// 在实际应用中，这些数据通常来自 MongoDB 或 MySQL 数据库
const empSalary = [
{ name: "张三", salary: 15000 },
{ name: "李四", salary: 18500 },
{ name: "王五", salary: 12000 },
{ name: "赵六", salary: 22000 },
{ name: "孙七", salary: 19500 }
];
// 定义路由：当用户访问 ‘/employee/salary‘ 时触发
app.get(‘/employee/salary‘, (req, res) => {
// res.render 方法用于渲染视图
// 第一个参数 ‘index‘ 是 EJS 文件的名称（不需要写 .ejs 后缀）
// 第二个参数是一个对象，包含我们要传递给模板的数据
// 这里的 key ‘empList‘ 将在 EJS 文件中被直接使用
res.render(‘index‘, {
pageTitle: "员工薪资详情页",
empList: empSalary,
currentYear: new Date().getFullYear()
});
});
// 启动服务器，监听 3000 端口
app.listen(3000, () => {
console.log(‘服务器已启动：http://localhost:3000/employee/salary‘);
});
步骤 2：编写 EJS 模板 (views/index.ejs)
这是最精彩的部分。请注意看，我们如何在 HTML 中使用 INLINECODE37e9d018 和 INLINECODE63e8004e 语法。
-
: 转义输出，用于显示变量的值。 -
: 执行 JavaScript 代码，用于逻辑控制（如循环）。
员工薪资管理系统
数据来源：服务器端模拟数据库
员工姓名
当前薪资
¥
¥
代码深度解析
你看，在这个 EJS 文件中：
- 动态标题：INLINECODEc310f3cd 意味着标题不是固定的，而是取决于我们在 INLINECODE3e689c1e 中传过来的值。这使得我们可以复用同一个 EJS 文件来生成成千上万个不同标题的页面。
- 循环生成行：最强大的部分在于 INLINECODE6ae96a9c。这行代码实际上是在服务器端运行的。如果数组里有 100 条数据，EJS 就会生成 100 个 INLINECODE470125ed 标签；如果是空的，它就什么都不生成。这在纯 HTML 中是不可能做到的。
- 业务逻辑处理：我们在模板中加入了一个简单的判断逻辑：如果薪资低于 15000，字体变红。这种“根据数据改变显示样式”的能力，正是动态网站的核心魅力。
进阶应用与最佳实践
掌握了基本的 EJS 语法后，我们在实际开发中通常会采用模块化的策略。想象一下，如果每个页面都重复写 、导航栏、页脚，那依然是低效的。EJS 允许我们将公共部分提取出来。
使用 Partials (组件化)
我们可以创建一个名为 partials/head.ejs 的文件：
然后在主页面中引用它：
通过这种方式，我们将复杂的页面拆解为可复用的积木，极大地提高了代码的可维护性。
总结：如何选择合适的技术？
回到文章开头的问题，何时使用 HTML，何时使用 EJS？
- 使用 HTML (
index.html) 的情况：
* 你的网站内容几乎从不改变（如个人简历、隐私政策页面）。
* 你希望尽可能简单，不需要服务器环境，直接双击打开文件即可浏览。
* 追求极致的加载速度，不需要服务器进行任何计算。
- 使用 EJS (
index.ejs) 的情况：
* 你需要根据用户登录状态显示不同的内容。
* 页面数据来自数据库或 API。
* 你需要减少重复代码，通过模板复用来提高开发效率。
* 你是 Node.js 开发者，希望用熟悉的 JavaScript 语法来控制页面输出。
最终建议
在现代 Web 开发的流程中，理解 EJS 这类模板引擎的工作原理是至关重要的一步。它不仅让我们摆脱了繁琐的复制粘贴工作，更重要的是，它教会了我们“数据与视图分离”的编程思想。当你能够自如地使用 EJS 将后端数据优雅地展示在前端页面上时，你就已经迈过了全栈开发的重要门槛。希望这篇详细的指南能帮助你更好地理解这一过程！