当一个项目/产品需要我负责/制作时, 我大概流程是这样的, 当然可能跟实际的某方面有偏差, 因为很多地方因 地,人,天 而异...

需求分析期

项目在产品确定功能后希望在设计前开一次需求会, 比如跟 前端,后端, 产品设计都大概看下功能简介, 然后都各自评估下, 有什么问题/难点都提出来讨论

比如: 某功能会涉及到 类似淘宝那样的配送地址, 要求可以做为搜索条件的, 这个就会涉及到前端的展示,储存(编辑时初始化)效果,和数据结构, 而后端可能会涉及到数据在库里的储存方式, 查询方式, 从这个功能都可以提出自己的方案, 最终合并为最终方案,要求能解决前/后端问题, 且要达到产品的需求, 尽可能的降低开发成本, 加快开发速度!

其中还包括可能由于目前技术/程序可能完成起来困难(ps:当然不是不能完成,只是对于开发周期来说可能需要时间较长), 可以跟产品沟通是否可以调整一种方式来达到目的, 从而加快开发速度!

切图期

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

当切完图后, 页面是否可以通过检测工具检测呢? 是否兼容? 是否在火狐源代码里有红色警告?

如果有需要异步接口的地方可以本地模拟一下, 定出接口文档, 然后自己模拟出环境, 并按文档的规范写出来, 最后把文档给后端同学.

ps: 不要扯那些W3C标准, 国内谁敢说自己的站是真正的W3C标准?(ps: 什么? 你就是, 豪, 我们做朋友吧, 请联系我)

交互期

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

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

• 数据成功/正确时: 给予显示到页面, 但要考虑到是否用cache下, 因为可能有的场景(如:tab类), 要多个重复调用... 如: {"error": 0, "data": [{"title": "标题1"}, ...]}
• 有数据但错误时: 常见于返回值不是理想状态, 前端给予友好的提示, 且要跟据项目中决定是否把这个错误上报到统计库, 如图片统计方式(传送门), 这个具体的错误信息, 可以是ajax返回值, 也可以是前端拟定; 如: {"error": 10001, "msg": "没有登录"}, 接口的友好和维护性由希望跟后端人员一起来定下来并出相应文档
• 无数据异常时: 常见于返回值异常, 如不符合目标(json)格式, 或者服务器响应失败, 前端给予提示, 跟据项目需要上报错误信息

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

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

调试期

完成交互后, 就要整个页面调试下了, 比如：

• 各种浏览器下是否有异常啊
• 如果有时间可以看下是否有内存泄漏啊
• 检查js的代码片段/文件位置
• 查看页面domReady和onload时间
• 查看首屏总连接数是否大于70
• 用火狐查看源码是否有报红出错
• js+css是否可以压缩/合并
• ...

(当然视项目不同调试的程度也不同)

如果页面有异步就找后端的同学联调吧.

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

检查期

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

扫码关注w3ctech微信公众号