EJS模板渲染指南：深入理解
一、EJS简介
EJS（Embedded JavaScript）是一种简单的模板语言，它允许你在HTML中使用JavaScript代码来动态生成页面内容。EJS的主要特点包括：
简洁的语法：使用<% %>标签嵌入JavaScript代码
强大的功能：支持变量、条件判断、循环等
易于学习：对于熟悉JavaScript的开发者来说非常容易上手
良好的性能：模板会被编译成高效的JavaScript函数
二、安装与基本使用
1. 安装EJS
通过npm安装EJS：
npm install ejs
2. 基本使用示例
创建一个简单的EJS模板文件（template.ejs）：
<!DOCTYPE html> <html> <head> <title><%= title %></title> </head> <body> <h1>Hello, <%= name %>!</h1> <p>Today is <%= new Date().toLocaleDateString() %></p> </body> </html>
在Node.js中使用EJS渲染模板：
const ejs = require('ejs');
const fs = require('fs');
// 读取模板文件
const template = fs.readFileSync('./template.ejs', 'utf8');
// 渲染模板
const data = {
title: 'EJS Demo',
name: 'John Doe'
};
const html = ejs.render(template, data);
console.log(html);三、EJS模板语法详解
1. 变量输出
使用<%= %>标签输出变量值（会自动转义HTML）：
<p>Welcome, <%= username %></p> <p>Your score is <%= score %></p>
如果要输出未转义的HTML，可以使用<%- %>标签：
<div><%- rawHtmlContent %></div>
2. JavaScript代码块
使用<% %>标签执行JavaScript代码（不输出结果）：
<%
var fruits = ['apple', 'banana', 'orange'];
for (var i = 0; i < fruits.length; i++) {
%>
<li><%= fruits[i] %></li>
<%
}
%>3. 条件判断
在EJS中使用条件语句：
<% if (isLoggedIn) { %>
<p>Welcome back, user!</p>
<% } else { %>
<p>Please log in.</p>
<% } %>4. 循环
遍历数组或对象：
<!-- 遍历数组 -->
<% users.forEach(function(user) { %>
<div>User: <%= user.name %>, Age: <%= user.age %></div>
<% }); %>
<!-- 遍历对象 -->
<% for (var key in config) { %>
<p><%= key %>: <%= config[key] %></p>
<% } %>5. 包含其他模板
使用<%- include() %>引入其他模板文件：
<!-- 在主模板中包含头部和尾部 -->
<%- include('header') %>
<main>
<h1>Main Content</h1>
</main>
<%- include('footer') %>6. 注释
EJS支持两种注释方式：
<%# 这是单行注释，不会出现在渲染后的HTML中 %> <% /* 这是多行注释 同样不会出现在渲染后的HTML中 */ %>
四、高级特性
1. 自定义分隔符
可以通过设置来自定义EJS的分隔符：
const ejs = require('ejs');
// 设置自定义分隔符
ejs.delimiter = '?';
// 现在可以使用新的分隔符
const template = '?= title ?';
const data = { title: 'Custom Delimiters' };
const html = ejs.render(template, data);
console.log(html); // 输出: Custom Delimiters2. 模板缓存
在生产环境中，可以启用模板缓存以提高性能：
const ejs = require('ejs');
// 启用缓存
ejs.cache = true;
// 编译模板并缓存
const template = '<h1><%= title %></h1>';
const compiledTemplate = ejs.compile(template);
// 后续渲染可以直接使用编译后的函数
const data1 = { title: 'First Page' };
const data2 = { title: 'Second Page' };
console.log(compiledTemplate(data1)); // 输出: <h1>First Page</h1>
console.log(compiledTemplate(data2)); // 输出: <h1>Second Page</h1>3. 客户端渲染
EJS也支持在浏览器中使用：
<!DOCTYPE html>
<html>
<head>
<title>Client-side EJS</title>
<script src="https://cdn.jsdelivr.net/npm/ejs@3.1.8/ejs.min.js"></script>
</head>
<body>
<div id="output"></div>
<script>
const template = '<h1><%= title %></h1><ul><% items.forEach(function(item) { %><li><%= item %></li><% }); %></ul>';
const data = {
title: 'Client-side Rendering',
items: ['Item 1', 'Item 2', 'Item 3']
};
const html = ejs.render(template, data);
document.getElementById('output').innerHTML = html;
</script>
</body>
</html>五、最佳实践
保持模板简洁：避免在模板中编写复杂的业务逻辑
合理使用包含：将重复的UI部分提取为独立模板
注意安全性：谨慎使用<%- %>输出未转义的HTML，防止XSS攻击
利用缓存：在生产环境中启用模板缓存提高性能
组织模板结构：合理规划模板目录结构，便于维护
六、常见问题与解决方案
1. 变量未定义
问题：在模板中使用的变量未定义，导致渲染出错。
解决方案：在渲染前确保所有需要的变量都已定义，或为变量设置默认值。
<p>Welcome, <%= username || 'Guest' %></p>
2. 包含文件路径错误
问题：使用include时找不到指定的模板文件。
解决方案：确保包含的文件路径正确，相对路径是相对于当前模板文件的。
<!-- 如果header.ejs在当前目录下 -->
<%- include('header') %>
<!-- 如果header.ejs在partials目录下 -->
<%- include('partials/header') %>3. 性能问题
问题：大量模板渲染导致性能下降。
解决方案：启用模板缓存，预编译常用模板，减少重复编译的开销。
七、总结
EJS是一个强大而灵活的模板引擎，它结合了JavaScript的强大功能和HTML的易用性。通过本文的介绍，你应该已经掌握了EJS的基本语法、高级特性和最佳实践。在实际项目中，合理使用EJS可以让你的前端开发更加高效和便捷。
无论是简单的静态页面还是复杂的前端应用，EJS都能提供良好的支持。希望这篇指南能帮助你更好地理解和使用EJS模板渲染。