电商SKU组件拓展

6 阅读2分钟

学前回顾:map filter forEeach的使用区别

image.png

1. 认识SKU

image.png

2. 商品sku规格遍历

image.png

image.png

3.点击规格更新选中状态

image.png 实现的代码逻辑 image.png 给选中的规格添加高亮的style: 通过selected是否为true添加selected效果 image.png

4.点击规格更新禁用状态

4.1 点击规格更新禁用状态=生成有效路径字典(1)

当:库存字段为0时,对应的sku规格会被禁用掉

image.png

4.2 点击规格更新禁用状态=生成有效路径字典(2):用于简化是否有库存

最终获取到对象的格式,目的是便于查找

4.2.1 实现步骤:

image.png

4.2.2 实现图解:

image.png

image.png image.png

4.2.3 幂集JavaScript代码

// power-set.js

/**
 * 使用位运算生成幂集(Power Set)
 * 幂集是指一个集合的所有子集(包括空集和自身)
 * 
 * @param {Array} originalSet - 原始集合
 * @returns {Array} - 包含所有子集的数组
 */
export default function bwPowerSet(originalSet) {
  const subSets = [];

  // 我们将有 2^n 种可能的组合(n 是原始集合的长度)
  // 这是因为对于原始集合的每个元素,我们都要决定是否包含它(每个元素有 2 种选择)
  const numberOfCombinations = 2 ** originalSet.length;

  // 从 0 到 2^n 范围内的每个数字的二进制表示,正好用其位(0 或 1)表示是否包含集合中的相关元素
  // 例如,对于集合 {1, 2, 3},二进制数 0b010 表示只包含 "2" 到当前子集中
  for (let combinationIndex = 0; combinationIndex < numberOfCombinations; combinationIndex++) {
    const subSet = [];

    for (let setElementIndex = 0; setElementIndex < originalSet.length; setElementIndex++) {
      // 判断是否需要将当前元素包含到子集中
      // 使用位与运算:检查 combinationIndex 的第 setElementIndex 位是否为 1
      if (combinationIndex & (1 << setElementIndex)) {
        subSet.push(originalSet[setElementIndex]);
      }
    }

    // 将当前子集添加到所有子集的列表中
    subSets.push(subSet);
  }

  return subSets;
}

4.2.4 代码实现

image.png

image.png 解释一下 代码中的if和else代码段 image.png 得到的pathMap格式为:

image.png

5 点击规格更新禁用状态-初始化规格禁用

思路:遍历每一个规格对象,使用name字段作为key去路径字典pathMap中作匹配,匹配不上则禁用

image.png 实现思路:通过增加disabled字段,若匹配上路径字段,disabled为false,匹配不上路径字段,则disabled为true image.png

image.png
代码逻辑:
image.png