专栏首页web前端教室大白话,设计一个购物车对象

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

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

这个题其实并不难,只要想明白购物车这个模块,它有哪些功能,然后以prototype的方式向原型上添加即可,

function cartBox(){}
cartBox.prototype = {
 init:function(){
 //...
 },
 addgoods:function(){
 //...
 },
 delGoods:function(){},
 modifyGoods:function(){},
 selectGoods:function(){}
}
new cartBox().init( data );

这就是一个最简单的购物车的结构了,跟什么cookie完全没有关系。再加上几个set和get方法。最基本的结构就出来了,再加上html模板,然后再加上一个createDom的方法,用它来生成DOM。每次click事件的时候,都调用createDom的方法,就是每次点击事件的时候,都重新根据data数据来重新生成页面DOM,这就是一个最简单的数据驱动视图了。

本文分享自微信公众号 - web前端教室(webfeel),作者:老尚

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

原始发表时间:2016-05-26

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 继续电商网站的购物车

    这一阶段的内容会比较枯燥,没办法啊。纯业务逻辑这块,写不出情趣来。有兴趣的就耐着性子看看,没耐性的可以等等看,改天写个有趣的内容之类的 我这个简单的购物车从功能...

    web前端教室
  • JavaScript ES6的一些新鲜玩艺儿。。

    ES6的那些新东西,现在我了解的也不多。 先从简单的来吧,一些个语法看看,, 以前我们声明个对象得这样: var Obj = { data:function(...

    web前端教室
  • WEB前端架构(四)

    今天是第三天,把购物车的基本功能算是都写完了。 这东西吧,思路想清楚之后,其实不难实现。 就是里面的逻辑交互很多,来来回回的,神烦啊,, 每一步每个操作都是对数...

    web前端教室
  • 商城项目-购物车功能分析

    cwl_java
  • JavaScript中的抽象类和虚方法

    虚方法是类成员中的概念,是只做了一个声明而未实现的方法,具有虚方法的类就称之为抽象类,这些虚方法在派生类中才被实现。抽象类是不能实例化的,因为其中的虚方法并不是...

    刘亦枫
  • 德国马普与瑞士苏黎世联邦理工学院合建学习系统研究中心

    2015年11月30日,瑞士苏黎世联邦理工学院网站发文宣称该院与德国马克斯·普朗克学会(Max Planck Society)正式成立了马普-苏黎世(Max P...

    人工智能快报
  • WEB前端架构(四)

    今天是第三天,把购物车的基本功能算是都写完了。 这东西吧,思路想清楚之后,其实不难实现。 就是里面的逻辑交互很多,来来回回的,神烦啊,, 每一步每个操作都是对数...

    web前端教室
  • 手机上怎么做电子版证件照

    很多的小伙伴想知道怎么自己制作证件照片,对此比较感兴趣,下面小编就来告诉大家怎么自己制作证件照片,方法也很简单。

    互动20
  • shopping Test method

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

    测试小兵
  • 人工智能面试题86问,新手找工作必备!

    祈澈菇凉

扫码关注云+社区

领取腾讯云代金券