前言
很久没有更博了，最近玩的比较开心，原因是我从第一家公司辞职了，于是好好地放松了一段时间。差不多是时候了，决定继续回到前端的工作状态中来，那就以一个前公司一年的工作总结作为旧的结束和新的开始吧。
既然是工作总结，那么我觉得就应该对工作的流程进行一个复盘，这样可以对工作进行一个很好的检索，找到以前不易察觉到的问题。同时对于一些渴望加入前端的新同学也能熟悉前端的开发流程是如何。
1.从排期开始
一般来说，当pm们完成他们的产品设计后，这个时候他们就会讲原型图画出来，此时会召集负责该项目的所有前后端聚在一起，开一个会来说明他的产品的意图。原型图会用axure等展示出来一个产品的大致功能。
原型图类似这样
开发们至此可以对项目有一个整体的感知，然后产品将原型图交与设计进行美化，最终前端根绝设计图进行还原。但是在这里就会遇到很多的坑，。我注意到很多同事（包括我自己233）对于排期会都不太重视，想着最后用设计图实现即可，就不听pm在这瞎bb了。实际上这种做法非常不好，因为开发的时候会遇到很多设计和pm都没有考虑到的问题，比如这里
是否单选，是否具有hover效果，如果用户提交了错误的信息应该如何处理。前期如果不提出问题，只会增加自己的开发时间，最终导致加班。所以我们应该在排期的时候就把自己当作普通用户把流程走一遍，会遇到什么问题想清楚及时和pm进行沟通。
2. 设计图
得到设计图以后就可以开始按照设计图进行还原，这个地方同样需要注意的和原型图类似，要尽可能的考虑到细节，那些是用户体验上面会遇到的问题，应该如何展示。这些也需要及时和设计师进行沟通。
对于一些图片素材也可以委托设计师帮你裁剪，尽量优化自己的工作流。
3. 制作流程图
这个时候还没有到开始撸码的时候，我们应该制作一个项目详细的流程图，方便自己理清楚逻辑，现代前端并不仅仅对UI进行还原，有时候还需要完成一些后端的工作。例如我之前所在的这家公司，前端还需要自己使用Nodejs对controller层进行设计。
所以使用原型图可以理清楚每一次请求和路由之间的关系。整个项目的逻辑也可以一目了然。
这是我之前做一个项目自己画的流程图，当时一开始并没有制作流程图，觉得逻辑很简单，结果最后才发现逻辑并不简单。
所以一定要养成画流程图的习惯，不一定要非常模式化的去画，而是去画一个你和你的同事都能明白逻辑的图即可。
4.具体实现
这个时候就可以开始你的表演了。
一般来说就是两种情况
- 新项目（需要自己搭建环境）
- 老项目（遵循前辈制定的规则）
先说简单一点的情况，老项目的持续开发。这就是让我们在别人的轮子上面继续跑，一个重点就是仔细阅读readme，一个合格的readme会解答你的大部分问题，所以当跑不起来项目的时候，首先阅读readme是不错的选择。而后才是去询问其他的同事，注意提问的艺术。
差不多可以开始开发的时候，你也许会遇到这些情况。
代码重构
- 觉得代码很烂。
- 觉得代码可优化。
- 觉得这是无用的文件。
但是我的忠告是不要试图去修改别人之前的代码，这要做会带来很多的问题，最严重的是导致功能失效，因为别人这样写的原因是兼容低版本浏览器或者服务器版本/具有语义的语法/一些不这样写会死的暗坑/等等。总之尽量不去修改那些与你无关的代码，如果需要修改，则请及时和代码作者沟通。
功能拆分，组件化
现代前端提倡组件化和代码可以复用，我们应该遵循这一个规则。把功能拆分，做到
- 单一组件处理单一业务
- 复杂逻辑尽量拆封成单一组件拼接。
- 使单一组件具备通用性，可服用。
- 组件具备良好的说明，I/O清晰可见。
简单来说就是小组件应该专注功能的实现，而一些大型的组件由小组件构筑，专注一套完整逻辑实现。
语法规范
尽可能的使你的代码具备可读性，即意味着你的代码清晰而干净，避免反复的嵌套，递归，如果需要用到复杂的语句，及时添加注释。
在每个文件头也写上注释，表明这个组件具备了怎样的功能。
如果项目允许的话，进行eslint检查，推荐使用airbnb的语法规范，你可以在此基础上面完成一个适用于你的项目的规则表，并合同事们一起去遵循它。这样会提高项目代码可读性。
抛出异常时候，仔细的定义你的错误信息，什么地方发什么原因的报错，可以在测试的时候帮你准确定位问题。
代码安全性
这是个老生常谈的话题。需要注意的细节罗列如下
- xss
- csrf
- 注意验证码
之前公司的验证组件和功能接口是解耦的，所以会导致csrf的风险。一个可行的方法是登陆组件提供了一个手机号存入cookie的加密字段，我们在node上面对数据用同样方式加密后将两个加密字符串进行比对，即可实现一个token校验的作用。 - 提交表单
大多数情况是需要当前登录用的的id的，图方便，很多时候直接用了cookie里面的userid，此时，就容易造成在提交表单接口数据中把userid修改成其他任意用户的userid值，造成越权操作。在后端接口上注意使用框架层面userInfo.userId(对存储在cookie中的加密userKey值进行了解码操做)作为当前用户的userid就没问题
一句话，基本防范先做好，敏感操作前台不做，全部在服务端做处理。
构建新项目
考虑到兼容性，同时要用工程化思想来构建项目。在搭建的时候就要考虑到静态资源的处理，组件化等等。
推荐使用工具来打包项目，如webpack和fis等等。
这个有时间会详细补充，因为这是一个系统性的话题，要考虑的点有很多。
5. 上线前准备
到这个时候，就快要完成项目了，这个时候我们的项目应该会部署到测试环境中，这个时候要对公司的运维环境有一个基本的了解，这样可以在遇到问题的时候准确定位是什么环节出了问题，这个地方博主也是吃了很多的亏，经常代码没有问题，但是发布到测试环节的时候各种问题，要考虑一些常见的问题，服务器缓存记得清除，重启node服务器，看看是谁的接口阻碍了功能等等。排除万难后，至此可以完成项目的上线准备工作。
6. 总结
这应该就是一个完整的前端开发流程，也是我一年来工作的主要内容，可能不同公司用的技术和环境不一，但是万变不离其宗。
其实这系列流程每一个点展开都是很大的一门学问，我想做的是通过梳理这个流程，找到工作中还有那些可以优化的点，代码还有什么地方很烂。也算是一种不断提高技术的过程。
网友评论