数据结构设计

  • 用数据描述所有的内容
  • 数据要结构化,易于程序操作(遍历、查找),比如数组、对象、对象为元素构成的数组(每个元素记得设置唯一的 id 属性,以便对元素进行删改操作)
  • 数据要可扩展,以便增加新的功能

前端开发的设计思路【精炼】(含数据结构设计、组件设计)_数据类型


前端开发的设计思路【精炼】(含数据结构设计、组件设计)_前端_02

  • list 数组存储所有待办事项,方便增加删除元素和排序
  • 每个待办事项用对象描述,方便增加删除属性
  • id 属性确保事项唯一,数据类型为数字(也可以设计成字符串)
  • title 属性描述事项内容,数据类型为字符串
  • completed 属性描述事项是否完成,数据类型为布尔值

组件设计

  • 从功能上拆分层次
  • 尽量让组件原子化(每个组件只具有一个功能)
  • 容器组件(只管理数据)&UI组件(只显示视图)
  • 最外层的红框是整个父组件
  • 父组件内分蓝框子组件新增数据,绿框子组件展示列表
  • 绿框子组件内又有孙组件展示每个事项
  • 父组件(红框)为容器组件,管理所有的数据(声明和操作数据【响应事件】)
  • 其他组件都是UI 组件,渲染数据展示视图

实战范例 – 购物车

数据结构设计

前端开发的设计思路【精炼】(含数据结构设计、组件设计)_数据_03

  • 购物车 cartList 中只需要存商品的 id 和数量即可!

组件设计

前端开发的设计思路【精炼】(含数据结构设计、组件设计)_前端_04