jquery系统重构为Vue框架心得

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

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