一、SPU简介

SPU = Standard Product Unit （标准产品单位）

这样讲可能还是很难理解到底什么是标准产品单位。那么如果以苹果手机为例来说，iPhone 11是一个SPU还是SKU呢？

答案是 SPU 到底什么是SPU呢？我的理解是：SPU是一个标准化的，能相对的包含某些商品显著特征的商品的集合。例如：SPU = 品牌 + 型号 “苹果”+“iPhone 11” 即组成了一个SPU，这里可以称之为“商品”。需要注意的是上面提到的SPU=品牌+型号这个也是相对的意义上的，受场景的和需求的制约。

二、SKU简介

stock keeping unit(库存量单位)

这个的理解，可以在上面的等式上进一步理解为：SKU = SPU + 规格。这里的规格是个统称。比如手机来说，内存，屏幕大小，颜色等是规格；如衣服，颜色，图案，尺码。

三、SPU&SKU在项目当中的体现

3.1、后台返回数据结构分析

下图中sku_list中的specs数组中的是当前spu有的规格项

"spu_detail": {"id":2,"title":"林间有风自营针织衫","subtitle":"秋日冬款，浪漫满屋","category_id":12,"root_category_id":2,"price":"77.00","img":"http://i1.sleeve.7yue.pro/assets/ecf8d824-19d4-4db2-a5da-872ab014fecd.png","for_theme_img":"https://gitee.com/lrelia7/sleeve-static/raw/master/theme/spu1.png","description":null,"discount_price":"62.00","tags":"秋日冬款$浪漫满屋","is_test":true,"online":true,"sku_list":[{"id":2,"price":77.76,"discount_price":null,"online":true,"img":"http://i1.sleeve.7yue.pro/assets/2d22ffec-b1c1-43e0-ad21-25aa5c26ab34.png","title":"金属灰·七龙珠","spu_id":2,"category_id":17,"root_category_id":3,"specs":[{"key_id":1,"key":"颜色","value_id":45,"value":"金属灰"},{"key_id":3,"key":"图案","value_id":9,"value":"七龙珠"},{"key_id":4,"key":"尺码","value_id":14,"value":"小号 S"}],"code":"2$1-45#3-9#4-14","stock":5},{"id":3,"price":66,"discount_price":59,"online":true,"img":"http://i1.sleeve.7yue.pro/assets/c6b52c90-5b10-4823-baef-6c37d3d3532f.png","title":"青芒色·灌篮高手","spu_id":2,"category_id":17,"root_category_id":3,"specs":[{"key_id":1,"key":"颜色","value_id":42,"value":"青芒色"},{"key_id":3,"key":"图案","value_id":10,"value":"灌篮高手"},{"key_id":4,"key":"尺码","value_id":15,"value":"中号 M"}],"code":"2$1-42#3-10#4-15","stock":999},{"id":4,"price":88,"discount_price":null,"online":true,"img":"http://i1.sleeve.7yue.pro/assets/c6b52c90-5b10-4823-baef-6c37d3d3532f.png","title":"青芒色·圣斗士","spu_id":2,"category_id":17,"root_category_id":3,"specs":[{"key_id":1,"key":"颜色","value_id":42,"value":"青芒色"},{"key_id":3,"key":"图案","value_id":11,"value":"圣斗士"},{"key_id":4,"key":"尺码","value_id":16,"value":"大号  L"}],"code":"2$1-42#3-11#4-16","stock":8},{"id":5,"price":77,"discount_price":59,"online":true,"img":"http://i1.sleeve.7yue.pro/assets/09f32ac8-1af4-4424-b221-44b10bd0986e.png","title":"橘黄色·七龙珠","spu_id":2,"category_id":17,"root_category_id":3,"specs":[{"key_id":1,"key":"颜色","value_id":44,"value":"橘黄色"},{"key_id":3,"key":"图案","value_id":9,"value":"七龙珠"},{"key_id":4,"key":"尺码","value_id":14,"value":"小号 S"}],"code":"2$1-44#3-9#4-14","stock":7}],"spu_img_list":[{"id":165,"img":"http://i1.sleeve.7yue.pro/assets/5605cd6c-f869-46db-afe6-755b61a0122a.png","spu_id":2},{"id":166,"img":"http://i1.sleeve.7yue.pro/assets/ecf8d824-19d4-4db2-a5da-872ab014fecd.png","spu_id":2},{"id":167,"img":"http://i1.sleeve.7yue.pro/assets/8451cebd-5a8d-4758-bb2a-652e026a7c00.png","spu_id":2}],"spu_detail_img_list":[{"id":24,"img":"http://i2.sleeve.7yue.pro/n4.png","spu_id":2,"index":1},{"id":27,"img":"http://i2.sleeve.7yue.pro/n7.png","spu_id":2,"index":2},{"id":25,"img":"http://i2.sleeve.7yue.pro/n5.png","spu_id":2,"index":3},{"id":26,"img":"http://i2.sleeve.7yue.pro/n6.png","spu_id":2,"index":4}],"sketch_spec_id":1,"default_sku_id":2
}

将上述的规格提取如下，有四个不同的规格的单品。

SKU名	颜色	图案	尺码
sku1	金属灰	七龙珠	小号 S
sku2	青芒色	灌篮高手	中号 M
sku3	青芒色	圣斗士	大号 L
sku4	橘黄色	七龙珠	小号 S

