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