前端工做的大体流程

转自大神 一只羊博客» 前端工做的大体流程:

http://www.asheep.cn/skill/end-process.html

 

当一个项目要我负责开发时， 个人大概工做流程是下面这样的， 固然可能跟实际的某方面有误差， 由于不少时候工做是因人而异的，好比，你有一个喜欢不断改需求的老板。

 

一、需求分析期

 

当一个项目立项后，首先要开一次需求分析会， 要求产品、设计、前端、后端参会， 而后都各自评估下，有什么问题、难点都提出来讨论。固然一个明确的需求，确定不是这一次会议就能讨论出来的，但起码让开发人员作到心中有码。

 

当需求基本肯定后，产品就能出个原型图，产品会拿着原型图与老板（或者提出需求的一方）演示，再沟通修改。直到原型肯定，设计开始按原型图设计psd了 。

 

在设计稿出来后，可能还在不断修改，这整个过程其实都是需求的分析时期。因此，前端开发基本也都要时刻跟进了解，虽然不用参与太多实际工做。

 

二、切图期

 

当整个方案肯定后，且设计给出图后，就要进入切图阶段了，这就是前端真正开始工做的时候了。

 

固然有较好的 "原型设计图" + 需求文档会使咱们切的更加帅气，切图前要纵观整个图集, 查看是否有可重复利用的元素/icon(ps:这里跟设计UI有很大关系), 切图前要熟悉公司的重置样式, 公用样式, 公用库等, 由于这样使你少写代码, 须要查看文档或者跟产品沟通, 内心要明白哪些地方须要交互, 有哪些交互, 而后在写HTML的时候要合理的分配这些"资源", 好比预留勾子代码, 是否有ajax列表啊, 作HTML前要内心给出这个页面的最佳方案, 好比 seo中h* 类的标题, 页面是否须要延迟加载片断, 是否有iframe等, 而后快速的制做出HTML页面, 固然制做中不免要多查看各类浏览器的表现形式, 而后在须要后端配合的地方打上明确的注释, 好比: 各类状态, 循环, 空, 特殊需求等...

 

不要扯那些W3C标准, 国内谁敢说本身的站是真正的W3C标准?

 

三、交互期

 

当我自觉得理想的HTML页面出来后, 就要进入我兴奋的阶段了, 交互, 哈哈, 一个多么帅气的活, 个人最爱, 这时要本身本地写个测试的后端来模拟接口, 这须要用到点 web server方面的知识, 相信你懂的, 给页面元素打上 js勾子, 而后分析是否用委托, 合理的分配事件...

 

返回值, 好比: (交互ajax, 所有以json格式, 好处你懂的)

 

数据成功/正确时: 给予显示到页面, 但要考虑到是否用cache下, 由于可能有的场景(如:tab类), 要多个重复调用... 如: {"error": 0, "data": [{"title": "标题1"}, ...]}

 

有数据但错误时: 常见于返回值不是理想状态, 前端给予友好的提示, 且要跟据项目中决定是否把这个错误上报到统计库, 如图片统计方式(传送门), 这个具体的错误信息, 能够是ajax返回值, 也能够是前端拟定; 如: {"error": 10001, "msg": "没有登陆"}, 接口的友好和维护性由但愿跟后端人员一块儿来定下来并出相应文档

 

无数据异常时: 常见于返回值异常, 如不符合目标(json)格式, 或者服务器响应失败, 前端给予提示, 跟据项目须要上报错误信息

 

考虑到返回值的问题了, 也要想到正在处理中的请况, 好比: 登陆时用户要反复点击登陆按钮呢? 一般我是第一次点击后把按钮改变状态, 并在页面明显的地方给予"正在请求中(文字依地方而异)" 的状态, 而后在完成/失败后恢复当初, 固然表单我仍是喜欢 submit 事件, 这也跟我我的习惯有关, 但我相信, 有这习惯的人不少.

 

若是是表单项目还要考虑到js前端初步判断, 好比: 日常的空(trim后的,固然有的场景是不须要的), 正则下是否符合格式, 是否用设置maxlength属性, 是否用考虑使用submit事件... 前端的验证是为了快速的让用户知道"问题所在", 然后端这些也是要验证的, 由于无论怎么别相信前端...

 

四、调试期

 

完成交互后, 就要整个页面调试下了, 好比 各类浏览器下是否有异常啊, 若是有时间能够看下是否有内存泄漏啊, 是否能经过 chrome兼容性测试插件 评分啊, 检查js的代码片断/文件位置, 查看页面domReady时间, 查看首屏总链接数是否大于70, 用火狐查看源码是否有报红出错, js+css是否能够压缩/合并...(固然视项目不一样调试的程度也不一样)

 

当完成一系列的调试后, 能够长吐口气, 把相应的接口文档+html页面给后端了, 本身去冲杯咖啡犒劳下吧...

 

五、检查期

 

你觉得工做就完了? 不, 当后端完成了页面动态的调用, 还要对有页面进行从头到脚的检查, 检查是否符合当初交接时的结构, 是否有什么遗漏, 当发现没问题后, 我要对本身说: 你完成了一个页面, 当我还在沾沾自喜的时候, 才发现, 一大波的图还等着我切... 因而又返回到第一步...

 

大体的流程就这么几步，这是单纯的前端流程。至于其中切图的时候跟设计沟通、交互的时候跟后端沟通，这些属于开发细节问题，没有写在流程里面，可是这也是基本流程必须有的。