当前位置：首页 > JavaScript

js实现sku

2026-03-14 07:06:45JavaScript

实现 SKU（库存量单位）的 JavaScript 方案

SKU（Stock Keeping Unit）是电商系统中用于管理商品组合的核心功能，通常涉及属性组合、库存计算和价格联动。以下是实现 SKU 的几种常见方法：

数据结构设计

使用嵌套对象或数组存储商品属性和组合关系：

const skuData = {
  // 属性列表
  attributes: [
    { name: '颜色', values: ['红色', '蓝色'] },
    { name: '尺寸', values: ['S', 'M'] }
  ],
  // SKU 组合
  skus: [
    { 
      attributes: ['红色', 'S'], 
      stock: 10, 
      price: 99 
    },
    { 
      attributes: ['蓝色', 'M'], 
      stock: 5, 
      price: 109 
    }
  ]
}

核心算法实现

1. 属性组合生成

通过笛卡尔积计算所有可能的属性组合：

function generateCombinations(attributes) {
  return attributes.reduce((acc, attr) => {
    return acc.flatMap(x => 
      attr.values.map(v => [...x, v])
    )
  }, [[]]).filter(arr => arr.length > 0)
}

2. SKU 匹配验证

检查当前选择的属性是否匹配有效 SKU：

function isValidSku(selected, skus) {
  return skus.some(sku => 
    selected.every((val, i) => val === sku.attributes[i])
  )
}

3. 禁用不可选状态

当部分选择导致某些属性不可组合时禁用选项：

function getDisabledStatus(attributes, selected, skus) {
  return attributes.map((attr, attrIndex) => {
    return attr.values.map(value => {
      const testSelected = [...selected]
      testSelected[attrIndex] = value
      return !hasValidCombination(testSelected, skus)
    })
  })
}

完整实现示例

class SKUManager {
  constructor(data) {
    this.attributes = data.attributes
    this.skus = data.skus
  }

  // 获取当前库存状态
  getStockInfo(selected) {
    const matched = this.skus.find(sku =>
      selected.every((val, i) => val === sku.attributes[i])
    )
    return matched ? { stock: matched.stock, price: matched.price } : null
  }

  // 获取可选状态矩阵
  getAvailabilityMatrix(selected) {
    return this.attributes.map((attr, i) => {
      return attr.values.map(value => {
        const testSelection = [...selected]
        testSelection[i] = value
        return this.hasValidCombination(testSelection)
      })
    })
  }

  hasValidCombination(selection) {
    return this.skus.some(sku =>
      selection.every((val, i) => 
        val === null || val === sku.attributes[i]
      )
    )
  }
}

可视化交互实现

结合前端框架（如 Vue/React）实现动态交互：

// React 示例
function SkuSelector({ data }) {
  const [selected, setSelected] = useState(Array(data.attributes.length).fill(null))
  const manager = new SKUManager(data)

  const availability = manager.getAvailabilityMatrix(selected)
  const stockInfo = manager.getStockInfo(selected)

  const handleSelect = (attrIndex, value) => {
    const newSelected = [...selected]
    newSelected[attrIndex] = value
    setSelected(newSelected)
  }

  return (
    <div>
      {data.attributes.map((attr, i) => (
        <div key={attr.name}>
          <h4>{attr.name}</h4>
          {attr.values.map((value, j) => (
            <button
              key={value}
              disabled={!availability[i][j]}
              onClick={() => handleSelect(i, value)}
            >
              {value}
            </button>
          ))}
        </div>
      ))}
      {stockInfo && (
        <div>库存: {stockInfo.stock} | 价格: {stockInfo.price}</div>
      )}
    </div>
  )
}