今天是第三天,把购物车的基本功能算是都写完了。 这东西吧,思路想清楚之后,其实不难实现。 就是里面的逻辑交互很多,来来回回的,神烦啊,, 每一步每个操作都是对数据的改变,必须要保证你所有的操作所修改的都是同一个数据, 也就是说要操持data的一致性,先来上个图, 手绘的就是看个意思,,
第一张图, 先选商品类型,A或B型 再选商品型号,500或700ML,, 然后加减数量,, 然后加入购物车,,
第二张图, 箭头所指处4, 就是说,购物车里有四个商品,
第三张图, 你点击那个小车, 弹出购物车商品列表, 每种商品都可以再修改数量。 你也可以选择清空, 也可以去结算。
第四张图, 如果你选结算,就跳转结算页了 如果你选清空,页面就所有商品删除,所有选项归0,,
就这么个东西,看起来不难,确实也不难, 但你会有各种不同顺序的操作,, 在购物车展开列表页修改某种商品数量,那你购物车中商品总数得一致啊; 然后你又添加了某种商品,这商品总数得加上啊 你清空了购物车,那你所有的变量,初值,if判断的true、false,都得初始化,, 你看到这肯定觉得,我上面那几行字不是废话么,这当然的呀,谁家购物车不这样啊 但问题,你牛你厉害,我以前没写过这玩艺啊,反正我是磕得一头包 现在虽然是写完了,也确实是OO了, 但有些地方还是不好, 例如,用来保持数据一致的变量,还是有点多,,有些变量可以合并为一个对像的多个属性, 还有JS中的MVC分的有点不清, 例如购物车向上弹出的列表,你修改它一次,它就重新生成一次,这个其实是V层的,但我给放在了C层,
下面这个图,是购物车对象的结构,, 旁边是新添加的商品和属性。
这个图是一堆全局变量, 应该搞成一个对象的N个属性,
这个购物车正好用来,给公司的电商网站中的购物车模块练手 等再写电商网站的购物车的时候,就不会这么写的这么尴尬了 我感觉,所谓的前端双向绑定,无非就是改变Data的时候,调用生成相关DOM结构的tpl模板。。