SKU开发是小程序中最难的一部分,思路在分析中已经记录过了,这里主要看一下代码的实现,感觉老师写的代码太棒了,很优雅!主要想记录一下写代码的思路,对面向对象编程的实践。
一、代码结构的分析
1、说明几个关键词
搞清楚sku的概念,搞清楚我们抽象出来的realm组件、fence组件、cell组件以及他们对应的模型类,这里模型类放到models文件夹中
realm组件 --- fence-group.js中的FenceGroup模型
fence组件 --- fence.js中的Fence模型
cell组件 --- cell.js中Cell模型
除此之外,还有
矩阵的处理模型:matrix.js中的Matrix模型
总控制模型(负责方法的调用):judger.js中的Judger模型
sku-code处理模型:sku-code.js中的SkuCode模型
2019年12月10日11:04:41截止,可能后续还会有处理sku规格值的状态的模型,后续再补充...
2、分析他们之间的联系(做的图示)
说明:
图中所示的箭头的流向是从用户的角度来看,当点击规格值进行选择时,数据的流向
感想总结:这个结构这样抽象出来,感觉太清晰了,彼此之前是独立的,可扩展的,但是彼此之间是有联系的,各司其职,哇,感觉这样写出来的代码太美好了,原来写代码可以这么舒服,好的代码,好的架构真的让人耳目一新,回味无穷啊!今后奋斗的方向,写出好的代码,优雅而强大!
二、代码的编写
这也不是完整的SKU代码,只是一部分的代码,只是用来记录一下整个SKU开发的代码的结构,看一下简单的代码(从realm组件到cell组件),实现SKU规格值的提取(SKU状态的确定代码就不记录了,太复杂了,不过之后可能记录一下其中编码思路),顺序是按照图示的顺序(开发的过程,并不是严格按照这个顺序进行编码的,开发是按照从fence-group出发,细化,抽象出fence,再进一步细化,抽象出cell)
1、cell组件
这里不考虑SKU规格值的状态的确定,所以cell组件的代码就相对来说特别简单,只是来负责将规格值显示出来(代码中没有样式代码)
1 //index.wxml代码
2
3
4
5 {{cell.title}}
6
7
8
9 //index.js代码 创建cell属性
10 properties: {11 cell:Object12 },
2、cell模型(cell.js)
创建Cell类,有构造方法以及id(规格值id)和title(规格值名称)两个属性
1 class Cell{2 id //规格值的主键id
3 title //规格值的名字
4
5 constructor(spec){6 this.title =spec.value7 this.id =spec.value_id8 }9 }10
11 export {12 Cell13 }
3、fence组件
fence组件需要引入cell组件,需要用fence属性来传递数据
1 //index.wxml
2
3
4 {{fence.title}}
5
6
7
8
9
10
11
12
13
14
15 //index.js
16 properties: {17 fence: Object18 },19
20 //index.json
21 {22 "component": true,23 "usingComponents": {24 "s-cell":"/components/cell/index"
25 }26 }
4、fence模型(fence,js)
创建Fence类,有构造方法,cells属性(存放一个规格名下的一组规格值),specs属性(spu(商品)的一个确定的规格值的组合,比如:金属灰-七龙珠-小号 S),title(规格名名称)以及id(规格名id)以及初始化cell的方法
1 import {Cell} from "./cell";2
3 class Fence {4
5 cells =[]6 specs7 title //规格名的名字
8 id //规格名的主键id
9
10 constructor(specs) {11 this.specs =specs12 this.title = specs[0].key13 this.id = specs[0].key_id14 }15
16 init() {17 this._initCells()18 }19
20 _initCells(){21 this.specs.forEach(s=>{22 //去重判断
23 const existed = this.cells.some(c=>{24 return c.id ===s.value_id25 })26 if(existed){27 return
28 }29 const cell = newCell(s)30 this.cells.push(cell)31 })32 }33 }34
35 export {36 Fence37 }
补充说明数组(Array)中的some方法:
some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:
如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素,则返回false。
注意: some() 不会对空数组进行检测。
注意: some() 不会改变原始数组。
5、realm组件(对应着fence-group.js)
realm组件需要引用fence组件,需要通过spu属性来传递数据,并且需要监听spu
1 //index.wxml代码
2
3
4
5
6
7
8
9
10
11
12
13
14 //index.js代码
15 properties: {16 spu: Object17 },18
19 data: {20 judger:Object21 },22
23 observers: {24 'spu': function(spu) {25 if (!spu) {26 return
27 }28 const fenceGroup = newFenceGroup(spu)29 fenceGroup.initFences()30 //judge在这里并没有用到
31 //const judger = new Judger(fenceGroup)
32 //this.data.judger = judger
33 this.bindInitData(fenceGroup)34 }35 },36 methods: {37 bindInitData(fenceGroup) {38 this.setData({39 fences:fenceGroup.fences40 })41 },42 }43
44 //index.json
45 {46 "component": true,47 "usingComponents": {48 "s-fence":"/components/fence/index"
49 }50 }
补充说明一下,小程序中的observer监听函数的详解:
组件数据字段监听器,用于监听 properties 和 data 的变化,参见 数据监听器
6、fence-group模型(fence-group.js)
创建FenceGroup类,创建spu属性、skuList属性以及fences属性,还有初始化的fence方法(这里用到了矩阵中的转置方法,具体就不记录了)
1 import {Matrix} from "./matrix";2 import {Fence} from "./fence";3
4 class FenceGroup {5 spu6 skuList =[]7 fences8
9 constructor(spu) {10 this.spu =spu11 this.skuList =spu.sku_list12 }13
14 initFences() {15 const matrix = this._createMatrix(this.skuList)16 const fences =[]17 //进行矩阵的转置操作
18 const AT =matrix.transpose()19 AT.forEach(r =>{20 const fence = newFence(r)21 fence.init()22 fences.push(fence)23 })24 this.fences =fences25 }26
27 _createMatrix(skuList) {28 const m =[]29 skuList.forEach(sku =>{30 m.push(sku.specs)31 })32 return newMatrix(m)33 }34
35 }36
37 export {38 FenceGroup39 }
说明:矩阵的思想其实在这里简化了实现思路,可以看一下具体的矩阵是如何进行装置操作的,可看一下百度百科中的说明:
三、重要总结
数据的流向问题在啰嗦一下:
一切都是从商品的详情页面进行发起的,当用户点击商品的时候,跳转到详情页面,用户点击加入购物车的功能,商品的规格信息进行显示,初始化商品的规格信息,这里触发了realm组件的监听spu的方法,从而引发多米诺骨效应,从FenceGroup模型的创建,到Fence模型的创建,再到Cell模型的创建,当数据最终创建之后,在通过组件一步一步的渲染。最终呈现在用户的面前就是可选的一组规格(当然这个功能完善之后,用户看到的是一组选择好的规格路径,这里没实现),这就是完整的一个过程,当然仅仅只是一个规格值的处理提取的过程。
内容出处:七月老师《从Java后端到全栈》视频课程