前端开发步骤

（2017-02-10-吴惟刚）

 

目录

1. 工程师规范 - 开发准备3

2. 了解产品和设计3

3. 提出疑问和见解3

4. 预算人力和时间4

5. 工程师规范 - 开发过程5

6. 职责任务5

7. 页面开发5

8. 提取剥离5

9. 工程师规范 - 开发产出6

10. 自测联调6

11. 提交验收6

12. 总结分享6

13. 变更维护6

 

工程师规范 - 开发准备

了解产品和设计

•参加需求会议，了解产品设计和项目成员。

o产品是前后端分离项目还是CMS项目还是artery项目

•了解产品面向的设备和平台。

oPC 还是移动端

o如果是移动端，那么需要考虑兼容哪些端（pad,phone），操作系统，android ，ios是否都需要兼容

•了解产品对兼容性的要求以及是否采用响应式设计等。

o需要兼容的浏览器

o需要兼容的ie最低版本

o最小和最大分辨率

o是否是响应式

o是全屏还是居中布局

•了解产品要使用的技术

需要用到哪些技术

o编译：less

o模块：require

oMvc框架:  angular, vue， Avalon,  react

o工具库：jquery, zepto

oSvg:  snap,  rephael ，d3

owebGl: three

o图表： echarts

o接口工具：rap

•提出疑问和见解

1. •在需求会议中结合技术要求，提出疑问和见解。

2. •提出可能存在的问题（技术实现问题、性能问题等），协商解决方案（如优雅退化）并达成共识。

3. •提出已有新技术可能在产品中的应用场景，协助产品创新。

4. 预算人力和时间

5. •根据项目时间要求及工作量，预算人力和时间

6. o在预估时间的时候尽量预留1-2天时间，防止突发事件和疑难问题

7. •预算开发周期和阶段性产出。

8. •提醒需求方在项目管理平台中创建项目并加入项目成员，创建SVN并设置成员权限。

 

•

工程师规范 - 开发过程

职责任务

•确认交互原型或视觉效果已经定稿，再开始开发工作。

•如果采取并行模式（视觉设计和页面开发同时进行），则以交互原型定稿为准（当视觉效果定稿后，页面工程师再补充细节），开始分配。

•按页面类型分配，同一类型页面分配给同一个人。

•多人合作项目，先确定一个页面工程师负责人，他将负责对整个页面开发工作做统筹规划、分配协调等管理工作和主开发职责。

•先从系统元件做起，每个人都要了解页面公共元素（多个页面中相同或相似部分），一个公共元素只分配到一个人 

页面开发

•使用前端模板代码库和插件，高效开发页面。

•和交互、视觉及其他前端工程师或后端工程师保持良好的沟通。

•及时反馈问题和建议：对效果疑问的确认、对状态缺失的补充、对优雅退化的建议、对行为结构的说明等等。

•如果采取并行模式（前台开发和后台开发同时进行），则以交互原型定稿为准，优先定出接口

提取剥离

•页面开发的时，优先提取布局（layout）、模块（module）、元件（unit），组件（component）

•避免重复劳动，对页面元素一目了然，在增加元素时首先来此目录查找是否已经实现或有相似实现而只需扩展。

•将所有元件全部写到一个 unit.html 中，方便自己和他人查找

工程师规范 - 开发产出

自测联调

•更新、合并、解决冲突、提交。

•对自己的代码进行全面的多设备测试和兼容性测试。

•如果自测过程中发现别人写的代码有问题，及时反馈。

提交验收

•当有阶段性产出后，页面工程师将页面提交给设计师，进行效果验收。

•效果验收将主要检查视觉效果符合度（尺寸、位置、颜色、切图等）。

•如有必要，可以同时提交给经验丰富的前端工程师，进行代码验收。

•代码验收将主要检查兼容性、HTML规范和CSS规范以及js规范。

•Js代码，务必保持条理清晰，有完善的注释说明

•在项目中建一个readme.txt , 用于每次更新时的说明

总结分享

•分享内容可以包含：架构思想、协作心得、设备特性介绍、新技术应用、遇到的问题和解决方案等。

•可以把总结中的技术demo提交给前端demo库，以帮助团队积累这些技术并分享给别人。

变更维护

•变更前应了解变更原因，变更后应该及时通知后续开发工程师，并且在readme.txt中详细说明。

« 上一篇： 前端常用框架知识点收集

问题回顾【一】 ：下一篇 »