用JavaScript实现商品SKU及其实现思路

36 min read

实现商品的sku，可以考虑以下思路：

  1. 定义商品的属性，例如颜色、尺码等；
  2. 定义商品属性的取值范围，例如颜色可以取值为红色、蓝色、绿色等，尺码可以取值为 S、M、L、XL 等；
  3. 根据商品属性和取值范围，生成所有的组合情况，这些组合就是商品的 sku；
  4. 用对象的方式保存每个 sku 和对应的货号、价格、库存等信息；
  5. 根据用户选择的属性值，判断该属性值是否可选，可选则组合出选择的 sku；
  6. 根据选择的 sku，显示对应的货号、价格、库存等信息。

下面是一个简单的实现示例：

// 定义商品属性和取值范围
const goodsProperties = {
  color: ['红色', '蓝色', '绿色'],
  size: ['S', 'M', 'L', 'XL']
};

// 生成所有 sku
const generateSku = () => {
  const skuList = {};
  const propertyKeys = Object.keys(goodsProperties);
  const propertyValues = Object.values(goodsProperties);
  const combination = propertyValues.reduce((com, arr) => {
    return com.length ? com.map(c => arr.map(m => [].concat(c, m))) : arr.map(a => [].concat(a));
  }, []);
  combination.forEach(com => {
    const sku = com.join('-');
    skuList[sku] = {
      id: sku,
      price: Math.floor(Math.random() * 100),
      inventory: Math.floor(Math.random() * 100)
    }
  });
  return skuList;
};

const skuList = generateSku();

// 根据选择的属性值，组合出选择的 sku
const chooseSku = (selectedProperties) => {
  const selectedKeys = Object.keys(selectedProperties);
  const availableCombination = Object.keys(skuList).filter(sku => {
    const properties = sku.split('-');
    return selectedKeys.every(key => properties.indexOf(selectedProperties[key]) !== -1);
  });
  return availableCombination.length ? availableCombination[0] : null;
};

// 测试
console.log(skuList);
console.log(chooseSku({ color: '蓝色', size: 'L' }));

在上面的示例代码中，首先定义了商品的属性和取值范围，然后调用 generateSku 函数生成所有的 sku，并用对象 skuList 存储每个 sku 对应的货号、价格、库存等信息。接着定义 chooseSku 函数，根据用户选择的属性值，筛选出可选的 sku。最后通过测试函数检查代码的正确性。