这里可能会奇怪的点在于，返回的数据格式中并没有返回这个SPU有哪些规格，而是直接返回了有库存的单品的明细。这就意味着需要我们自己去过滤出可以选择的单品的规格。

3.2、如何将单品数据，抽取成商品规格数据

如上图所示，我们需要的规格数据是横向排布的。即需要把下图中红色框纵向的规格值，横向排布。

应用到代码中即是使用二维数组的形式：[ [ ] , [ ] , [ ] ]

四、矩阵

4.1、矩阵的定义

4.2、矩阵转置

五、代码实现

4.1、遍历的方式

首先将一个sku的规格数组循环出来，放到数组m中。将数组丢给Matrix对象处理

  _createMatrix(skuList) {const m = []skuList.forEach(sku => {m.push(sku.specs)})return new Matrix(m)}

将m数组丢给matrix类之后，通过内部rowNum()，colNum()方法

Matrix

class Matrix {mconstructor(matrix) {this.m = matrix}// m = [[1,2,3],[4,5,6],[7,8,9]]//  显示如下矩阵// 1,2,3// 4,5,6// 7,8,9/*** 获取行数* @returns {*}*/get rowNum() {return this.m.length}/*** 获取列数* @returns {*}*/get colNum() {return this.m[0].length}each(cb) {for (let j = 0; j < this.colNum; j++) {for (let i = 0; i < this.rowNum; i++) {const element = this.m[i][j]cb(element, i, j)}}}transpose() {const desArr = []for (let j = 0; j<this.colNum; j++) {desArr[j] = []for (let i = 0; i < this.rowNum; i++) {// 矩阵转置就是需要把x,y对调desArr[j][i] = this.m[i][j]}}return desArr}}export {Matrix
}

上图代码中的each方法就在循环遍历m数组，将数组中的元素提取出来，然后调用cb方法返回

 /*** 遍历方式-转置矩阵*/initFence1() {const matrix = this._createMatrix(this.skuList)const fences = []let currentJ = -1matrix.each((element, i, j) => {if (currentJ !== j) {//  列号不同，创建一个新的fencecurrentJ = jfences[currentJ] = this._createFence(element)}//  列号相同则将当前element的信息设置到当前的fence中fences[currentJ].pushValueTitle(element.value)})}_createFence(element) {const fence = new Fence()return fence}

上图代码中需要注意的是，i代表行号，j代表列号，数组在循环取出的过程中，如何判断数组当前列已循环完毕，是由j的值来判断的，如果j的值变化，则说明，当前元素为新的一列的第一个元素了。那么就要新建一个fence来存储这一列的元素。

4.2、矩阵转置的方式

矩阵转置的归结就是把x，y对调。上面Matrix类中的transpose方法中就是把传入的specs数组按照二维数组下标，x轴，y轴转换。这里需要注意的是，transpose方法中的for循环外层必须是y，内层是x。这是因为一列为一个规格。而不是一行为一个规格。

  /*** 矩阵转置-转置矩阵*/initFence() {const matrix = this._createMatrix(this.skuList)const fences = []const AT = matrix.transpose()AT.forEach(specs => {const fence = new Fence(specs)fence.init()fences.push(fence)})}

小程序开发总结-SPUSKU相关推荐

小程序开发需要注意什么
小程序对于现在的生活来说已经是一个特别热门的应用了,没有人不知道小程序的存在,小程序有很多的优势,使用特别方便并且不占内存,所以受很多人的喜欢,那么小程序开发需要注意些什么呢?今天方维网络就给大家分享 ...
微信小程序开发的完整流程介绍，新手必读
自从跳一跳小程序游戏出现后,一夜之间,小程序就变得家喻户晓了,功能开发也越来越丰富,在微信搜一搜就会发现许多大品牌早已有自己的小程序了,越来越多的企业和商家都看中了这个风口,想快速开发出一款属于自己的 ...
01 小程序开发入门
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.什么是小程序小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可 ...
微信小程序开发（2）_data属性
假设我们的环境都做好了,现在我们开始开发自己的小程序首先我们开发出自己的 Hello World 我们要做的事情是当前点击hello World的时候HelloWorld的颜色发生变化: 这个是我们 ...
微信小程序开发之选项卡
选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...
微信小程序开发优秀教程及文章合集第一期
2019独角兽企业重金招聘Python工程师标准>>> 我会不定期的选取一些优质教程,整理成辑,以便大家集中阅读: 新手向!微信小程序开发手记系列: 微信小程序开发手记<一&g ...
经验总结--我的小程序开发和进化之路
前言从接触小程序开始,到现在大大小小做了差不多有五六个小程序项目了,小项目的只有几个页面,大的项目有几十个页面.此篇文章是对之前项目的一个总结,项目的脚手架,开发框架和后期的优化是一个逐渐进化完善的 ...
新闻资讯小程序开发实践
新闻资讯小程序开发实践在腾讯小程序上线一周年之际,公司又决定把App产品部分内容在小程序上实现.就在小程序刚上线的时候,公司也有一款产品进行了小程序的研发,但后续没有持续的维护.这过了一年的时间,微 ...
amos看拟合度在哪里看_小程序开发公司哪里强？看这几点
如今小程序开发已不罕见,越来越多的线下商家需要布局线上渠道,小程序是一个非常好的选择.但是,对于不懂任何技术.也没有自身技术团队的小白而言,若想拥有自己的小程序,就需要找靠谱的微信小程序开发公司,但是 ...

小程序开发总结-SPUSKU

SPU&SKU