本文介绍如何基于对象中的两个并行数组（classes 和 buttoncontent）动态生成带有对应 css 类名和文本内容的按钮，避免硬编码，提升代码复用性与可维护性。

本文介绍如何基于对象中的两个并行数组（classes 和 buttoncontent）动态生成带有对应 css 类名和文本内容的按钮，避免硬编码，提升代码复用性与可维护性。

在构建动态 HTML 组件时，常需将数据结构（如配置对象）映射为 DOM 元素。本例中，header 对象包含两个关键数组：classes 用于指定每个按钮的 CSS 类名，buttonContent 提供按钮显示文本及跳转逻辑。二者按索引一一对应，因此应同步遍历，而非分别处理。

以下是优化后的 header 函数实现：

function header(content) {
    const html = content.buttonContent.map((item, index) =>
        `<button class="${content.classes[index] || ''}" onclick="document.location='#'">${item}</button>`
    );

    return `
    <header>
        <img src="#" alt="foto" title="foto">
        <nav>
            ${html.join('')}
        </nav>
        <button class="burger-menu">menu</button>
    </header>`;
}

const content = {
    type: 'header', 
    classes: ['primary-btn', 'secondary-btn', 'cta-btn', 'ghost-btn'],
    buttonContent: ['首页', '关于', '服务', '联系']
};

document.body.innerHTML = header(content);

✅ 关键改进点：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 使用 map((item, index) => ...) 同时获取内容项与索引，精准匹配 classes[index]；
• ${item} 替代硬编码的 "123"，确保按钮文本动态化；
• onclick="document.location='#'" 保留可扩展跳转逻辑（实际使用中建议改用 event.preventDefault() + JavaScript 路由或 window.location.href 更安全）；
• 提供兜底写法 content.classes[index] || ''，防止索引越界导致 undefined 被渲染为字符串。

⚠️ 注意事项：

• 确保 classes 与 buttonContent 长度一致，否则缺失类名或内容将导致 UI 不一致；
• 生产环境应避免内联 onclick，推荐通过 addEventListener 解耦逻辑，并防范 XSS（尤其当 buttonContent 来自用户输入时）；
• 若需支持更复杂交互（如不同跳转路径），可将 buttonContent 改为对象数组：[{text: '首页', href: '/'}, ...]，增强灵活性。

该方案简洁、可读性强，适用于轻量级模板生成场景，是数据驱动 DOM 构建的典型实践。