javaScript商城实现购物车思路
流程
(1):⽤户⼀个⼀个商品的勾选,当摸个店铺下的商品选满则要将该店铺选中,否则不选中该店铺。在所有店铺选满以后,标记选中全选按钮,否则不选中全选按钮。
网页购物车代码(2):⽤户⼀个店铺⼀个店铺的勾选,这时要选中标记选中店铺下的所有商品,反之不选中。在所有店铺选满以后,标记选中全选按钮,否则不选中全选按钮。
(3):直接勾选全选按钮,这时要选中所有商品和店铺,反之则不选中。
(4):对以上3中情况做任意组合。
注意点:因为在每次⽤户点击以后都需要重新计算购物车中的结算价格,此刻则要去和服务端进⾏交互。
核⼼思路:采⽤级联调⽤,或者说是简单的通知机制
例如:正对体验流程(1)这种情况,可以在勾选商品项的时候做判断,如果该商品项所属的店铺下全部的
商品都被勾选了,此刻通知或者说是调⽤勾选店铺按钮的⽅法(注:这边强调的是调⽤⽅法,⽽不是单纯的改变店铺按钮的样式)。
对于其他情况,以此类推。
代码思路:
(1) 简单抽象出 ⽤户⾏为对象(UserAction,和⽤户做交互的⽅法集合,⼀般都为点击事件)、页⾯⾏为对象(PageAction,⽤作更新页⾯UI的⽅法集合)、系统⾏为对象(SystemAction,⽤户和服务端做交互的⽅法集合)
(2)由于购物车的复杂性,建议在抽象⼀个⼯具对象(CHECKBOX_TOOL),建议实现的⽅法如下(可以根据具体情况做调整)。
//⽤于获取checkbox元素的⼯⼚( 由于购物车列表项可能会被移除 每次使⽤时必须重新获得 )
var CHECKBOX_TOOL = {
all:$(“label[data-selected=’all’]”) ,
/**
* 获取实时的店铺按钮列表 (防⽌缓存)
* @return {jQuery|HTMLElement}
*/
store: function () {
},
/**
* 获取实时的商品按钮列表 (防⽌缓存)
* @return {jQuery|HTMLElement}
*/
goods: function () {
},
/
**
* 选中状态的css类名称
*/
checkedClzName: ""
};
/**
* 是否被选中
* @param $checkbox 被点击的chexkbox对象
* @param caller 调⽤者,当调⽤者不为undeifed的时候,强制放回调⽤者预期的选中状态
**/
CHECKBOX_TOOL.isSelected = function ($checkbox, caller) {
if (caller != undefined) {
return caller.selected;
}
return TODO;
}
/**
* 设置为选中状态
**/
CHECKBOX_TOOL.setSelected = function ($checkbox) {
CHECKBOX_TOOL.setSelected = function ($checkbox) {
}
/
**
* 设置为未选中状态
**/
CHECKBOX_TOOL.setUnSelected = function ($checkbox) {
}
/**
* 获取店铺列表
**/
StoreList = function () {
return $("label[data-store]");
}
/
**
* 获取店铺中的商品项列表
**/
StoreGoodsList = function ($checkBox) {
}
/**
* 店铺复选框是否能选中
**/
CHECKBOX_TOOL.storeHasSelected = function ($checkBox) {
}
/**
* 全选按钮是否能够选中
**/
CHECKBOX_TOOL.allButtonHasSelected = function () {
}
(3):
UserAction实现参考(核⼼思路:使⽤call或者apply⽅法改变this对象): //⽤户⾏为对象
var UserAction = {};
/**
* 点击购物车商品项
**/
UserAction.clickGoodsItem = function (event, caller) {
var $self = $(this);
var isSelected = CHECKBOX_TOOL.isSelected($self, caller);
if (isSelected) {
//处于选中状态,置为未选中状态
CHECKBOX_TOOL.setUnSelected($self)
} else {
CHECKBOX_TOOL.setSelected($self)
}
if (caller === undefined || caller === this) {
//是由当前商品项⾃⾝发起点击调⽤,直接调⽤计算价钱的⽅法
SystemAction.priceCalculate();
}
//店铺是否能够被选中,并且调⽤者不是店铺按钮
if (CHECKBOX_TOOL.storeHasSelected($self) && caller === undefined) {
//选中店铺
var $store = $self.parents("dl").find("label[data-store]");
UserAction.clickStoreItem.call($store, null, {isGoods: true, selected: isSelected});
}
}
/**
* 点击购物车店铺项
**/
UserAction.clickStoreItem = function (event, caller) {
var $self = $(this);
var isSelected = CHECKBOX_TOOL.isSelected($self, caller);
if (isSelected) {
//处于选中状态,置为未选中状态
CHECKBOX_TOOL.setUnSelected($self);
} else {
CHECKBOX_TOOL.setSelected($self);
}
//是否能够选中全选按钮并且调⽤者不是全选按钮
var allButtonHasSelected = CHECKBOX_TOOL.allButtonHasSelected();
if (allButtonHasSelected ) {
UserAction.clickAllShopCart.call(CHECKBOX_TOOL.all, null, {isStore: true, selected: false}); } else {
UserAction.clickAllShopCart.call(CHECKBOX_TOOL.all, null, {isStore: true, selected: true}); }
//来⾃商品项按钮的调⽤直接return
if (caller !== undefined && caller.isGoods) {
return;
}
//获取店铺下的商品项,调⽤
StoreGoodsList($self).each(function () {
UserAction.clickGoodsItem.call(this, null, {isStore: true, selected: isSelected});
});
//来⾃当前店铺的点击的调⽤
//设置店铺为选中状态,并计算价钱
if (caller === undefined || caller === this) {
SystemAction.priceCalculate();
}
}
/**
* 点击全选按钮
**/
UserAction.clickAllShopCart = function (event, caller) {
console.log(caller);
var $self = $(this);
var isSelected = CHECKBOX_TOOL.isSelected($self, caller);
if (isSelected) {
//处于选中状态,置为未选中状态
CHECKBOX_TOOL.setUnSelected($self);
} else {
CHECKBOX_TOOL.setSelected($self);
}
//来⾃当前全选按钮的点击的调⽤
//设置店铺为选中状态,并计算价钱
if (caller === undefined || caller === this) {
StoreList($self).each(function () {
UserAction.clickStoreItem.call(this, null, {isAll: true, selected: isSelected});
});
SystemAction.priceCalculate();
}
PageAction实现参考:
var PageAction={};
PageAction.updateCartInfo=function(params….){
//TODO 更新购物车信息
}
SystemAction实现参考:
var SystemAction={}
SystemAction.priceCalculate=function(params…){
//这个⽅法可以由外部传⼊参数,也可以⾃⾏在⽅法内部获取相关的参数。
//提交Ajax请求,请求成功后调⽤PageAction.updateCartInfo⽅法对页⾯进⾏更新
}
最终调⽤代码(移动端可以考虑使⽤touch时间代替click):
//点击总的全选按钮
CHECKBOX_TOOL.all.click(function (event) {
UserAction.clickAllShopCart.call(this, event);
});
//点击店铺按钮
CHECKBOX_TOOL.store().click(function (event) {
UserAction.clickStoreItem.call(this, event);
});
//点击商品项
ds().click(function (event,) {
UserAction.clickGoodsItem.call(this, event);
});
js购物车实现的基本思路如上。
注意:在UserAction中要区别出caller是谁,防⽌循环调⽤,导致选择状态错误,以及SystemAction.priceCalculate⽅法多次被调⽤,导致体验流程不顺畅,以及性能损耗。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论