专栏首页web前端教室继续电商网站的购物车

继续电商网站的购物车

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

我这个简单的购物车从功能模块上,有以下几个组成部分:

1,各种插件,例如单选、复选框、商品数量加减框,下拉框,popup弹出框,下拉框等等,

2,HTML模板,用来生成购物车中的商品列表;

3,整个购物车的网页和购物车的页面容器;

4,各种防止重复点击的措施,例如狂点删除商品按钮,其实就是不停的向删除商品接口发起请求,然后在此接口未返回数据的时候再次发起请求,极容易出错。

5,各种公共方法,例如处理各个分枝条件的判断逻辑的方法

那么这些所谓的“物料”已经备好的情况下,先从哪开始呢?这就是一个思路的问题。我的作法是先从整体上做一个搭建,,

首先,创建一个cart对象,然后prototype添加各种方法;

然后,使用自定义的get或set方法,做到可以随意的添加plus插件;

其次,写好防止暴力操作方法和公共方法,并放在专门的文件中;

再次,做好各个plus插件之间的数据同步操作。例如页面上有十个城市下拉列表,然后你在其中一个城市下拉列表中添加了一个城市之后,其余的9个下拉列表要马上自动更新内容。这就是一个前端的数据中间层,要有这个概念。

关于这个部分,你可以先在纸上把大概的思路和方向画出来,然后把各个功能模块的进出方法用UML的方式画出来。之后你就可以开始动手写代码了。

到这一步为止,我们才准备好写第一行代码。

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

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

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    web前端教室
  • [先行者周日课程-0305] web前端组件 之 拖动窗口

    学习笔记如下: 今天的内容,是拖动窗口。 js的引用数据类型,基本数据类型。 js它有5种基本数据类型: undefined , null, Boolean,...

    web前端教室
  • var a="xx";a=a+"ss";a的值变了,但"xx"字符串并没有变

    如题目所示, var a="xx"; a=a+"ss"; console.log(a); //xxss 一般情况下,我们就可以认为此时a的值,由'xx'变成了'...

    web前端教室
  • PHP 面向对象 抽象类

    使用 abstract 关键字申明抽象类和抽象方法。抽象类不能被实例化,只能被其他类继承。 abstract class A { // 抽象方法没有函数...

    康怀帅
  • 《八》Swoole MySQL 连接池的实现

    “亮哥,我今年30岁了,有点中年危机,最近有点焦虑,发现工作虽然很忙,但是没感觉能力有所提升,整天都有写不完的业务代码,时间紧有时代码质量也不怎么样,知道还有很...

    新亮
  • 通过90行代码学会HTML5 WebSQL的4种基本操作

    Web SQL数据库API是一个独立的规范,在浏览器层面提供了本地对结构化数据的存储,已经被很多现代浏览器支持了。

    Jerry Wang
  • python 数据模型

    https://github.com/ccc013/CodesNotes/blob/master/FluentPython/1_Python%E6%95%B0%...

    材ccc
  • 开发者也是用户 - 第二部分:改善 UI 和 API 可用性的五条指导原则

    Android 开发者
  • 1.1 django model的增删改(1)

    98k
  • 再谈开发中的代码规范

      随着公司的业务发展,项目越来越多,越来越大,复杂性也越来越高。查找一个BUG变得越发抓狂;新人熟悉一块代码也变得越发困难。有的时候顺手写下的一行充满坏味道的...

    Zachary_ZF

扫码关注云+社区

领取腾讯云代金券