今天找文件的时候突然发现了一枚总结文档,觉得有必要留存,以防下次找不着就一不小心发了这篇,哈哈哈
一直做后台管理系统,采用react前后端分离,以接口的形式相互交流,猝不及防得来了三个页面开发,然后:
项目概况:二月开始接手A项目,该项目由前端写静态页面,php开发嵌套数据的形式展现,为期一个月,给前端时间为两周,然后交付到数据嵌套的人员;三月中旬开始接手B项目,该项目有两个端,支付宝端C端以及后台管理平台,这两个项目统统由前端写静态页面,java来嵌套数据。
项目详情:
1.A项目:由于一直没有好好的啃过bootstrap,对于这个有点熟悉又陌生,使用过但是都是别人已经搭好整体框架,自己在那个框架的基础之上进行修改调整迭代需求,也就是粘过来删删改改。于是最开始没想要运用这个,试图自己从0开始写页面,当然也是觉得这个框架不够轻便,有很多的强大的功能,自己又用不上那么多,比如优雅的响应式,觉得蛮累赘的。技术选型的时候有同事推荐bootstrap:有小组件可以拿过来直接使用比如弹框。表单等,还有就是兼容性会不需要我们自己来考虑,针对我觉得这个比较大型累赘的想法,提议一张图片就比这个框架大得许多了。
对于网站类项目经验缺乏,然后又是第一次自己一个人担任一个完整的前端,没有一点儿懈怠,就开始了bootstrap的摸索之路。开始写demo实验,差不多试验了两天把头部尾部等公共部分完成,写好了一个页面。在试验响应式的时候,没有手机端页面设计,然后做起来也花费大量时间经历,结合产品方面的需求,最后决定将页面宽度定位1200px,大于时左右留白显示,小于时将允许出现滚动条。由于是官网的项目,测试了各浏览器的兼容性都没问题,最后测试结果表明基本没有兼容性问题。
对于文件的结构纠结了一段时间,一开始给每个页面都写了一个样式文件,但是请求这么多样式文件也是很消耗资源的,有的页面样式添加的还是蛮少的,到后来就把自己写的全部样式文件都写入到了一个文件里面index.css有大概50k的样子。
2.支付宝C端:根据之前支付宝生活号的开发,便于后期统一管理维护,于是借鉴了他们采用的技术,采用antUI组件,所有新增样式差不多22k的样子,对于手机端还是蛮好用的,手机端的常用组件基本上都有,在支付宝里面也不会存在兼容性。
3.后台B端:本来特别想争取这个项目用react那一套来做的,antDesign功能全面,系统可维护性高。但是现在这个项目时间紧急,前端这边抽不出更多人手,我一个人负责两个端页面开发已经够呛,于是java组抽出人手来做嵌套的工作。最后这个项目根据metronic.bootstrap框架来做,一个基于bootsrtap的成熟框架。
存在的问题:
1.常用的控件应该积累起来,到时候要用了直接取过来用。控件比如:时间选择,分页,输入匹配,轮播,弹框,弱提示,等等
2.对于框架里面的样式我们是直接重写,还是自己再取class来覆盖掉
3.UI设计跟框架出入较大,调整内容较多。
4.交付之前总是很想尽善尽美,但是一交付出去就出现问题,这次一连三个项目都这样,同类型的技术形式没有放一起总结。嵌套形式的完整交付必须包括:页面没有遗漏,错误页面,表单验证机制,通用的报错提醒,弱提示,弹框的用法。
解决问题:
1.针对控件的积累问题,在查找控件的时候发现一个好办法,那就是把平常的好用的控件都放到一个地方集中管理,推荐放到GIthub找的时候比较方便不用电脑里死找文件。借鉴一些好的做法,然后自己写写,自己写的用起来肯定更加顺手,有些控件基本上每个系统会出现,更加得自己动手去写,理解其中的原理。
2.在项目中采用的方法是,在自己的class下覆盖框架内部。
3.尽量避免UI在前端之前介入产品,尽量在技术框架选定之后再去进行针对性的UI设计,不然会有很多调整,重写。
4.***important***页面一般不会落下,下次嵌套项目进行之前,首先把基础设施建好,可行性demo,错误页面,表单验证机制,通用的报错提醒,弱提示,弹框的用法,在这些全部完成的情况下再去动手写页面,预防最后匆匆交付然后遗漏了。
总结:三种框架之前都没有用过,能在项目开始之前写可行性demo,在技术选型的时候听取同事提出的的建议,在A项目前台开发的时候,推荐的bootstrap获得良好的兼容性,antUI是借鉴之前支付宝生活号的开发方式,B端选型的时候在项目经理确定只能出静态页面时,采用原来php开发人员用的metronic.bootstrap。
之前一直很恐惧的用插件框架,感觉无法驾驭,担心用着不完全符合需求,后期自己不会改,这次之后,能自己动手找到问题所在,然后进行调整(A项目轮播,带户型说明等),一步一步摸索,变得不那么害怕新的东西,也不那么害怕自己一个人去整理规划整个项目了。