普通块本身不能实现变量填充逻辑，但可通过JavaScript将数据准备、模板构造、DOM插入三步解耦，用数组驱动渲染，封装为可复用函数并结合语义化类名与data属性提升可维护性。
普通块（即不带特定语义的 <div> 或纯代码块）本身不能“实现变量填充逻辑”，因为它不是编程语言结构；但你在实际开发中，很可能是想用 HTML 普通块作为容器，在 JavaScript 中动态填充列表数据，并通过合理组织代码提升可读性与可维护性。核心在于：把“数据准备”、“模板构造”、“DOM 插入”三步解耦，避免内联拼接、重复循环和隐式状态。
<h3>用数组驱动渲染，而非手动写死 HTML 字符串</h3>
<p>常见反模式是这样写：</p>
<font color="#666">
<pre class='brush:java;toolbar:false;'>el.innerHTML = `<div><span>${data[0]}</span></div>
<div><span>${data[1]}</span></div>
<div><span>${data[2]}</span></div>`;</pre>
</font>
<p>问题在于硬编码索引、无法应对长度变化、难以测试。优化方式是让数据数组自身决定结构：</p>
<ul>
<li>把列表项抽象为独立函数，例如 <code>renderItem(item)，专注单条逻辑
map() 生成元素数组，再 join('') 或 forEach() 插入document.createDocumentFragment()），批量插入，减少重排用普通块做“逻辑锚点”，明确作用域边界
不要只写一个大 <div id="list"></div> 就完事。给普通块添加语义化类名或 data 属性，让它成为逻辑载体：
-
<div class="js-user-list" data-status="loading"></div>—— 类名提示 JS 操作目标，data 属性记录状态 - 配合 CSS 的
[data-status="loading"]::before可自动显示加载态，分离表现与逻辑 - 多个同类块共存时（如侧边栏列表 + 主区列表），用唯一 data-id 或父级上下文隔离操作范围
封装填充逻辑为可复用函数，隐藏临时变量细节
所谓“临时列表变量”，其实是中间数据。不应散落在事件处理函数里，而应封装为纯函数：
function fillList(container, items, { key = 'id', template = defaultTemplate } = {}) {
const frag = document.createDocumentFragment();
items.forEach(item => {
const el = document.createElement('div');
el.className = 'list-item';
el.innerHTML = template(item);
frag.appendChild(el);
});
container.innerHTML = '';
container.appendChild(frag);
}
- 调用时只需
fillList(listEl, users)，无需关心 innerHTML、循环、清空等细节 - template 参数支持自定义结构，复用同一填充逻辑渲染不同列表
- 返回值可选加
return { elements: [...frag.children] }，方便后续绑定事件
结合现代语法进一步简化（可选但推荐）
如果项目支持 ES2022+，可用更简洁方式表达相同逻辑：
- 用
container.replaceChildren(...items.map(renderItem))替代 fragment 手动创建 - 用可选链
item?.name ?? 'N/A'避免 undefined 报错，减少 guard clause - 模板字符串中避免多层嵌套三元，改用提前解构或默认值：
const { name = '匿名', avatar } = item;
