WEB前端架构（四）

今天是第三天，把购物车的基本功能算是都写完了。 这东西吧，思路想清楚之后，其实不难实现。 就是里面的逻辑交互很多，来来回回的，神烦啊，， 每一步每个操作都是对数据的改变，必须要保证你所有的操作所修改的都是同一个数据， 也就是说要操持data的一致性，先来上个图， 手绘的就是看个意思，，

第一张图， 先选商品类型，A或B型 再选商品型号，500或700ML，， 然后加减数量，， 然后加入购物车，，

第二张图， 箭头所指处4， 就是说，购物车里有四个商品，

第三张图， 你点击那个小车， 弹出购物车商品列表， 每种商品都可以再修改数量。 你也可以选择清空， 也可以去结算。

第四张图， 如果你选结算，就跳转结算页了 如果你选清空，页面就所有商品删除，所有选项归0，，

就这么个东西，看起来不难，确实也不难， 但你会有各种不同顺序的操作，， 在购物车展开列表页修改某种商品数量，那你购物车中商品总数得一致啊； 然后你又添加了某种商品，这商品总数得加上啊 你清空了购物车，那你所有的变量，初值，if判断的true、false，都得初始化，， 你看到这肯定觉得，我上面那几行字不是废话么，这当然的呀，谁家购物车不这样啊 但问题，你牛你厉害，我以前没写过这玩艺啊，反正我是磕得一头包 现在虽然是写完了，也确实是OO了， 但有些地方还是不好， 例如，用来保持数据一致的变量，还是有点多，，有些变量可以合并为一个对像的多个属性， 还有JS中的MVC分的有点不清， 例如购物车向上弹出的列表，你修改它一次，它就重新生成一次，这个其实是V层的，但我给放在了C层，

下面这个图，是购物车对象的结构，， 旁边是新添加的商品和属性。

这个图是一堆全局变量， 应该搞成一个对象的N个属性，

这个购物车正好用来，给公司的电商网站中的购物车模块练手 等再写电商网站的购物车的时候，就不会这么写的这么尴尬了 我感觉，所谓的前端双向绑定，无非就是改变Data的时候，调用生成相关DOM结构的tpl模板。。