全栈之路-微信小程序-SKU开发（分析）
SKU是整个小程序中最难完成的部分了，好好记录一下SKU，主要是想记录一下 从最开始拿到这个业务到最终完成这个功能期间的思考过程，至于代码什么的，记录也好，不记录也行，再看！
一、从思路说起
1、SKU
开始之前，需要先搞懂SKU是什么东西？指代的是什么？这个具体讲的是什么，这里面主要搞清楚两个概念，一个是规格，一个是规格值。
规格：例如 手机的外壳颜色、运存等
规格值：对外壳颜色来说，具体的规格名可以是黑色、白色。墨绿色 对于运存这个规格来说，具体的规格名可以是64GB 128GB等
SKU就是根据多个规格值来确定单个的商品可以根据运存（规格名）64GB（规格值）、颜色黑色、入网类型全网通等等规格值的组合 确定iPhone11的单个商品
2、SKU开发草稿
有时候总是头疼，当拿到一个复杂的或者是自己不熟悉的业务的时候，不知道从何下手，不知道自己能不能完成，其实是很害怕自己不能完成的，因为接触自己不熟悉的领域，知道到那一刻，脑子是一片空白的，完全是被吓住了，其实每当做完的时候，回头想想，其实也挺简单的，没有什么难以写出来的代码，这里不说算法，只是针对业务开发啊，算法是想破头，也写不出来，哈哈，所以现在很重视写代码的思路问题，这次跟着七月老师来学习，想把一些开发的思路记录下来，这次SKU开发，老师提到了一个开发草稿的知识，哈哈，可以简单的打个草稿，把页面的大概的轮廓勾勒出来，然后再细化那些细节，我觉得这种方法由外到内，由浅入深，很好啊！
（1）realm组件
首先是新建的一个realm组件，先说realm这个单词的意思，领域的意思，这里也有总控制器的意思，这里控制SKU展示以及选择，但是需要调取其他的组件来协同完成这个SKU功能
在这里组件index.wxml文件中 用view标签先大体做个结构性的骨架，其伪代码是这样的：
1 <view class="container"> 2 <view> 3 <image></image> 4 </view> 5 <block wx:for="{{}}"> 6 <s-fence></s-fence> 7 </block> 8 <view class="counter-container"> 9 <l-counter></l-counter> 10 </view> 11 </view>
最上面是商品的图片以及名称等信息，中间是规格名以及规格值的选择，最后是一个数量选择器，底部会是一个加入购物车和立即购买的按钮，重点来看中间规格名与规格值那部分
（2）fence组件
抽象出这个fence组件，之所以为什么叫fence，还是先看看这个fence的意思哈，这里说一下，七月老师这个命名还是很讲究的，fence有篱笆；栅栏；围栏；（障碍赛马中的）障碍物这些意思，大概理解还是栅栏比较合适，每个规格名和规格值的组合就是一个栅栏，至于多个组合，我们只需要循环出来就好了，由于这个fence组件是主要的，所以这里提取出来了两个业务的相关的JS文件，来实现复杂业务的分离，这其实也就是模型类，来梳理写代码的思路，一个是fence.js，一个是fence-group.js文件，现在也不是很熟悉这里面的到底要写哪些代码，等以后再补充一点，先看一下fence组件的骨架代码，大概的一个轮廓
1 <view class="container"> 2 <view class="title"></view> 3 <view></view> 4 </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-商品
把接口中返回的示例数据进行提取，然后进行组合成二维数组，你会发现，大概是这个样子的（后面是单个元素的下标）：
1 金属灰[0,0] 七龙珠[0,1] 小号 S[0,2] 第一行 2 青芒色[1.0] 灌篮高手[1,1] 中号 M[1,2] 第二行 3 青芒色[2,0] 圣斗士[2,1] 大号 L[2,2] 第三行 4 橘黄色[3,0] 七龙珠[3,1] 小号 S[3,2] 第四行
将这个进行转置，转置之后大概是这个样子的：
1 金属灰[0,0] 青芒色[0,1] 青芒色[0,2] 橘黄色[0,3] 第一行 2 七龙珠[1,0] 灌篮高手[1,1] 圣斗士[1,2] 七龙珠[1,3] 第二行 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后端到全栈》视频课程
