使用JS实现条件渲染HTML片段的技巧
在前端开发中，我们经常需要根据不同的状态展示不同的页面内容，比如用户登录后显示用户信息，未登录时显示登录按钮，这种根据条件动态渲染HTML片段的操作就是条件渲染。相比直接操作DOM节点修改内容和样式，合理使用JS实现条件渲染可以让代码逻辑更清晰，维护成本更低。下面介绍几种常用的实现方式，结合实际场景说明各自的适用场景。
一、基于模板字符串的条件拼接
模板字符串是ES6引入的字符串特性，支持在字符串中嵌入变量和表达式，非常适合用来拼接不同条件下的HTML片段。这种方式适合渲染内容比较简单、不需要复杂交互的场景。
我们先看一个基础的示例，根据用户的登录状态渲染不同的内容：
// 模拟用户登录状态，实际开发中通常从接口或本地存储获取
const isLogin = true;
const userName = '张三';
// 定义基础容器，实际开发中通常已经存在于页面中
const container = document.getElementById('content');
// 使用模板字符串拼接不同条件下的HTML
let htmlStr = '';
if (isLogin) {
htmlStr = `
<div class="user-info">
<span>欢迎回来，${userName}</span>
<button id="logoutBtn">退出登录</button>
</div>
`;
} else {
htmlStr = `
<div class="login-tip">
<span>您还未登录</span>
<button id="loginBtn">去登录</button>
</div>
`;
}
// 将拼接好的HTML字符串插入容器
container.innerHTML = htmlStr;这种方式的优点是代码直观，条件判断和HTML拼接放在一起，容易理解。但需要注意，如果HTML片段中包含用户输入的内容，直接使用innerHTML插入可能会有XSS风险，需要对用户输入的内容做转义处理。另外当条件分支较多、HTML片段较复杂时，模板字符串里的代码会显得比较臃肿，可读性会下降。
二、使用函数封装条件渲染逻辑
当条件渲染的逻辑比较复杂，或者同一个渲染逻辑需要在多个地方复用时，可以把渲染逻辑封装成函数，让代码结构更清晰。我们可以把不同条件的HTML生成逻辑拆分成独立的函数，根据条件调用对应的函数即可。
以下是一个商品列表根据库存状态渲染不同标签的示例：
// 模拟商品数据
const goodsList = [
{ id: 1, name: '无线耳机', stock: 10 },
{ id: 2, name: '机械键盘', stock: 0 },
{ id: 3, name: '便携充电宝', stock: 5 }
];
// 库存充足时的HTML生成函数
function getInStockHtml(goods) {
return `
<li class="goods-item">
<span class="goods-name">${goods.name}</span>
<span class="stock-tip in-stock">库存充足，剩余${goods.stock}件</span>
<button class="buy-btn">立即购买</button>
</li>
`;
}
// 库存不足时的HTML生成函数
function getOutOfStockHtml(goods) {
return `
<li class="goods-item">
<span class="goods-name">${goods.name}</span>
<span class="stock-tip out-of-stock">暂时缺货</span>
<button class="buy-btn" disabled>到货通知</button>
</li>
`;
}
// 渲染商品列表的函数
function renderGoodsList(list) {
const container = document.getElementById('goodsContainer');
let htmlStr = '';
list.forEach(goods => {
// 根据库存判断是否充足，调用对应的HTML生成函数
if (goods.stock > 0) {
htmlStr += getInStockHtml(goods);
} else {
htmlStr += getOutOfStockHtml(goods);
}
});
container.innerHTML = htmlStr;
}
// 调用渲染函数
renderGoodsList(goodsList);这种方式把不同状态的渲染逻辑拆分到独立函数中，后续如果需要修改某一种状态的HTML结构，只需要修改对应的函数即可，不会影响其他逻辑，扩展性更好。如果函数需要在多个页面复用，还可以把相关函数抽成公共的工具模块。
三、结合缓存优化重复渲染
如果条件渲染的内容在短时间内不会变化，或者需要频繁切换条件渲染，我们可以把生成的HTML片段缓存起来，避免重复拼接字符串，提升性能。尤其是当HTML片段内容比较复杂、生成成本较高时，缓存的效果会更明显。
以下是一个带缓存的条件渲染示例，模拟切换用户主题时渲染不同的页面头部：
// 缓存对象，存储已经生成过的HTML片段
const htmlCache = {};
// 生成浅色主题头部的函数
function getLightHeaderHtml() {
return `
<header class="header light-theme">
<h1>网站标题</h1>
<nav>
<a href="https://ipipp.com">首页</a>
<a href="https://ipipp.com/about">关于我们</a>
</nav>
</header>
`;
}
// 生成深色主题头部的函数
function getDarkHeaderHtml() {
return `
<header class="header dark-theme">
<h1>网站标题</h1>
<nav>
<a href="https://ipipp.com">首页</a>
<a href="https://ipipp.com/about">关于我们</a>
</nav>
</header>
`;
}
// 带缓存的条件渲染函数
function renderHeaderByTheme(theme) {
const container = document.getElementById('headerContainer');
const cacheKey = `header_${theme}`;
// 先检查缓存中是否有对应的HTML片段
if (!htmlCache[cacheKey]) {
// 缓存中没有则生成并存入缓存
if (theme === 'light') {
htmlCache[cacheKey] = getLightHeaderHtml();
} else {
htmlCache[cacheKey] = getDarkHeaderHtml();
}
}
// 从缓存中取出HTML片段插入容器
container.innerHTML = htmlCache[cacheKey];
}
// 模拟切换主题
renderHeaderByTheme('light'); // 第一次渲染，生成并缓存浅色头部
renderHeaderByTheme('light'); // 第二次渲染，直接从缓存取，无需再次生成
renderHeaderByTheme('dark'); // 第一次渲染深色主题，生成并缓存这里需要注意，缓存的内容如果后续可能发生变化，比如用户信息更新后，需要主动清除对应的缓存，否则会渲染旧的内容。另外如果页面中有多个独立的条件渲染模块，建议使用不同的缓存前缀，避免缓存键冲突。
四、注意事项
- 使用
innerHTML插入HTML时，如果内容包含用户输入的信息，一定要对特殊字符做转义，避免XSS攻击。可以写一个通用的转义函数，把<、>、&等字符转成对应的实体编码。 - 如果渲染后的HTML片段中包含需要绑定事件的元素，直接在
innerHTML插入后，之前绑定的事件会失效。这种情况可以使用事件委托，把事件绑定到父容器上，通过事件冒泡处理子元素的事件。 - 当条件渲染的内容非常复杂，或者需要频繁更新时，也可以考虑使用前端框架（如Vue、React）的条件渲染语法，框架已经帮我们处理了DOM更新、性能优化等问题，会比原生JS实现更高效。
以上几种JS实现条件渲染HTML片段的技巧，可以根据实际的业务场景选择使用，简单的场景用模板字符串拼接即可，复杂场景可以结合函数封装和缓存优化，让代码更易维护、性能更好。