阅读 1595

重构Vue项目的通用处理流程

导火索

需要给所有查询页面加上筛选条件缓存功能,查看了一下现有代码,发现每个页面都有大量冗余的关于本地存储和远端存储的代码,并且每个页面的存储逻辑都略有不同,想了半天,愣是一行代码没写下去。我离开座位,就一直想,到底是什么东西在妨碍我,最后所有矛头都指向一点——缺少通用流程。

思考原因

缺少沟通

项目在产品阶段时,定位的是一个实施查询平台,其中有多个查询页面,每个页面的查询功能点不同,我跟另一个小伙伴一人负责一个查询页面的开发。由于时间紧任务重,我们没有做好项目的整体规划,没有制定规范,就直接开撸代码,在一开始就给自己挖了一个大坑。

缺少经验

当时我还在实习,只做过一些小项目,不管是对框架的理解,还是在项目的经验上,都有硬伤,体现在:

  1. 过度组件,可能有一种“就不应该出现原生HTML,只要出现了都要封装成组件”的疯狂想法,为了封装而封装,导致页面最后变得稀烂,光找组件就得找半天。
  2. 没有全局观,写代码的思路仅局限在当前页面,没有考虑到全局的一些通用流程。
  3. 对框架的理解不够深入,很多用法都是参照开源项目照葫芦画瓢,没有自己的思考在里面。

重构需要覆盖的内容

重构应该针对局部的内容做针对性的代码重写,这样才能保证安全且高效,这一点对大型项目尤其重要。我就在这里栽了跟头,这次重构的项目已经十分复杂,而我愣是硬着头皮重写了80%的代码,一次性重构了多个功能点,导致重构后的变化点暴增,甚至一度让我觉得我已经控制不过来了。同时,过多的功能变化也给测试带来了很大的麻烦,需要耗费大量时间做一次整体的回归测试。这也是重构项目上线后的第一周,bug频现的主要原因。

所以,重构之前必须要想好本次重构的功能点,最好针对某一个功能点做单独的重构,而不是一次性的重构多个功能点。

重构思路

这次重构的核心工作就是抽离冗余逻辑到全局的通用流程,充分利用:

  1. Vue-router的hooks
  2. Vue的mixin
  3. Axios的interceptors
  4. Vuex和localStorage的无缝结合

以此,像一个系统一样,为整个项目提供通用的处理流程

后知后觉

后悔没有先读《重构—改善既有代码的设计》这本书,如果我知道:

  1. 尽量重构而不是重写,需要克制重新写一遍的冲动
  2. 重构时每次只做一件事,避免涉及到多个功能点

我就不会一时冲动把80%的代码重写,也不会一次重写多个复杂功能点

关注下面的标签,发现更多相似文章
评论