数据结构设计
- 用数据描述所有的内容
- 数据要结构化,易于程序操作(遍历、查找),比如数组、对象、对象为元素构成的数组(每个元素记得设置唯一的 id 属性,以便对元素进行删改操作)
- 数据要可扩展,以便增加新的功能
- list 数组存储所有待办事项,方便增加删除元素和排序
- 每个待办事项用对象描述,方便增加删除属性
- id 属性确保事项唯一,数据类型为数字(也可以设计成字符串)
- title 属性描述事项内容,数据类型为字符串
- completed 属性描述事项是否完成,数据类型为布尔值
组件设计
- 从功能上拆分层次
- 尽量让组件原子化(每个组件只具有一个功能)
- 容器组件(只管理数据)&UI组件(只显示视图)
- 最外层的红框是整个父组件
- 父组件内分蓝框子组件新增数据,绿框子组件展示列表
- 绿框子组件内又有孙组件展示每个事项
- 父组件(红框)为容器组件,管理所有的数据(声明和操作数据【响应事件】)
- 其他组件都是UI 组件,渲染数据展示视图
实战范例 – 购物车
数据结构设计
- 购物车 cartList 中只需要存商品的 id 和数量即可!
组件设计