全栈之路-微信小程序-SKU开发（分析）

　　SKU是整个小程序中最难完成的部分了，好好记录一下SKU，主要是想记录一下 从最开始拿到这个业务到最终完成这个功能期间的思考过程，至于代码什么的，记录也好，不记录也行，再看！

一、从思路说起

1、SKU

开始之前，需要先搞懂SKU是什么东西？指代的是什么？这个具体讲的是什么，这里面主要搞清楚两个概念，一个是规格，一个是规格值。

规格：例如 手机的外壳颜色、运存等

规格值：对外壳颜色来说，具体的规格名可以是黑色、白色。墨绿色 对于运存这个规格来说，具体的规格名可以是64GB 128GB等

SKU就是根据多个规格值来确定单个的商品可以根据运存（规格名）64GB（规格值）、颜色黑色、入网类型全网通等等规格值的组合 确定iPhone11的单个商品

2、SKU开发草稿

有时候总是头疼，当拿到一个复杂的或者是自己不熟悉的业务的时候，不知道从何下手，不知道自己能不能完成，其实是很害怕自己不能完成的，因为接触自己不熟悉的领域，知道到那一刻，脑子是一片空白的，完全是被吓住了，其实每当做完的时候，回头想想，其实也挺简单的，没有什么难以写出来的代码，这里不说算法，只是针对业务开发啊，算法是想破头，也写不出来，哈哈，所以现在很重视写代码的思路问题，这次跟着七月老师来学习，想把一些开发的思路记录下来，这次SKU开发，老师提到了一个开发草稿的知识，哈哈，可以简单的打个草稿，把页面的大概的轮廓勾勒出来，然后再细化那些细节，我觉得这种方法由外到内，由浅入深，很好啊！

（1）realm组件

首先是新建的一个realm组件，先说realm这个单词的意思，领域的意思，这里也有总控制器的意思，这里控制SKU展示以及选择，但是需要调取其他的组件来协同完成这个SKU功能

在这里组件index.wxml文件中 用view标签先大体做个结构性的骨架，其伪代码是这样的：

 <view class="container">
     <view>
         <image></image>
     </view>
     <block wx:for="{{}}">
         <s-fence></s-fence>
     </block>
     <view class="counter-container">
         <l-counter></l-counter>
     </view>
 </view>

最上面是商品的图片以及名称等信息，中间是规格名以及规格值的选择，最后是一个数量选择器，底部会是一个加入购物车和立即购买的按钮，重点来看中间规格名与规格值那部分

（2）fence组件

抽象出这个fence组件，之所以为什么叫fence，还是先看看这个fence的意思哈，这里说一下，七月老师这个命名还是很讲究的，fence有篱笆；栅栏；围栏；（障碍赛马中的）障碍物这些意思，大概理解还是栅栏比较合适，每个规格名和规格值的组合就是一个栅栏，至于多个组合，我们只需要循环出来就好了，由于这个fence组件是主要的，所以这里提取出来了两个业务的相关的JS文件，来实现复杂业务的分离，这其实也就是模型类，来梳理写代码的思路，一个是fence.js，一个是fence-group.js文件，现在也不是很熟悉这里面的到底要写哪些代码，等以后再补充一点，先看一下fence组件的骨架代码，大概的一个轮廓

 <view class="container">
     <view class="title"></view>
     <view></view>
 </view>

上面是规格名称 下面是规格值的列表，是横向排列的

（3）数据的流向问题

至于数据的流向问题，这里简单的介绍一下，数据是怎么传递的：

商品入口获取到商品的id --> 根据商品ID从服务器获取spu详情数据 --> 在detail页面中进行绑定 --> 通过realm组件属性进行数据的传递

以下4和5是 2019年12月9日10:44:57 补充...

（4）cell组件 

这个是随着开发的进行，后来重新创建的组件，这个组件就细化到最小的处理单位了，细化到一个规格值，例如金属灰、七龙珠这种用户点击的规格值了

（5）models处理类

与每个组件相对应的会抽象出一个逻辑处理类，主要就是完成逻辑代码的编写：

fence-group.js 所有规格名的类

fence.js 单一规格名下的所有规格值的类

cell.js 最小单元规格值的类

judger.js 总控制类

matrix.js 矩阵处理类

sku-code.js sku匹配路径的数据字典

3、SKU开发难点分析

（1）规格值的提取

规格值的提取这里用到了数学中的矩阵的思想来解决，用到的是二维数组来进行的矩阵转置，其实转置思想在这里就是将二维数组中单个元素的行列进行颠倒

矩阵转置：https://baike.baidu.com/item/矩阵转置/4150715

重点分析：

知道了矩阵转置，看一下接口返回的数据的结构，这里主要看的是规格值，也就是sku_list下面的specs

接口的详细介绍地址：https://course.7yue.pro/lin/sleeve/3%20API：Banner.html#spu-商品

把接口中返回的示例数据进行提取，然后进行组合成二维数组，你会发现，大概是这个样子的（后面是单个元素的下标）：

 金属灰[0,0] 七龙珠[0,1] 小号 S[0,2]  第一行
 青芒色[1.0] 灌篮高手[1,1] 中号 M[1,2]  第二行
 青芒色[2,0] 圣斗士[2,1] 大号 L[2,2]  第三行
 橘黄色[3,0] 七龙珠[3,1] 小号 S[3,2]  第四行

将这个进行转置，转置之后大概是这个样子的：

 金属灰[0,0] 青芒色[0,1]   青芒色[0,2] 橘黄色[0,3]     第一行
 七龙珠[1,0] 灌篮高手[1,1] 圣斗士[1,2] 七龙珠[1,3]     第二行
 小号 S[2,0] 中号 M[2,1]   大号 L[3,2] 小号 S[3,3]     第三行

这个后续还有去重复的工作：

2019年12月5日10:45:34补充，未完待续...

（2）规格值状态的确定

这个其实是将规格值进行组合，来确定最终的一个SKU，规格值的状态是分为三种的：可选、选中（可反选的）、不可选（禁用）

这里面有一句话可以概括这个计算过程：用户每选择一次都是需要重新计算所有规格值的状态

突破点：

待确认的SKU路径
已确认的SKU路径

已存在的SKU路径需要存取的 然后从这个字典中进行匹配，这里面包含完整的SKU路径和部分的SKU路径

举例说明：

4条完整的SKU路径：
　　金属灰 七龙珠 小号 S
　　青芒色 灌篮高手 中号 M
　　青芒色 圣斗士 大号 L
　　橘黄色 七龙珠 小号 S

部分路径：
　　金属灰
　　七龙珠
　　小号 S
　　金属灰 七龙珠
　　金属灰 小号 S
　　七龙珠 小号 S
　　。。。
　　。。。

所有的路径共计28种

2019年12月9日11:01:59补充，未完待续...

用户Sku状态的选择：

当用户进行Sku规格值的选择的时候，如何进行其他Sku状态的确定的时候，这里是存在规律的，至于规律是如何找出来的，肯定是不断思考，完善，总结出来的，这里面的规律是：

　　已选中的Cell，不需要判断潜在路径

　　对于某个Cell，它的潜在路径应该是，它自己加上其他行的已选Cell

　　对于某个Cell，不需要考虑当前行的其他Cell是否已选

2019年12月12日10:08:03补充，未完待续...

内容出处：七月老师《从Java后端到全栈》视频课程

七月老师课程链接：https://class.imooc.com/sale/javafullstack