第一章SKU核心思路
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购物车控件大致的框架草稿就打完了。
总结
在做购物车的时粗看要做的东西很多比较复杂，那么我们就把他拆分尘归尘土归土。界面的归界面逻辑的归逻辑，界面的上控件展示交给逻辑来控制这样就可以减轻我们的思维负担。
要牢记购物车是根据用户的选择实时在变化的，所以用户的每次点击都需要重新处理逻辑更新界面。
第一章SKU核心思路相关推荐
- 1. Vue从入门到精通（第一章 vue核心）
Vue从入门到精通(第一章 vue核心) 第一章 Vue核心 1. Vue简介 1.1 Vue是什么? 1.2 Vue的作者以及迭代版本 1.3 Vue的特点 2. 搭建Vue开发环境 2.1 安装V ...
- 【汇编语言学习之路】第一章 汇编语言核心方法论
版权声明:本学习笔记是本人根据小甲鱼"汇编语言学习课程"和<汇编语言>(王爽)的书籍,来记录笔记的 1 汇编语言核心方法论 1.1 学习汇编语言的必要性 汇编语言与机器 ...
- python课后题答案第一章_python核心编程课后习题解答第一章
闲着没事,决定将<python核心编程>这本书的课后习题做一遍,以增加自己的编程能力. 1-1 将python安装到系统上 本人用的ubuntu系统,系统中自带了python,无需安装,本 ...
- 【C++学习之路】第一章——C++核心方法总论
1 C++核心方法总论 1.1 核心思想 通过实际项目来学习编程,更高效掌握编程规则,以及明白各种语法规则的实际应用. 实验思想:任何C++的参考资料都不可能覆盖你遇到的所有问题,这个时候,最好的办法 ...
- 第一章 容器核心知识概述
what--什么是容器? 容器是一种轻量级,可移植,自包含的软件打包技术,使应用程式可以在几乎任何地方以相同的方式运行.开发人员在自己笔记本上创建并测试好的容器,无须任何修改就能够在生产系统的虚拟机. ...
- 《小马哥讲Spring核心编程思想》-第一章学习笔记（1）
<小马哥讲Spring核心编程思想>-第一章学习笔记(1) 一.课程介绍 1.为什么要学习spring? 2.深入学习spring的难点有哪些? 3.课程的设计思路是怎样的? 二.内容综述 ...
- 《Python核心编程》第二版第18页第一章练习 -Python核心编程答案-自己做的-
<Python核心编程>第二版第18页第一章练习 这里列出的答案不是来自官方资源,是我自己做的练习,可能有误. 1.9 练习 1-1. 安装Python.请检查Python是否已经安装到你 ...
- Windows核心编程之核心总结（第一章 错误处理）（2018.5.26）
前沿 学习Windows核心编程是步入Windows编程殿堂的必经之路,2018年寒假重温了计算机操作系统知识,前阵子又过学习Windows程序设计方面的基础,正所谓打铁要乘热,所以我又入了Windo ...
- 《谁说菜鸟不会数据分析》学习笔记 第一章总览 第二章数据分析思路
网上的信息太琐碎了,根本没搞懂什么是数据分析方法什么是数据分析方法论,所以找了一本比较简单的书来系统学习一下,本来打算粗略看完,但是觉得这本书知识还是不错的,所以决定在未来一周把这本书用心学一下. 这 ...
最新文章
- 将Centos的yum源更换为国内的阿里云源
- Radar Installation（贪心，sort）
- 银行营业网点管理系统——entity类（CityArea）
- 逻辑回归python正则化 选择参数_吴恩达机器学习笔记（三）——正则化（Regularization）...
- 如何用Pygame写游戏（十）
- Elasticsearch 数据搜索篇
- string对象的创建、截取和拼接_java基础面试题-String深入理解
- BMFont工具生成自定义字体
- 神经网络与深度学习（邱锡鹏版本）学习笔记11.23
- MQTT 测试工具介绍
- x射线直接投影成像的条件_无损检测之Ｘ射线检测实时成像技术分辨率
- 反应堆Reactor模式
- 韦小宝高超的说谎技巧
- 通关6级之词汇（2021.05.29）
- 麒麟820鸿蒙,华为最强千元机：绝版麒麟820＋首升鸿蒙2.0＋完美全屏！
- matlab符号值,matlab 符号积分和数值积分
- java实用教程第五版电子书，爱了爱了
- pandas表格-拆分Excel的单元格为多行，将多行数据汇聚到一行用分隔符号分开
- redis 键值占用内存分析 RDR（Redis Data Reveal）
- 复旦黄萱菁：顶会也喜欢“搞事情”文章，提示学习等已成为NLP领域的研究重点...