对X系统第一期已接近尾声，分为商户端和后台管理系统，我负责两个端的前端开发工作，记录一下整个过程中遇到的问题与经验。
项目回顾
需求确定与排期，前松后紧
-
从11月中旬开始讨论项目，大致确定项目周期为9周。
-
后因需求迟迟确定不下来，项目周期又改为无固定期限,确定一部分开发一部分
-
商户端在春节前完成
-
春节后产品似乎有些着急，压力之下，2周时间完成了后台管理系统的开发，但实际工作量要比商户端大的多
回顾整个周期节奏，产品前期固然存在着需求难定的情况，但前端在开发过程中，基于步步确定的需求以及无固定期限的周期，思想也有些松散，在工作上就有种不紧不慢的心态，也是导致了后面的开发任务紧张的原因。这也是在之后项目中需要注意的情况。
文档清晰的重要性，沟通的技巧
- 接口文档条理不够清晰，找接口不好找，几十个字段无备注，需要总和后端沟通此类问题。后端丢过来一个数据表结构，让前端来一一对应，也非常的蛋疼。
- 产品原型改了不知道几版，最后改的与原型有些也不对应，口头的说了就改了。 导致的问题是可能测试时候就会有一些争议，多少都会影响一些，比如时间，心情。
从他人身上看到这些问题，其实自己也有类似的问题，比如代码的注释是否清晰，无用的代码是不是能清理了。 这些问题出现的时候，心情总是不大好的，由其是在赶进度的情况下，来回的问不大耐烦，但同时也考验怎么能不撕破脸，又能让对方把问题给解决了，这也是处理问题的能力，涉及到情商需要提高的部分。
减少不必要的会议
从前期的需求论论会，到后期的bug确认会，我感觉都存在着一些不是很必要的会议。例如产品在与后端确认功能需求时，例如在bug确认时，要把从产品到每一个开发，测试都一起开会讨论，一起开会的目的是了解bug分工，或者是否产品需求有疑问，但数量较多的bug和商确不定的需求常常会占用很长时间，长则2-3小时，短则1小时。跟产品提过这个问题，遇到问题，单独找相关的人语音沟通即可。会议可以帮助我们了解业务，但过长的或有些无关的会议，实则浪费了一些人的时间。
经历安全测试，上线周期长
这是经历过的第一个前端项目进行了安全测试，比想象中的时间要快，并且顺利。证实了内网的ip绑定host也是可以走安全测试的。从测试完成到上线大约有一个月的时间，中间业务方的使用提用又提出多次修改，这也是上线周期长的原因。昨天第一版终于上线 :)。
技术体会
拿捏组件颗粒度，订制化传参更灵活
基于可复用，方便维护的需要，常常需要把一些功能提练组件，但这个颗粒度的把握，每个人有不同的感受。有人喜欢大块的，一个组件里完成功能的实现；有的人喜欢较碎的粒度，越小的颗粒度组合起来就更方便，更灵活。
我个人不是很喜欢太碎的粒度，一个组件套一个组件，追了很多层到最后可能都忘了最初是想干什么。在业务开发过程中，尽量能在一个组件里完成的功能，不去做更多的分离，或者在前期的评估中预设好那些颗粒度较小的组件，但如果一般没有重复出现的场景，我更顷向于大颗粒一些，缺点是在以后的开发需求中，如果有遇到小颗粒的重复场景，就要现抽组件，可能就要影响现在的测试范围。
这次在后台系统，就出现了上述的情况，search bar出现的频率高，bill、account模块都是不同字段的组合，于是将重复的字段都封装到一个search bar中，调用时只用传字段名即可。但后来又发现不同的后端人员对同一个名字的字段名也不统一，还有其它不能够满足的情况，于是又改写search bar，提出与业务粘合性高的组件，再加入支持传入控件name,type,placeholder等属性，可自由组合，自动来生成一个search bar，目前基本上能满足所有页面的情况，但功能 与之前封装的已有字段部分其实是有重复的，时间关系没有去删除原有的配置，后期开发过程中再不断的完善。
对于这个颗粒度的把握，还是需要在开发过程自己去体会的，时间越长，越能够感受到哪种大小更合适。
加入nginx多环境配置管理
前后端分离项目，对于跨域的请求经常由nginx代理来完成。测试时又有dev、test、beta、prod环境，不同环境下代理的后端域名又不一样，如果测试时对于多个后端， 一会儿要改成这个域名，一会儿要改成那个域名，nginx内容修改，需要再去开发机上去修改每个nginx的配置，改动的次数多时，不胜其烦。
于是想到自己忽略了linux上一个叫作link的东西，把nginx不同环境的配置（如：nginx.demo.conf, nginx.beta.conf）加入到项目管理中，在开发机上第一次配置nginx时，用link来链接到项目所在位置的nginx文件，每次发版时，nginx会随项目代码一起更新，减少了上面再去开发机上修改nginx的繁锁。
ant-d-pro的使用
umi默认使用ant-d-pro，但遇到一些和默认情况显示不一样的需求，更改配置去要重新花时间去了解ant-d-pro的api，其中PageHeaderWrapper中title无法配置隐藏，源码中title为空时则显示为项目title，最终用css隐藏了这个title。
熟悉过一遍后，再有ant-d-pro的项目，查api更容易一些。
下一期todo
-
后台管理系统横向滚动条无滚动条时的显示处理
-
页面中使用同一Form组件，传入不同参数时，组件内使用useEffect时，执行顺序还没有理清
-
ant-d中的row的justify属性不生效，另一个在做的项目在使用umi3，看情况、时间关系等是否升级umi3，或者是升级ant-d。
