本文教你将重复的 creatediv 和 creatediv2 函数合并为一个通用函数，通过动态传入配置键名（如 "parentdivclass"）来精准定位目标容器，显著提升代码可维护性与扩展性。
本文教你将重复的 `creatediv` 和 `creatediv2` 函数合并为一个通用函数，通过动态传入配置键名（如 `"parentdivclass"`）来精准定位目标容器，显著提升代码可维护性与扩展性。
在实际前端开发中，当多个逻辑高度相似的函数仅因操作的 DOM 容器类名不同而重复存在时，不仅增加维护成本，也违背了 DRY（Don’t Repeat Yourself）原则。原代码中 creatediv() 和 creatediv2() 函数几乎完全一致，仅差异在于：
-
creatediv向initobj.parentdivclass（即.main-div）追加内容； -
creatediv2向initobj.parentdivclass2（即.main-div2）追加内容。
✅ 优化方案：将容器选择器的配置键名作为参数传入
我们只需将 creatediv 升级为支持动态键名的通用函数 —— 接收第三个参数 parentKey（如 "parentdivclass"），再通过方括号语法 initobj[parentKey] 动态读取对应 CSS 选择器字符串。这样既保留原有配置灵活性，又彻底消除冗余函数。
以下是重构后的核心函数（含安全增强）：
function creatediv(initobj, homedat, parentKey) {
// ✅ 安全校验：确保配置项存在且非空
const targetSelector = initobj[parentKey];
if (!targetSelector || typeof targetSelector !== 'string') {
console.warn(`[creatediv] Invalid or missing selector for key: ${parentKey}`);
return;
}
// ✅ 遍历数据并渲染 DOM
homedat.forEach(singdat => {
const html = `
<div class="sing-list w-clearfix">
<div class="img-wrap">
<img src="%24%7Bsingdat[2]%7D" loading="lazy" alt="" class="listing-img">
</div>
<div class="listing-det">
<h2 class="listing-head">${singdat[0]}</h2>
<p>${singdat[3]}</p>
<p class="listing-parag">${singdat[1]}</p>
</div>
</div>
`;
$(targetSelector).append(html);
});
// ✅ 统一状态控制（注意：此处逻辑需按实际需求调整）
$(initobj.elementdivclass).remove(); // 移除占位元素（推荐用 .empty-list 替代硬编码）
$(targetSelector).show();
$(initobj.emptylist).toggle(homedat.length === 0); // 更语义化：空列表仅在无数据时显示
}
调用方式简洁清晰：
// 原两行 → 合并为一行语义化调用 creatediv(initobj, sheetdata, "parentdivclass"); creatediv(initobj, sheetdata2, "parentdivclass2");
? 关键改进点说明：
-
动态键访问：
initobj[parentKey]替代硬编码属性名，使函数具备“配置驱动”能力； -
HTML 模板优化：改用模板字符串（
`...${var}...`）提升可读性与安全性（避免拼接错误）； -
防御性编程：添加
targetSelector校验，防止因配置缺失导致静默失败； -
状态逻辑精炼：
$(initobj.emptylist).toggle(...)实现“有数据则隐藏，无数据则显示”，比固定.hide()更健壮； -
语义一致性：两个列表共用
.sing-list类（无需.sing-list2），CSS 可通过父容器作用域区分样式（如.main-div .sing-listvs.main-div2 .sing-list），进一步简化结构。
? 进阶建议：
若未来需支持更多分类（如 status="c", "d"…），只需扩展数据过滤逻辑 + 新增 creatediv(initobj, sheetdataX, "parentdivclassX") 调用，无需新增函数——真正实现“一次编写，多处复用”。
重构后，代码行数减少约 40%，可读性、可测性与可扩展性同步提升，是 JavaScript 初学者迈向工程化实践的重要一步。
