11.项目设计 12项目流程
2020-04-16 11:11:02 0 举报AI智能生成
项目设计 项目流程
作者其他创作
大纲/内容
第11章 项目设计
11-1 面试为何会考察组件和状态设计
组件和状态设计
面试要求
1. 框架（Vue React）的使用（和高级特性）是必要条件
2. 能独立负责项目？还是需要别人带着？——考察设计能力
3. 面试必考（二面/三面），场景题
2. 能独立负责项目？还是需要别人带着？——考察设计能力
3. 面试必考（二面/三面），场景题
考察重点
1. 数据驱动视图
2. 状态：数据结构设计（React-state Vue-data）
3. 视图：组件结构和拆分
2. 状态：数据结构设计（React-state Vue-data）
3. 视图：组件结构和拆分
回顾面试题
1. React设计todolist(组件结构，redux state数据结构)
2. Vue设计购物车（组件结构 ，vuex state数据结构）
2. Vue设计购物车（组件结构 ，vuex state数据结构）
11-2 状态设计的思路和要点
11-3 组件设计的思路和要点
11-4 React实现TodoList代码演示
11-5 组件设计和状态设计的总结
11-3 组件设计的思路和要点
11-4 React实现TodoList代码演示
11-5 组件设计和状态设计的总结
React实现Todo List
1. state数据结构设计
2. 组件设计（拆分、组合）和组件通讯
3. 代码演示
2. 组件设计（拆分、组合）和组件通讯
3. 代码演示
设计原型图
state数据结构设计
设计原则
1. 用数据描述所有的内容
2. 数据要结构化，易于程序操作（遍历、查找）
3. 数据要可扩展，以便增加新的功能
2. 数据要结构化，易于程序操作（遍历、查找）
3. 数据要可扩展，以便增加新的功能
每个数据都要有一个id,
并且id不能重复
并且id不能重复
组件设计
设计原则
1. 从功能上拆分层次
2. 尽量让组件原子化
3. 容器组件（只管理数据）& UI组件（只显示视图）
2. 尽量让组件原子化
3. 容器组件（只管理数据）& UI组件（只显示视图）
红色，容器组件
绿色，显示
绿色，显示
代码演示
容器组件App
定义状态List
以及List如何新增、如何删除、如何切换完成状态
以及List如何新增、如何删除、如何切换完成状态
Input
负责把新输入的内容回传给App
List
负责把list列表渲染出来
列表的每一项交给ListItem渲染
列表的每一项交给ListItem渲染
ListItem
切换完成状态和删除，调用外层传给它的方法即可
总结
1. state数据结构设计
2. 组件设计 组件通讯
3. 结合redux
2. 组件设计 组件通讯
3. 结合redux
11-6 Vue实现购物车-你将如何设计
11-7 Vue实现购物车data如何设计
11-8 Vue实现购物车-组件设计和代码演
11-9 结合vuex实现购物车
11-7 Vue实现购物车data如何设计
11-8 Vue实现购物车-组件设计和代码演
11-9 结合vuex实现购物车
Vue实现购物车
1. data数据结构设计
2. 组件设计和组件通讯
3. 代码演示
2. 组件设计和组件通讯
3. 代码演示
设计原型图
data数据结构设计
1. 数据描述所有的内容
2. 数据要结构化，易于程序操作（遍历、查找）
3. 数据要可扩展，以便增加新的功能
2. 数据要结构化，易于程序操作（遍历、查找）
3. 数据要可扩展，以便增加新的功能
组件设计
1. 从功能上拆分层次
2. 尽量让组件原子化
3. 容器组件（只管理数据）& UI组件（只显示视图）
2. 尽量让组件原子化
3. 容器组件（只管理数据）& UI组件（只显示视图）
代码演示
容器组件index.vue
index.vue
管理所有的数据以及数据的变化，
怎么加入购物车，
怎么删除购物车的条目
怎么加入购物车，
怎么删除购物车的条目
产品列表组件
ProductionList
ProductionList
index.vue
index.vue
渲染产品列表
ProductionItem.vue
ProductionItem.vue
渲染商品条目
调用父类的方法，加入购物车
调用父类的方法，加入购物车
购物车列表组件
CartList
CartList
index.vue
index.vue
渲染购物车列表
重新合并list数据（使用id将ProductionList和CartList中的商品关联起来）
计算购物车总金额
计算购物车总金额
CartItem.vue
调用父类方法，增加或者减少购物车中商品的数量
调用父类方法，增加或者减少购物车中商品的数量
vuex实现购物车
https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
目录结构
目录结构
数据结构设计
内容太长，看git代码吧。。。
体会一下使用vuex和不适用vuex实现购物车时，组件设计、数据管理的差异
体会一下使用vuex和不适用vuex实现购物车时，组件设计、数据管理的差异
11-10 状态设计和组件设计的考点总结
第12章 项目流程
12-1 面试为何会考察项目流程
项目流程
1. 项目分多人、多角色参与
2. 项目分多阶段
3. 项目需要计划和执行
2. 项目分多阶段
3. 项目需要计划和执行
为什么考察项目流程
1. 确定你真正参加过实际项目（而不是个人项目、毕业设计等）
2. 确定你能真正解决项目的问题
3. 看你能否独立承担起一个项目（作为项目负责人）
2. 确定你能真正解决项目的问题
3. 看你能否独立承担起一个项目（作为项目负责人）
看几个面试题
1. PM想再项目开发过程中增加需求，该怎么办?
2. 项目即将延期了，该怎么办？
3. 你将如何保证项目质量？
2. 项目即将延期了，该怎么办？
3. 你将如何保证项目质量？
如何讲解
1. 项目的所有角色
2. 项目的全流程
3. 各个阶段中的常见问题
2. 项目的全流程
3. 各个阶段中的常见问题
12-2 和前端开发相关的项目角色有哪些
项目角色
1. PM 产品经理
2. UE 视觉设计师
3. FE 前端开发
4. RD 后端开发
5. CRD 移动端开发
2. UE 视觉设计师
3. FE 前端开发
4. RD 后端开发
5. CRD 移动端开发
12-3 一个完整的项目要分哪些阶段
完整项目流程
12-4 评审项目需求时需要注意哪些事项
Stage1-需求分析
1. 了解背景
2. 质疑需求是否合理
3. 需求是否闭环，有来有去
4. 开发难度如何
5. 是否需要其他支持
6. 不要急于给排期
2. 质疑需求是否合理
3. 需求是否闭环，有来有去
4. 开发难度如何
5. 是否需要其他支持
6. 不要急于给排期
12-5 如何做好技术方案设计
Stage2-技术方案设计
1. 求简，不过多设计
2. 产出文档
3. 找准设计重点（数据结构设计、组件设计。。。）
4. 组内评审
5. 和RD CRD沟通
6. 发出会议结论
2. 产出文档
3. 找准设计重点（数据结构设计、组件设计。。。）
4. 组内评审
5. 和RD CRD沟通
6. 发出会议结论
12-6 如何保证代码质量
Stage3-开发
1. 如何反馈排期（留buffer约1/4左右的时间，考虑好并行工作，考虑协同人、依赖的情况）
2. 符合开发规范（注释、模块命名、git...）
3. 写出开发文档
4. 及时单元测试
5. Mock API
6. Code Review
2. 符合开发规范（注释、模块命名、git...）
3. 写出开发文档
4. 及时单元测试
5. Mock API
6. Code Review
12-7 项目过程中PM加需求怎么办
Stage4-联调
1. 和RD CRD技术联调
2. 让UE确定视觉效果
3. 让PM确定产品功能
2. 让UE确定视觉效果
3. 让PM确定产品功能
PM加需求怎么办？
1. 不能拒绝，走需求变更流程即可
2. 如果公司有规定，则按规定走
3. 否则，发起项目组合leader的评审，重新评估排期
2. 如果公司有规定，则按规定走
3. 否则，发起项目组合leader的评审，重新评估排期
12-8 不要对QA说：我电脑没问题！
Stage5-测试
1. 发提测邮件，抄送项目组
2. 测试问题要详细记录
3. 有问题及时沟通，QA和FE天生信息不对称
2. 测试问题要详细记录
3. 有问题及时沟通，QA和FE天生信息不对称
12-9 项目上线
Stage6-上线
1. 上线之后及时通知QA回归测试
2. 上线之后及时同步给PM和项目组
3. 如有问题，及时回滚。先止损，再排查问题
2. 上线之后及时同步给PM和项目组
3. 如有问题，及时回滚。先止损，再排查问题
12-10 项目沟通的重要性
项目沟通
1. 多人协作，沟通是最重要的事情
2. 每日一沟通（如站会），有事说事，无事报平安
3. 及时识别风险，及时汇报
2. 每日一沟通（如站会），有事说事，无事报平安
3. 及时识别风险，及时汇报
12-11 项目流程总结
总结
1. 为啥考察-确定有项目经验
2. 项目要分多阶段
3. 项目需要计划和执行
2. 项目要分多阶段
3. 项目需要计划和执行
讲解内容
1. 项目角色
2. 项目流程和阶段
3. 遇到的问题
2. 项目流程和阶段
3. 遇到的问题
项目流程图
要自己能画出来
0 条评论
下一页
为你推荐
查看更多
