sku算法详解及Demo～接上篇

标签：iphone   ott   OLE   ems   fixed   orm   属性   include   z-index   

前言

做过电商项目前端售卖的应该都遇见过不同规格产品库存的计算问题，业界名词叫做sku(stock Keeping Unit)，库存量单元对应我们售卖的具体规格，比如一部手机具体型号规格，其中iphone6s 4G 红色就是一个sku。这里我们区别spu(Standard Product Unit)，标准化产品单元，比如一部手机型号iphone6s就是一个spu。

sku 算法

在前端展示商品时，根据用户选择的不同sku，我们需要计算出不同的库存量动态展示给用户，这里就衍生出了sku算法。

数据结构

我们先看看在后端服务器保存库存的数据结构一般是长怎么样的：

// 库存列表
const skuList = [
  {
    skuId: "0",
    skuGroup: ["红色", "大"],
    remainStock: 7,
    price: 2,
    picUrl: "https://dummyimage.com/100x100/ff00b4/ffffff&text=大",
  },
  {
    skuId: "1",
    skuGroup: ["红色", "小"],
    remainStock: 3,
    price: 4,
    picUrl: "https://dummyimage.com/100x100/ff00b4/ffffff&text=小",
  },
  {
    skuId: "2",
    skuGroup: ["蓝色", "大"],
    remainStock: 0,
    price: 0.01,
    picUrl: "https://dummyimage.com/100x100/0084ff/ffffff&text=大",
  },
  {
    skuId: "3",
    skuGroup: ["蓝色", "小"],
    remainStock: 1,
    price: 1,
    picUrl: "https://dummyimage.com/100x100/0084ff/ffffff&text=小",
  },
];

// 规格列表
const skuNameList = [
  {
    skuName: "颜色",
    skuValues: ["红色", "蓝色"],
  },
  {
    skuName: "尺寸",
    skuValues: ["大", "小"],
  },
];

算法演示

在前端用户选择单个规格或多个规格后，我们需要动态计算出此时其他按钮是否还能点击（组合有库存），以及当前状态对应的总库存量，封面图和价格区间。

以上面的数据举个 ??

开始时什么都没有选择，展示默认图片，规格列表中的第一项组合（[‘红色-大‘]）对应的图片，库存为商品总库存，价格为商品的价格区间。然后在用户选择某个属性或几个属性的时候实时计算对应的图片，库存，价格区间。

同时根据当前已选属性，置灰不可选择的属性。在本例中，蓝色 大的产品对应的库存为 0，所以当我们选择其中一项 蓝色 或者 大 的时候，需要置灰另一个属性选项。

实现思路-第二种算法

思路

为了大家能看清下面的分析，在此定义下相关名词，库存列表：skuList，规格列表：skuNameList，属性：skuNameList-skuValues数组下的单个元素，规格：skuNameList下的单个元素

• 首先定义变量 skuStock(库存对象), skuPartNameStock(用于缓存非全名库存，如{‘小‘: 4})

• 将规格列表下的已选属性集合作为入参 selected，如果在当前规格未选择相关属性则传入空字符串，即最开始时 selected === [‘‘, ‘‘]

• 判断当前已选属性 selected 是否已有缓存库存，有则直接返回缓存库存

• 判断当前是否已全选，如果全选则返回从 skuStock 读取的库存，并在此之前及时缓存库存

• 定义库存变量 remainStock，将选属性数组 willSelected

• 遍历库存规格，判断当前规格属性是否已选，已选则将当前属性推入 willSelected

• 未选则遍历属性数组，将属性数组和已选数组 selected 组合，递归取得当前组合库存，并将库存进行累加

• 最后返回累加的库存作为已选属性为 selected 时对应的库存，并及时缓存于 skuPartNameStock 对象中

// sku库存列表转对象
const skuStock = skuList.forEach(sku => {
  this.skuStock[sku.skuGroup && sku.skuGroup.join("-")] = sku.remainStock;
});
// 用于缓存库存信息
const skuPartNameStock = {};

/**
 * 获取库存
 * @param {Array} selected 已选属性数组
 * @return {Object} skuInfo
 *
 */
function getRemainByKey(selected) {
  const selectedJoin = selected.join("-");

  // 如果已有缓存则返回
  if (typeof skuPartNameStock[selectedJoin] !== "undefined") {
    return skuPartNameStock[selectedJoin];
  }

  // 返回skuStock的库存，并及时缓存
  if (selected.length === skuNameList.length) {
    skuPartNameStock[selectedJoin] = skuStock[selectedJoin]
      ? skuStock[selectedJoin]
      : 0;
    return skuPartNameStock[selectedJoin];
  }

  let remainStock = 0;
  const willSelected = [];

  for (let i = 0; i  name === selected[0]
    );
    if (exist && selected.length > 0) {
      willSelected.push(selected.shift());
    } else {
      // 对应sku未选择，则遍历该规格所有sku
      for (let j = 0; j 

demo演示

利用此算法写了个 skuModal 的 vue demo，在此贴下代码，大家可以作为组件引用看看效果方便理解

使用方式

// 初始化sku
this.$refs.sku.initSku({
  skuNameList, // 格式参考上文
  skuList // 格式参考上文
});

总结

做过电商项目的应该都处理或者听说过 sku，学习相关概念和真正理解如何计算 sku 可以帮助我们更加熟悉业务，提升自己对于相关业务的处理能力。以后在面试中遇到面试官的提问也能更稳一些。第一种 sku 算法可以参考上一篇博客。

参考

• sku 组合查询算法探索

• 商品规格 SKU 组合查询算法总结

欢迎到前端学习打卡群一起学习～ 516913974

sku算法详解及Demo～接上篇

标签：iphone   ott   OLE   ems   fixed   orm   属性   include   z-index   

原文地址：https://www.cnblogs.com/formercoding/p/12995715.html