全栈之路-微信小程序-SKU开发(代码)
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组件的代码就相对来说特别简单,只是来负责将规格值显示出来(代码中没有样式代码)
// index.wxml代码
<!--规格值组件-->
<view bind:tap="onTap" class="container">
<view class="inner-container">
<text>{{cell.title}}</text>
</view>
</view> // index.js代码 创建cell属性
properties: {
cell:Object
},
2、cell模型(cell.js)
创建Cell类,有构造方法以及id(规格值id)和title(规格值名称)两个属性
class Cell{
id // 规格值的主键id
title // 规格值的名字 constructor(spec){
this.title = spec.value
this.id = spec.value_id
}
} export {
Cell
}
3、fence组件
fence组件需要引入cell组件,需要用fence属性来传递数据
// index.wxml
<view class="container">
<!--规格名-->
<view class="title">{{fence.title}}</view>
<!--规格名下的所有规格值-->
<view class="row-container">
<block wx:for="{{fence.cells}}" wx:key="{{index}}">
<!--规格值组件-->
<s-cell class="cell" cell="{{item}}"></s-cell>
</block>
<view class="hr"></view>
</view>
</view> // index.js
properties: {
fence: Object
}, // index.json
{
"component": true,
"usingComponents": {
"s-cell":"/components/cell/index"
}
}
4、fence模型(fence,js)
创建Fence类,有构造方法,cells属性(存放一个规格名下的一组规格值),specs属性(spu(商品)的一个确定的规格值的组合,比如:金属灰-七龙珠-小号 S),title(规格名名称)以及id(规格名id)以及初始化cell的方法
import {Cell} from "./cell"; class Fence { cells = []
specs
title // 规格名的名字
id // 规格名的主键id constructor(specs) {
this.specs = specs
this.title = specs[0].key
this.id = specs[0].key_id
} init() {
this._initCells()
} _initCells(){
this.specs.forEach(s=>{
// 去重判断
const existed = this.cells.some(c=>{
return c.id === s.value_id
})
if(existed){
return
}
const cell = new Cell(s)
this.cells.push(cell)
})
}
} export {
Fence
}
补充说明数组(Array)中的some方法:
链接地址详解:https://www.runoob.com/jsref/jsref-some.html
some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:
- 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素,则返回false。
注意: some() 不会对空数组进行检测。
注意: some() 不会改变原始数组。
5、realm组件(对应着fence-group.js)
realm组件需要引用fence组件,需要通过spu属性来传递数据,并且需要监听spu
// index.wxml代码
<view class="container">
<view>
<image></image>
</view>
<block wx:for="{{fences}}" wx:key="{{index}}">
<s-fence fence="{{item}}"></s-fence>
</block>
<view class="counter-container">
<!--<l-counter></l-counter>-->
</view>
</view> // index.js代码
properties: {
spu: Object
}, data: {
judger:Object
}, observers: {
'spu': function (spu) {
if (!spu) {
return
}
const fenceGroup = new FenceGroup(spu)
fenceGroup.initFences()
// judge在这里并没有用到
// const judger = new Judger(fenceGroup)
// this.data.judger = judger
this.bindInitData(fenceGroup)
}
},
methods: {
bindInitData(fenceGroup) {
this.setData({
fences:fenceGroup.fences
})
},
} // index.json
{
"component": true,
"usingComponents": {
"s-fence":"/components/fence/index"
}
}
补充说明一下,小程序中的observer监听函数的详解:
组件数据字段监听器,用于监听 properties 和 data 的变化,参见 数据监听器
数据监听器链接地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/observer.html
6、fence-group模型(fence-group.js)
创建FenceGroup类,创建spu属性、skuList属性以及fences属性,还有初始化的fence方法(这里用到了矩阵中的转置方法,具体就不记录了)
import {Matrix} from "./matrix";
import {Fence} from "./fence"; class FenceGroup {
spu
skuList = []
fences constructor(spu) {
this.spu = spu
this.skuList = spu.sku_list
} initFences() {
const matrix = this._createMatrix(this.skuList)
const fences = []
// 进行矩阵的转置操作
const AT = matrix.transpose()
AT.forEach(r => {
const fence = new Fence(r)
fence.init()
fences.push(fence)
})
this.fences = fences
} _createMatrix(skuList) {
const m = []
skuList.forEach(sku => {
m.push(sku.specs)
})
return new Matrix(m)
} } export {
FenceGroup
}
说明:矩阵的思想其实在这里简化了实现思路,可以看一下具体的矩阵是如何进行装置操作的,可看一下百度百科中的说明:
链接地址:https://baike.baidu.com/item/转置矩阵
三、重要总结
数据的流向问题在啰嗦一下:
一切都是从商品的详情页面进行发起的,当用户点击商品的时候,跳转到详情页面,用户点击加入购物车的功能,商品的规格信息进行显示,初始化商品的规格信息,这里触发了realm组件的监听spu的方法,从而引发多米诺骨效应,从FenceGroup模型的创建,到Fence模型的创建,再到Cell模型的创建,当数据最终创建之后,在通过组件一步一步的渲染。最终呈现在用户的面前就是可选的一组规格(当然这个功能完善之后,用户看到的是一组选择好的规格路径,这里没实现),这就是完整的一个过程,当然仅仅只是一个规格值的处理提取的过程。
内容出处:七月老师《从Java后端到全栈》视频课程
七月老师课程链接:https://class.imooc.com/sale/javafullstack
全栈之路-微信小程序-SKU开发(代码)的更多相关文章
- 全栈之路-微信小程序-SKU开发(分析)
SKU是整个小程序中最难完成的部分了,好好记录一下SKU,主要是想记录一下 从最开始拿到这个业务到最终完成这个功能期间的思考过程,至于代码什么的,记录也好,不记录也行,再看! 一.从思路说起 1.SK ...
- 全栈之路-微信小程序-架构总览
第一阶段是用来学习小程序开发的,这个就相当于PC端的网站吧,只不过现在依靠微信强大的流量来将业务搬移到小程序中,对于企业来说,这是一种很好的发展方向,既减少了开发成本,又减少了推广成本,小程序是很被人 ...
- 微信小程序云开发-从0打造云音乐全栈小程序
第1章 首门小程序“云开发”课程,你值得学习本章主要介绍什么是小程序云开发以及学习云开发的重要性,并介绍项目的整体架构,真机演示项目功能,详细介绍整体课程安排.课程适用人群以及需要掌握的前置知识.通过 ...
- 小程序语音红包开发中 汉字转拼音的问题 微信小程序红包开发遇到的坑
公司最近在开发微信小程序的红包功能,语音红包需要用到文字转拼音的功能. 之前介绍过怎么将中文的汉字转为拼音的,具体看下面这篇文章. 微信语音红包小程序开发如何提高精准度 红包小程序语音识别精准度 微信 ...
- 微信小程序快速开发上手
微信小程序快速开发上手 介绍: 从实战开发角度,完整系统地介绍了小程序的开发环境.小程序的结构.小程序的组件与小程序的API,并提供了多个开发实例帮助读者快速掌握小程序的开发技能,并能自己动手开发出小 ...
- 《微信小程序商城开发实战》笔者的新书,欢迎各位粉丝上京东购买
作者图书京东链接,请点击------>>> **微信小程序商城开发实战** 附京东真实评价截图: 编辑推荐 在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性 ...
- vue+uni-app商城实战 | 第一篇:【有来小店】微信小程序快速开发接入Spring Cloud OAuth2认证中心完成授权登录
一. 前言 本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...
- 【推荐】开源项目minapp-重新定义微信小程序的开发
minapp 重新定义微信小程序的开发 官网:https://qiu8310.github.io/minapp/ 作者:Mora minapp 重新定义微信小程序的开发 使用 用 npm 安装命令行工 ...
- 【微信小程序】开发实战 之 「配置项」与「逻辑层」
微信小程序作为微信生态重要的一环,在实际生活.工作.商业中的应用越来越广泛.想学习微信小程序开发的朋友也越来越多,本文将在小程序框架的基础上就微信小程序项目开发所必需的基础知识及语法特点进行了详细总结 ...
随机推荐
- 单行文本截断 text-overflow
div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
- scala中的闭包简单使用
object Closure { /** * scala中的闭包 * 函数在变量不处于其有效作用域内,还能够对变量进行访问 * * @param args */ def main(args: Arra ...
- [VS2008] Debug版本程序发布后 由于应用程序的配置不正确,应用程序未能启动,重新安装应用程序可能会纠正这个问题
转自VC错误:http://www.vcerror.com/?p=59 问题描述: [VS2008] 版本程序发布后,运行程序弹出错误框: 由于应用程序的配置不正确,应用程序未能启动,重新安装应用程序 ...
- Java-Maven-pom.xml-porject-parent:parent
ylbtech-Java-Maven-pom.xml-porject-parent:parent 1.返回顶部 1.Inherit defaults from Spring Boot <!-- ...
- 在ubuntu下编写python
一般情况下,ubuntu已经安装了python,打开终端,直接输入python,即可进行python编写. 默认为python2 如果想写python3,在终端输入python3即可. 如果需要执行大 ...
- C#实现拍照并且存水印照片
由于一直在高校工作,就涉及到招生工作,招生时候又要收集学生图像采集,所以就随手写了一个图像采集工具,废话不多说,进入正题. 图像采集需要调用摄像头就行拍照操作,网上查了一下资料,需要引用以下3个dll ...
- QT 在QTabWidget中设置一些调色板
这次所做的项目中需要用到如下功能,点击tableWidget中的子项,将会弹出颜色选值对话框,实现子项的改变,如下图所示: 1.首先,将自己定制的调色板放入tableWidget中 for (int ...
- Spring - 整合MyBatis
目的: 使用 Spring 容器用单例模式管理 MyBatis 的 sqlSessionFactory : 使用 Spring 管理连接池.数据源等: 将 Dao / Mapper 动态代理对象注入到 ...
- 用在 AMD64 上 aria2_1.33.1-1_amd64.deb 的下载页面
用在 AMD64 上 aria2_1.33.1-1_amd64.deb 的下载页面 如果您正在运行 Ubuntu,请尽量使用像 aptitude 或者 synaptic 一样的软件包管理器,代替人工手 ...
- 【JZOJ3317】管道
description Hotham市再次被Jester袭击.这一次,Jester攻击的目标是Hotham的供水系统.Hotham的淡水存储在N个水库,由M个管道连接. 任意2个水库之间至少有一条路径 ...