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后端到全棧》視頻課程