第一章SKU核心思路

最新推荐文章于 2025-04-05 19:55:31 发布

码中码之最后一码之再来一码

最新推荐文章于 2025-04-05 19:55:31 发布

阅读量1.2k

点赞数

分类专栏： SKU购物车文章标签： javascript 小程序 java android

本文链接：https://blog.csdn.net/enen_aa/article/details/116116556

版权

SKU购物车专栏收录该内容

1 篇文章

订阅专栏

SKU购物车控件系列文章目录
第一章SKU核心思路

提示：这系列文章使用js实现，其他语言思路类似只是代码语法不同也能参考

文章目录

系列文章目录
前言
一、业务模型分析
二、数据模型分析
三、代码模型分析
总结

前言

使用js写的购物车modle模型类，可供有需要的同学参考。大致的参数所有公司都差不多，只需要修改参数名即可使用。
这是一篇迟到的文章，之前用uiautomator2.0和robotium写过购物车的测试工具，等于说是反向写过购物车代码

闲来无事就想正着已一个程序员的角度，完成一个购物车控件。想看看自己能不能在技术上有所增长，所以特地使用了自己不擅长的js语言

一、业务模型分析

1.SKU介绍：

在电商中一般分为spu和sku。spu是一组商品着一组商品中包含了几个不同的单个商品称为sku。
例如：在淘宝上买一件短袖，在购买时你需要选择衣服的颜色、印的图案、尺码。在你点击进入详情页时服务端给的数据是spu，当你选择完颜色、图案、尺码后得到了唯一确定的一个商品sku。

2.需求分析：

客户端的需求可以参考淘宝京东这样的大型电商，这样用户在使用起来逻辑清晰也符合他的使用习惯。

根据用户累计选择的选项，挑选有库存的后续可选择项提示给用户(可点击)
用户已选择的选项可以被清除，所以用户每做一次选择都需要重新计算
用户的选择是可以随机的，所以这些选择没有先后顺序
- 如：用户可以先选衣服的颜色也可以先选尺码
如果用户当前在有多个选项的情况下只选择了一个选项，那么这一行的选项都可点击。因为说不定用户就想换一个选择
- 如：当你衣服只选择了红色并且没有选择其他行的属性，那么同一行的蓝色、白色、黑色都是可选择的
每一项属性是唯一的不能重复选择。选了红色就不能选白色

二、数据模型分析

1.SKU格式

下面我们来看看服务端下发的sku是怎么样的格式，以及各自所代表的意思。

SKU一般是一串服务的下发的字符串（示例）：101#11-5$4-3$21-5

101是这个sku所对应的id
11-5可以看作为颜色对应的11，5对应的黑色
同理4-3可以看作对应爱心图案，21-5是L码
id和属性之间用#隔开，各个属性之间用$隔开

2.服务端数据

客户端的购物车肯定是按照服务的给的数据进行设计。而服务端的做法是将一组sku就是spu全部发下来。每一个sku里面还会带有拆分了的单个属性和他们的中文名称，让客户的可以显示。

一般服务端不会下发单个控件所对应的code码，只会下发一个sku的集合。

所以我们想要为这些控件添加文字或者图片时，需要对服务的都数据做出处理。既然给我们的是一组sku，控件上显示的是单个的code。恰好sku就是由一个个code码组合而成的，所以我们只需要遍历这一组sku然后将每个sku拆分得到单个的code码，再把这些得到的code去重就可以得到界面上需要显示的数据啦(一组sku中难免会有多个选择是重合的，比如红色的短袖可以选择L码的而白色的短袖也可选择L码的大小)。

那么问题来了有什么简单的方法去处理并得到一组符合分类规定的数据呢？

有！用矩阵转置。这里把之前的那张图片顺时针旋转90度，可以发现假如服务端给我们的一行数据是尺码和颜色。而界面上显示的数据是一行尺码一行颜色，那就可以发现服务端给的数据和界面要显示的数据只差了90度！

那么接下去只需要使用矩阵转置的算法进行处理就可以得到我们想要的数据啦。

虽然sku的思路大致相同，但各家公司的数据还是会有细节上的差别，所以各位在使用时需要注意。先把sku根据格式拆分成一个个的code码，再通过矩阵得到分组之后的数据。我这里就不贴代码了，因为我的数据不适合你们使用。各位可以百度矩阵算法然后处理你们的数据。

当然也可以用自己的方法，只要能把下发的数据分类处理得到自己想要的就行。

三、代码模型分析

在数据处理完成之后，现在我们就可以来看看实现购物车这个功能需要在代码层面做那些东西。

首先界面上的模型。购物车一般是由最上层的图片和价格，中间层的可供用户选择的核心板块，以及最下面的数量这三个部分组成的。

单讲核心板块：

我们在把sku拆分之后得到单个的code码，这个code码所对应的控件在这里把它称为cell。
- 它是购物车中最小的节点，也是用户唯一可点击的控件
- 前面举例体恤的颜色，红色黑色蓝色就是一个个的cell
同一种属性的一个个的cell组成了一组这里称为group
- 颜色，图案，尺码就是三个group
颜色，图案，尺码这三个group组成了groups就形成了购物车的核心板块

现在项目开发都是提倡界面和业务模型分离，所以在逻辑处理上还需要一个模型这里称它为judger。这样界面上只需要提供给我们一个groups(groups里面必然包含了全部的cell)，并告诉我们用户点击哪个控件就可以啦。剩下的事情交给我们的逻辑模型来处理。

这个逻辑模型而言里面的代码有不少我会放到下一篇去讲，这样我们sku购物车控件大致的框架草稿就打完了。