前端工作的大致流程

前端开发 3082 Views 0 Comments

当一个项目要我负责开发时, 我的大概工作流程是下面这样的, 当然可能跟实际的某方面有偏差, 因为很多时候工作是因人而异的,比如,你有一个喜欢不断改需求的老板。

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、检查期

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

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

转载请注明:一只羊博客 » 前端工作的大致流程

分享到:
(5)

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址