前端如何实现电商商品属性按名称或ID拆分Premium与常规两栏展示

在电商商品详情页的开发场景中，商品属性往往包含Premium专属属性和常规基础属性两类，将这两类属性拆分到不同栏目展示，能够让用户更清晰地感知商品的核心优势。实现这个需求的核心是先根据属性名称或ID定义分组规则，再对属性数据进行过滤拆分，最后完成两栏布局的渲染。

基础数据结构设计

首先我们需要定义商品属性的原始数据结构，通常后端返回的商品属性列表会包含属性的ID、名称、值等基础字段，示例如下：

// 模拟后端返回的商品属性列表
const productAttributes = [
  { id: 101, name: '材质', value: '头层牛皮' },
  { id: 102, name: 'Premium_防水等级', value: 'IPX8' },
  { id: 103, name: '尺寸', value: '42码' },
  { id: 104, name: 'Premium_质保时长', value: '3年' },
  { id: 105, name: '颜色', value: '黑色' },
  { id: 106, name: 'Premium_专属刻字', value: '支持' }
];

分组规则定义

分组规则可以根据业务需求灵活调整，常见的两种规则分别是按属性名称前缀拆分和按属性ID范围拆分，我们可以封装统一的拆分函数，支持两种规则切换。

按名称拆分规则

如果属性名称包含Premium_前缀，则判定为Premium属性，否则为常规属性。拆分逻辑如下：

/**
 * 按属性名称前缀拆分Premium和常规属性
 * @param {Array} attributes 原始属性列表
 * @returns {Object} 包含premium和normal两个数组的分组结果
 */
function splitByAttributeName(attributes) {
  const result = {
    premium: [],
    normal: []
  };
  attributes.forEach(attr => {
    if (attr.name.startsWith('Premium_')) {
      // 去除前缀后存储，方便展示
      result.premium.push({
        ...attr,
        displayName: attr.name.replace('Premium_', '')
      });
    } else {
      result.normal.push(attr);
    }
  });
  return result;
}

按ID拆分规则

如果属性ID大于等于100且为偶数，则判定为Premium属性，其余为常规属性，实现逻辑如下：

/**
 * 按属性ID范围拆分Premium和常规属性
 * @param {Array} attributes 原始属性列表
 * @returns {Object} 包含premium和normal两个数组的分组结果
 */
function splitByAttributeId(attributes) {
  const result = {
    premium: [],
    normal: []
  };
  attributes.forEach(attr => {
    // 示例规则：ID为100以上且为偶数的属性为Premium属性
    if (attr.id >= 100 && attr.id % 2 === 0) {
      result.premium.push(attr);
    } else {
      result.normal.push(attr);
    }
  });
  return result;
}

页面渲染实现

拆分完成后，我们需要使用HTML和CSS完成两栏布局的渲染，将Premium属性放在左侧高亮栏目，常规属性放在右侧普通栏目。

CSS样式定义

/* 两栏容器样式 */
.attribute-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  font-family: Arial, sans-serif;
}
/* 单个栏目样式 */
.attribute-column {
  flex: 1;
  padding: 15px;
  border-radius: 8px;
}
/* Premium栏目样式 */
.premium-column {
  background-color: #fff8e1;
  border: 1px solid #ffd54f;
}
/* 常规栏目样式 */
.normal-column {
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
}
/* 栏目标题样式 */
.column-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ddd;
}
/* 单个属性项样式 */
.attribute-item {
  margin: 8px 0;
  font-size: 14px;
}
.attribute-item .attr-name {
  color: #666;
  margin-right: 5px;
}
.attribute-item .attr-value {
  color: #333;
  font-weight: 500;
}

渲染逻辑实现

/**
 * 渲染属性分组到页面
 * @param {Object} groupedAttributes 分组后的属性对象
 */
function renderAttributes(groupedAttributes) {
  const container = document.getElementById('attribute-container');
  // 清空容器原有内容
  container.innerHTML = '';
  // 渲染Premium栏目
  const premiumColumn = document.createElement('div');
  premiumColumn.className = 'attribute-column premium-column';
  premiumColumn.innerHTML = `
    <div class="column-title">Premium专属属性</div>
    ${groupedAttributes.premium.map(attr => `
      <div class="attribute-item">
        <span class="attr-name">${attr.displayName || attr.name}:</span>
        <span class="attr-value">${attr.value}</span>
      </div>
    `).join('')}
  `;
  // 渲染常规栏目
  const normalColumn = document.createElement('div');
  normalColumn.className = 'attribute-column normal-column';
  normalColumn.innerHTML = `
    <div class="column-title">常规属性</div>
    ${groupedAttributes.normal.map(attr => `
      <div class="attribute-item">
        <span class="attr-name">${attr.name}:</span>
        <span class="attr-value">${attr.value}</span>
      </div>
    `).join('')}
  `;
  // 将两栏添加到容器
  container.appendChild(premiumColumn);
  container.appendChild(normalColumn);
}

完整调用示例

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  // 选择拆分规则，这里使用按名称拆分
  const grouped = splitByAttributeName(productAttributes);
  // 渲染到页面
  renderAttributes(grouped);
});

对应的HTML容器只需要添加一个id为attribute-container的空元素即可：

<div id="attribute-container" class="attribute-container"></div>

扩展优化建议

实际业务中可以根据需求做进一步扩展，比如支持自定义分组规则、添加属性排序、处理空分组情况显示默认提示等。如果属性数据量较大，还可以考虑虚拟滚动优化渲染性能，确保页面展示流畅。

商品属性分组前端渲染JavaScriptDOM操作电商页面修改时间：2026-06-23 18:42:43