美文网首页
jquery系统重构为Vue框架心得

jquery系统重构为Vue框架心得

作者: 挣钱养豆豆 | 来源:发表于2019-03-03 15:23 被阅读0次

    0、前言

        为配合公司中台体系微服务体系构建,去年年底,被告知要做逐步将所在项目组的PC端系统,做成前后端分离形式。原系统是基于jquery + bootstrap框架的物流在线协同平台,分为两个端,货主和承运。根据优先级和重要性,初步先重构承运端。系统有点类似管理系统,有很多数据查询,导出,特异性的地方就是基于地图的路线查询,规划之类。原系统引用了jquey的多个第三方插件库,以及为了实现业务方便,封装的jquery插件,如地址选择插件,数据字典下拉选择插件,表格数据选择弹窗插件等。

        说干就干,12月底对原系统进行了分析,评估了大概的工期。过完元旦,就开始动工。整个开发周期,中间有退出和加入的,但整体的生产力是4人,单页面50个,接口210左右。1月4日-1月18开发视图和梳理接口,1月18后开始联调写业务逻辑。年前集成Jenkins,部署了测试环境,并做了阶段性总结。年后,2月21部分提测,2月28全部提测,开发时间应该是一个半月,代码量至少减少了50%,文件个数至少减少60%,打包后有5M。整个过程,技术和内心均有所成长,希望这些成长能有所共鸣。

    1、苟周于事,不必循俗

        一开始让做这个事情的时候,我很乐观,觉得很简单,结果一开始就碰了点问题。过完元旦,我找产品要需求文档,结果没有完整的需求文档,有的是迭代需求的子文档,突然感觉有点虚;UI这边呢,一开始觉得任务是前后端分离,用什么UI应该没关系,我调研了一些第三方的框架,后来听说公司自己写了一个基于VUE的UI组件库,就否定了之前用第三方UI框架的设想。公司从设计规范到开发组件库,花了不少的人力,用第三方也不符合公司统一UI层的设想,当然得用自己的,也能推动组件库的推广使用。但是当我拿到组件库使用文档的时候,才发现,只是一些基础的通用设计。我们的系统有些功能,估计要自己写组件了。

        领导说要三月底前完成,如果让产品再补需求文档,显然是不现实的了,等写完文档,再开发就只能唱一首凉凉送给自己了。还好开发是可以看原代码逻辑的,只是可能费点事情,得先看懂原来的业务逻辑,再开发。UI组件库缺少,等他们再设计规范开发,也是不可控因素,有一定的风险。最后和设计沟通了一下,决定采用统一UI框架,只是没有的部分,就保持和现有系统一样,我们自己开发UI组件。

        “苟周于事,不必循俗”,只要适合实际情况,有助于事情成功,就不必一定要遵循旧法。变革创新是推动社会向前发展的根本动力,只有不断解放思想,持续改革创新,才能将想法变成现实,将事情不断推向前进,但是变革创新往往需要很大的决心,得先行动起来。


    2、不谋全局者,不足谋一域

        开始前,研发经理让我评估工期,我觉得两个熟悉VUE的人,一个月差不多就能做完了。这主要是因为我到这个项目组刚3个月(从别的项目调过去的),也一直做新需求,对旧系统其实不算太熟悉。评估工期的时候,我就把菜单页面统计了一下,然后按照自己的开发生产率,得出了结果。后来做的时候,发现有挺多页有很多弹窗以及跳转子页,有两三个页面业务逻辑也比我想的复杂。再加上没有需求这个事情,所以就有些风险。

        还好研发经理给协调了三个前端来一起开发,其中一个参与开发了统一组件库,在开发中,为我们解决了不少使用组件库时遇到的问题。人员到齐后,1月3号,大家开了一个站会,定了实施步骤,第一步搭项目框架,把基本功能和文件都先建好(1.4);第二步分工开发视图和梳理接口(1.7-1.18);第三步联调接口(1.18-2.28);第四步提交测试改bug(3.1-3.30),第五步发布总结。

         大的任务粗略拆分后,就是每个阶段性任务的细分。基本上是以周为单位,根据进度情况,及时调整分工,确保关键节点没问题。后来研发经理说不能等到3月底发布,要提前到20号左右,所以先部分提测一部分,让测试和开发有一段时间并行,缩短整体时间。

       “不谋全局者,不足谋一域”,一旦有了这么清晰的规划,组内成员并达成了共识,大伙做起事情来就有了方向和目标,也都会竭尽全力为了共同的目标努力。这一俩月晚上基本上都会自愿加班一会儿,这让我明白其实大家都是都是有敬业和奉献精神的,只要彼此相信,每个人都是好员工。


    3、天下难事,必作于易,天下大事,必作于细

        由于一开始4个前端,只有我一个人对系统熟悉,他们三个都不了解,如果直接边写页面,边调接口,恐怕有点难度,怕大伙知难而退,没了信心。但是写页面不涉及业务,也可以在写页面的时候,熟悉系统,而接口这边就让后台并行帮忙整理。凡事先从容易的干嘛。

        旧系统虽然是JSP混合开发,但页面渲染基本还是按照ajax请求的方式。所以前后端分离,旧系统的接口还是可用的,基本不需要动。研发经理让一两个后台配合我们梳理接口。我们写页面的时候,后台的兄弟给我们梳理每个页面都用了哪些接口,出参入参都是哪些,这些工作其实是很枯燥的,但他们都很配合细心地做好,为我们之后调接口,节省了不少时间,同时将接口分离出去,单独做了一个文件夹,也方便后期统一管理接口,对接口进行中间件的处理。

        “天下难事,必作于易,天下大事,必作于细”,万事开头难,但一旦开始了,就可以先做简单的,依赖关系中优先级高的。很多时候,先做易,更容易增加信心,给自己做下去的动力,一开始就进入困难的泥潭,纠结于细节,那就无法踏出去,走下去。而细节处见成败,只有把每一件小事都作于细,才能保证依赖小事的大事做好,不会拖后腿。


    4、纸上得来终觉浅,绝知此事要躬行

        用VUE开发PC端系统,之前在别的项目上用过,只是那时新项目,功能点也不多。这个项目是一个完整的系统重构,页面较多,业务逻辑也复杂。在这过程中,VUE的很多实践用法都是第一次用到,书本上看到的,如果不加以运用,不会对其有更深的理解。这就是所谓“行之力则知愈进,知之深则行愈达”中将的“知”和“行”的关系。我们最初总是根据自己当时的理解来行动、来实践的,随着实践的深入,人的知识会增长,认识也会更加精进。

        过滤器,混合,VUE的数组和对象直接赋值不更新视图,以及VUE的列表遍历缓存等,都是这次实践中的成长,“知”是让我们知道有这个东西,“行”是让我们理解这个东西。古人云,“纸上得来终觉浅,绝知此事要躬行”也是这个道理。只有不断学习积累才能拥有更好的判断力和快速解决问题的能力。


    5、独学而无友,则孤陋而寡闻

        本次项目,最大的收获是让我意识到合作的强大。我工作时间其实也不短了,但前几年几乎都是单枪匹马。第一家单位业务扩展,基本上都是一人负责一个项目,等我快离职的时候,领导让我带着两个刚毕业同事干活,当时就是觉得是授人,且那时还处于认知的第一层次“不知道自己不知道”的阶段。后来做的工作,基本都是迭代需求了,一个人就能搞定的。

        实施过程中,我们几个有很多交流,不管是技术还是解决问题方案,都在沟通中碰撞出灵感。这也让我意识到了认知的第二层次“知道自己不知道”,怀有敬畏之心。比如碰到接口参数是同KEY时,拼参数问题;比如VUE列表缓存问题,比如过滤器使用;比如旧系统查看图片是直接src配置url,而新系统只能通过接口,并将图片流转化为图片;比如组件写完后,其他人用的时候,觉得还可以进行优化的时候;这些问题,如果是自己一个人遇到,或许解决要费些时间。

       “独学而无友,则孤陋而寡闻”,不管做什么,都应该多交流,方可共赢共成长。上学时候,实验室团队就有定期学习新技术,相互报告的习惯;现在这个项目组,也会定期分享,大家都通过这种总结分享,收获颇多。

        庆幸遇见。


    6、艰难困苦,玉汝于成

        年前总体进度为75%,剩下的这些需要节后2月份尽快搞完。过完年,有几个同事回来晚些,又让事情有些紧迫感。古语有云“行百里半九十”,意思是一百里的路程,走了九十里也只能看作走完了一半。万事都有个开始,但很少能够善始善终的,最后一段路程才是最困难的。

        在部分提测后的那周,不知道为什么,本想那周收尾的开发工作,结果大伙都没完成。在开发和测试的过渡阶段,往往会有些阻碍开发进展的事情。比如一开始没有连网关,这次提测连网关,结果登录有问题。一开始因为内网接口不通,后来又因为session的原因,导致登录后,获取不到用户。接口时好时坏,试了挺久,暂时决定先不连网关,让后台看一下原因。配合后台看问题,配合测试熟悉新系统,解决她们的疑问,耽误了一些开发工作。

        一想到正式测试时,边改bug,边开发效率会低,那收尾就很难了。于是就决定周末加一天班,基本完成开发任务,那工作日就会轻松很多。大家基本上一刻不停开发了,都想着赶快完成。不知道是不是人都有这种马上就要完成时的些许放松,而这就是成败的关键。而此刻,我们已经处在测试的关键时期,虽然没有开发时候紧张,但依然不能轻松,希望能不忘初心,坚持到最后一刻。

       最后,用孔老夫子在《大学》中曾讲过的:“知止而后定,定而后能静,静而后能安,安而后能虑,虑而后能得”来结束吧。做一件事情,事前要精心谋划,做事时要勤奋,付出艰苦的努力,还需要时时小心在意,谦虚谨慎。因为接近成功或已经成功时,往往因为骄傲懈怠而功亏一篑。

    相关文章

      网友评论

          本文标题:jquery系统重构为Vue框架心得

          本文链接:https://www.haomeiwen.com/subject/jropuqtx.html