js实现sku

SKU 实现的基本概念

SKU（Stock Keeping Unit）是商品库存管理的最小单位，通常由多个属性组合决定（如颜色、尺寸、材质等）。前端实现 SKU 的核心是处理属性组合的匹配与库存状态校验。

数据结构设计

SKU 的实现通常需要两类数据：

1. 属性列表：描述商品的可选属性（如颜色、尺寸）。
2. SKU 列表：每个 SKU 包含具体的属性组合和库存信息。

示例数据结构：

const attributes = [
  { name: '颜色', values: ['红色', '蓝色'] },
  { name: '尺寸', values: ['S', 'M'] }
];

const skus = [
  { id: 1, attributes: { 颜色: '红色', 尺寸: 'S' }, stock: 10 },
  { id: 2, attributes: { 颜色: '蓝色', 尺寸: 'M' }, stock: 5 }
];

核心功能实现

1. 属性选择联动

根据已选属性过滤剩余可选值，避免无效组合。

function getAvailableValues(selectedAttributes, skus, attributeName) {
  const availableValues = new Set();
  skus.forEach(sku => {
    let match = true;
    for (const key in selectedAttributes) {
      if (sku.attributes[key] !== selectedAttributes[key]) {
        match = false;
        break;
      }
    }
    if (match) availableValues.add(sku.attributes[attributeName]);
  });
  return Array.from(availableValues);
}

2. 库存校验

检查当前选择的属性组合是否有库存。

function checkStock(selectedAttributes, skus) {
  return skus.some(sku => {
    const match = Object.keys(selectedAttributes).every(
      key => sku.attributes[key] === selectedAttributes[key]
    );
    return match && sku.stock > 0;
  });
}

3. 动态渲染可选属性

根据用户选择实时更新界面。

function renderAttributes(selectedAttributes) {
  attributes.forEach(attr => {
    const availableValues = getAvailableValues(selectedAttributes, skus, attr.name);
    // 更新 UI，只显示 availableValues
  });
}

完整流程示例

1. 用户选择“颜色：红色”，调用 getAvailableValues 过滤出可选的尺寸（如 ['S']）。
2. 用户继续选择“尺寸：S”，调用 checkStock 检查库存。
3. 若库存存在，高亮“加入购物车”按钮；否则禁用。

优化方向

• 性能：对 SKU 列表预处理为哈希表，加速查找。
• 交互：支持默认选中第一个有库存的组合。
• 扩展性：支持嵌套属性（如“套餐”包含多个子属性）。

通过上述方法，可以实现一个基础的 SKU 选择功能，适用于电商场景。