Skip to content

实现购物车功能设计

实现购物车功能,有:商品、价格、数量和总价,比如这样一个原型图

1、data 数据结构设计

  • 用数据描述所有的内容
  • 数据要结构化,易于程序操作(遍历、查找)
  • 数据要可扩展,以便增加新的功能

比如

js
this.data = {
  productionList: [
    // 对象和数组数据是可描述,结构化,可扩展的
    {
      id: 1,
      title: '商品',
      price: 10,
    },
    // ...
  ],
  cartList: [
    {
      id: 1, // 使用商品 id,可扩展
      quantity: 1,
    },
    // ...
  ],
};

2、组件设计

  • 从功能上拆分层次
  • 尽量让组件原子化
  • 容器组件(只管理数据)& UI 组件(只显示视图)

上图,第一层红线容器组件,第二层蓝线、绿线等 UI 组件

比如

js
<App> <!--管理所有数据-->
    <ProductionList> <!--商品列表-->
        <ProductionListItem/>
        <ProductionListItem/>
        <ProductionListItem/>
    </ProductionList>
    <CartList><!--购物车列表和总价-->
        <CartItem/>
        <CartItem/>
    </CartList>
</App>

基于 MIT 许可发布