• 用数据描述所有的内容
• 数据要结构化，易于程序操作（遍历、查找）

• 可扩展性

  设想原型图

  

  数据结构设计

  {
    productionList: [
    {
        id: 1,
      title: '商品1',
      price: 10
    },
    // ...
  ],
  cartList: [
    {
        id: 1,
      quantity: 1
    },
    // ...
  ]
  }

  我一开始的设计，没有满足可扩展性的需要，例如商品改名，商品打折扣，商品列表需要修改，购物车列表也需要修改

  {
  goods: [
    {
      gid: 1,
      name: '商品1',
      price: '10'
    },
    // ...
  ],
  shopping: [// 购物车列表
    {
      gid: 3,
      name: '商品3',
      price: '20',
      num: 1 // 商品数量
    },
    // ...
  ]
  }

  组件设计

• 从功能上拆分层次

• 尽量让组件原子化
• 容器组件（只管数据）& UI组件（只显示视图）

<APP>
    <ProductionList>
    <ProductionListItem />
    <ProductionListItem />
    <ProductionListItem />
  </ProductionList>
  <CartList>
    <CartItem />
    <CartItem />
  </CartList>
</APP>

组件结构和我一开始的设计基本一致