专栏首页web前端教室WEB前端架构(四)

WEB前端架构(四)

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

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

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

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

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

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

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

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

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

本文分享自微信公众号 - web前端教室(webfeel)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-10-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 大白话,设计一个购物车对象

    image.png 今天的作业是,设计一个购物车对象。就是这个购物车对象,通过prototype来添加各种方法,然后通过new一个新对象之后,就可以调用它的...

    web前端教室
  • javascript-购物车(1)

    这是之前文章提到过的JS购物车,当时简单的介绍了下它的思路和结构。 然后有同学发信息说,看的不太明白,最好能有代码,, 于是就录了这个视频教程,主要就是介绍它...

    web前端教室
  • 你可以从面试中学到什么?

    讲一下我对面试的一些。。。“偏见”,哈哈,熟悉我的同学们一定要批判的读接下来的内容哈。

    web前端教室
  • [Skr-Shop]购物车设计之需求分析

    对于一个电商来讲,购物车是整个购买流程最重要的一步。因为电商发展到今天购物车不仅仅只是为了完成打包下单的功能;也是收藏、对比、促销提醒、相关推荐的重要展示窗口。...

    大愚
  • shopping Test method

    网上商店的购物车要能过跟踪顾客所选的的商品,记录下所选商品,还要能随时更新,可以支付购买,能给顾客提供很大的方便。

    测试小兵
  • 商城项目-购物车功能分析

    cwl_java
  • 天猫Java研发三面:讲讲Redis实现购物车的设计思路!

    购物车是任何一个电商项目都会用到的功能,面试的时候也经常问到,今天我们就来谈谈Redis下购物车的实现。

    用户5546570
  • Web 小案例 -- 网上书城(三)

    bgZyy
  • 猿设计19——真电商之你所不知道的购物车

    经过前面一段时间的学习,相信你对类目、属性、商品、促销、库存的业务和设计有了一定的了解。各个模块已经有了一些概念,看起来我们终于要进入电商系统的核心领域了——交...

    山旮旯的胖子
  • 基于Django的电子商务网站开发(连载28)

    (1)登录的用户通过语句good= get_object_or_404(Goods, id=good_id)获得需要移出的商品信息。

    小老鼠

扫码关注云+社区

领取腾讯云代金券