前端sku的实现：路径的判断以及代码的实现

关于前端sku的实现：路径的判断

前提

网上有很多关于spu、sku的介绍
这里简单介绍一下spu与sku

SPU = Standard Product Unit （标准产品单位）SPU是商品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的特性。

SKU=stock keeping unit(库存量单位) 物理上不可分割的最小单位。

举个简单的例子就是
iPhone 11 是一个 SPU，

iphone 11 绿色 128GB 或者
iPhone 11 黑色 64GB 就是一个SKU（它们具有完整的规格属性）

如何理解sku路径？

sku路径的判断，总结来说是一句话：当前所要判断的元素，加上已选择的元素的总路径
比如

要判断金属灰，是否存在，则是金属灰的路径加上灌篮高手的路径是否存在，即 金属灰——灌篮高手，判断该路径是否包含在已有的路径。
同理

判断小号S 是否存在，则是判断 青芒色——灌篮高手——小号S 是否在已在路径中，进行样式的修改、可以为‘待选’状态，也可以为“静止”状态，
图中虚线为静止状态

这里的已有路径，是一开始后段所传来总的sku,进行整合而来的一个数组。实现的方法比较多，比如遍历、矩阵的转置等。

思路的实现

1、遍历每一个元素，把每一个元素的数据和行号扔进去判断（进行2 & 3操作）

2、新建一个空路径

3、遍历每一行（进行步骤 4 & 5｜6 操作）

4、获得每一行的数据

5、（判断一）如果元素所在行符合遍历的那一行，YES：进行（判断一、1：）该元素是否是已选中的，YES：返回空路径。NO：合并路径

6、（判断一：NO）判断当前行是否存在数据（步骤3所记录的那个数据），有的话记录路径

简单来说，遍历每一个元素，拿该元素和已选择的元素进行路径合并，判断是否存在该路径（注：不能拿两个未选择加一个已选择进行路径的记录）

代码实现

这里的代码实现可以更好理解（注：这里的空路径的目的可以理解为选中状态，不进行“待选”与“禁用”的切换）

 judge(cell, x, y) {
   this._changeCurrentCellStatus(cell, x, y)
   // 这里传入每一个sku的具体规格（比如青芒色）以及所在行
   this.fenceGroup.eachCell((cell,x)=>{
     const path = this._findPotentialPath(cell, x)
     if(!path){
       return
     }
     // 获得是否存在该路径
     const isIn = this._isInDict(path)
     // 存在的话，置为可选，否则置为不可选
     if(isIn){
       this.fenceGroup.fences[x].cells[y].status = CellStatus.WAITING
     } else {
       this.fenceGroup.fences[x].cells[y].status = CellStatus.FORBIDDEN
     }
   })
 }
// 判断原sku是否存在该路径
 _isInDict(path) {
   return this.pathDict.includes(path)
 }

// 核心,返回每一条路径
_findPotentialPath(cell, x){
   // 这里的joiner是个工具类，用来连接字符串，‘#’不用在意
   const joiner = new Joiner('#')
   // 遍历每一行
   for(let i = 0; i < this.fenceGroup.fences.length; i++){
     // 获得当前行的数据
     const selected = this.skuPending.findSelectedCellByX(i)
     // 判断当前元素的行是否是目标所在一行
     if (x === i) {
       // 判断该元素是否是该行已选元素，如果是，则返回空路径
       if(this.skuPending.isSelected(cell,x)){
         return
       }
       // 如果不是，则合并路径
       const cellCode = this._getCellCode(cell.spec)
       joiner.join(cellCode)
     } else {
       // 如果当前行不是目标所在一行，进行当前行数据的判断，如果存在数据，合并路径
       if(selected) {
         const selectedCellCode = this._getCellCode(selected.spec)
         joiner.join(selectedCellCode)
       }
     }
   }
   return joiner.getStr()
 }

参考来源：
7七月：http://www.imooc.com/t/4294850