转自大神 一只羊博客» 前端工作的大致流程:
http://www.asheep.cn/skill/end-process.html
当一个项目要我负责开发时， 我的大概工作流程是下面这样的， 当然可能跟实际的某方面有偏差， 因为很多时候工作是因人而异的，比如，你有一个喜欢不断改需求的老板。
1、需求分析期
当一个项目立项后，首先要开一次需求分析会， 要求产品、设计、前端、后端参会， 然后都各自评估下，有什么问题、难点都提出来讨论。当然一个明确的需求，肯定不是这一次会议就能讨论出来的，但起码让开发人员做到心中有码。
当需求基本确定后，产品就能出个原型图，产品会拿着原型图与老板（或者提出需求的一方）演示，再沟通修改。直到原型确定，设计开始按原型图设计psd了 。
在设计稿出来后，可能还在不断修改，这整个过程其实都是需求的分析时期。所以，前端开发基本也都要时刻跟进了解，虽然不用参与太多实际工作。
2、切图期
当整个方案确定后，且设计给出图后，就要进入切图阶段了，这就是前端真正开始工作的时候了。
当然有较好的 "原型设计图" + 需求文档会使我们切的更加帅气，切图前要纵观整个图集, 查看是否有可重复利用的元素/icon(ps:这里跟设计UI有很大关系), 切图前要熟悉公司的重置样式, 公用样式, 公用库等, 因为这样使你少写代码, 需要查看文档或者跟产品沟通, 心里要明白哪些地方需要交互, 有哪些交互, 然后在写HTML的时候要合理的分配这些"资源", 比如预留勾子代码, 是否有ajax列表啊, 做HTML前要心里给出这个页面的最佳方案, 比如 seo中h* 类的标题, 页面是否需要延迟加载片段, 是否有iframe等, 然后快速的制作出HTML页面, 当然制作中难免要多查看各种浏览器的表现形式, 然后在需要后端配合的地方打上明确的注释, 比如: 各种状态, 循环, 空, 特殊需求等...
不要扯那些W3C标准, 国内谁敢说自己的站是真正的W3C标准?
3、交互期
当我自以为理想的HTML页面出来后, 就要进入我兴奋的阶段了, 交互, 哈哈, 一个多么帅气的活, 我的最爱, 这时要自己本地写个测试的后端来模拟接口, 这需要用到点 web server方面的知识, 相信你懂的, 给页面元素打上 js勾子, 然后分析是否用委托, 合理的分配事件...
返回值, 比如: (交互ajax, 全部以json格式, 好处你懂的)
数据成功/正确时: 给予显示到页面, 但要考虑到是否用cache下, 因为可能有的场景(如:tab类), 要多个重复调用... 如: {"error": 0, "data": [{"title": "标题1"}, ...]}
有数据但错误时: 常见于返回值不是理想状态, 前端给予友好的提示, 且要跟据项目中决定是否把这个错误上报到统计库, 如图片统计方式(传送门), 这个具体的错误信息, 可以是ajax返回值, 也可以是前端拟定; 如: {"error": 10001, "msg": "没有登录"}, 接口的友好和维护性由希望跟后端人员一起来定下来并出相应文档
无数据异常时: 常见于返回值异常, 如不符合目标(json)格式, 或者服务器响应失败, 前端给予提示, 跟据项目需要上报错误信息
考虑到返回值的问题了, 也要想到正在处理中的请况, 比如: 登录时用户要反复点击登录按钮呢? 通常我是第一次点击后把按钮改变状态, 并在页面明显的地方给予"正在请求中(文字依地方而异)" 的状态, 然后在完成/失败后恢复当初, 当然表单我还是喜欢 submit 事件, 这也跟我个人习惯有关, 但我相信, 有这习惯的人很多.
如果是表单项目还要考虑到js前端初步判断, 比如: 平常的空(trim后的,当然有的场景是不需要的), 正则下是否符合格式, 是否用设置maxlength属性, 是否用考虑使用submit事件... 前端的验证是为了快速的让用户知道"问题所在", 而后端这些也是要验证的, 因为不管怎么别相信前端...
4、调试期
完成交互后, 就要整个页面调试下了, 比如 各种浏览器下是否有异常啊, 如果有时间可以看下是否有内存泄漏啊, 是否能通过 chrome兼容性测试插件 评分啊, 检查js的代码片段/文件位置, 查看页面domReady时间, 查看首屏总连接数是否大于70, 用火狐查看源码是否有报红出错, js+css是否可以压缩/合并...(当然视项目不同调试的程度也不同)
当完成一系列的调试后, 可以长吐口气, 把相应的接口文档+html页面给后端了, 自己去冲杯咖啡犒劳下吧...
5、检查期
你以为工作就完了? 不, 当后端完成了页面动态的调用, 还要对有页面进行从头到脚的检查, 检查是否符合当初交接时的结构, 是否有什么遗漏, 当发现没问题后, 我要对自己说: 你完成了一个页面, 当我还在沾沾自喜的时候, 才发现, 一大波的图还等着我切... 于是又返回到第一步...
大致的流程就这么几步，这是单纯的前端流程。至于其中切图的时候跟设计沟通、交互的时候跟后端沟通，这些属于开发细节问题，没有写在流程里面，但是这也是基本流程必须有的。
