路由模块
1, router
这块只是单纯使用了的框架推荐的异步加载组件,并没有深入研究webpack的懒加载原理。
2, 在 /my
组件的设计上存在瑕疵,之前总是怀疑自己的用法错误,直到接触了React之后,才明白嵌套路由中的子路由是和父路由一起展示的。那说明用法是没有错。只是设计上有待商榷,像在做/my
和其他嵌套路由这种模块的时候,因为有时候父路由的高度会比子路由高,这就导致无法对父路由进行很好的覆盖。所以在知道父路由超过一屏的时候,应该设置一个空白页面做父路由,之前的父路由通过现在的空白页redirect来抵达。这样就避免了父子路由的高度差问题。
Tab组件
这个组件体现了自己的学习历程,之前对代码的实现上纯属想到哪写到哪,缺乏了思考,这样即使10000个小时也无济于事。
这个是之前的代码设计,把 /home
, /category
, /shopcart
, /my
耦合在一起了,既不利于维护,结构也不清晰。应该是做个枚举或者字典。
收藏商品,关注品牌,浏览记录
这三个模块因为功能逻辑类似,所以写在同一个vue文件中。每个模块都有单个删除和批量删除的功能,如果把每个模块的删除功能单独来写,就要写6个删除的方法,造成代码冗余。
后来想到之前在慕课上学的TP5课程,利用AOP思想把删除逻辑抽离出来,在删除方法中来判断是哪个模块调用的删除方法,并做相应处理。
delAll (text) {
if (text === '编辑') {
this.text = '删除'
this.del = true
} else if (text === '删除') {
this.del = false
if (!this.activeArr.length) {
this.text = '编辑'
return
}
this._del()
// 清空active列表
this.activeArr = []
this.text = '编辑'
}
},
delOne (id) {
// 因为单个删除和批量删除实现功能一致了,之前是只能单个删除,后来升级为支持批量删除,造成代码冗余
// 这里把单个删除的id添加到数组中,然后删除操作调用同一个方法即可。
// 这里本来有两种方案: 1, 删除方法做三个,然后先判断再选择不同的调用 2,就是不判断,删除操作的时候去判断
// 第2个方法比较优雅,也就是现在这种,大概就是AOP思想咯?
this.activeArr.push(id)
this._del()
}
购物车模块
这个模块和淘宝不一样的地方是,多商家多商品多地址的产品设计
1,首先是利用Vuex维护一个购物车的商品数量,当商品数量发生改变的时候,底部tab栏的购物车icon右上角的数字会发生改变。
2,因为可以勾选购物车中的商品来进行结算,所以还需要维护一个activeArr来保存选中的品牌和商品列表。
3,当删除商品的时候,需要判断activeArr中的品牌下边是否已经没有商品了,如果没有,需要删除该品牌。
4,勾选品牌的时候,需要先判断activeArr是否已经有了该品牌,如果没有就把该品牌下的所有商品加上,如果有的话,需要判断当前勾选的商品是否等于购物车中该品牌下边的所有商品,等于的话就做全空操作,不等于的话就做全对操作。
5,勾选商品的时候,需要先判断activeArr是否已经有了该品牌,如果没有的话,添加品牌和商品,如果有该品牌的话(这里增加了一层判断该品牌下是否有商品,其实不用),再判断是否选中了该商品,如果没有的话,就push进去,如果有的话,就splice掉。
6,因为需要维护一个当前选中商品的总价和商品数量,所以watch一个activeArr,每当activeArr发生改变的时候来重新计算总价和数量,并计算是否是全选。
7,订单确认页,使用vuex来维护一个address和address_type。用户身份分两种:企业用户和个人用户,收货方式有三种:普通,自提,商家代收。 另外对于收货地址也有一个限制,不同商品的配送范围是不同的。
支付模块
支持四种支付方式:支付宝,微信,银联和公司转账。
1,支付宝支付按照官方示例,因为不能直接在微信中打开,所以在项目根目录增加一个官方提供的js文件来判断如果是微信打开,就会提示用浏览器打开,从而拉起支付宝。
2,微信支付也需要判断是否在微信中打开,从而使用微信公众号支付还是H5支付。
3,银联是需要前端配置一个跳转路由,路由里把一些配置做成表单发送给相关接口
定位模块
采用的是腾讯定位, 在刚进入项目中就会获取用户当前地址
因为项目中多个地方需要定位,所以利用$emit 发射到App.vue中进行请求和维护位置信息和localStorage保存信息,从而实现保存分发位置信息。
评价模块
因为需要双向绑定多个商品的评星和评价内容。
微信分享
另外在微信分享中遇到了一个问题,即ios中分享商品详情页的时候,分享出去的却是项目首页,该问题由同事解决并输出了一篇博文。
https://segmentfault.com/a/1190000013220261