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

导火索

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

思考缘由

缺乏沟通

项目在产品阶段时，定位的是一个实施查询平台，其中有多个查询页面，每一个页面的查询功能点不一样，我跟另外一个小伙伴一人负责一个查询页面的开发。因为时间紧任务重，咱们没有作好项目的总体规划，没有制定规范，就直接开撸代码，在一开始就给本身挖了一个大坑。

缺乏经验

当时我还在实习，只作过一些小项目，无论是对框架的理解，仍是在项目的经验上，都有硬伤，体如今:

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

重构须要覆盖的内容

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

因此，重构以前必需要想好本次重构的功能点，最好针对某一个功能点作单独的重构，而不是一次性的重构多个功能点。

重构思路

此次重构的核心工做就是抽离冗余逻辑到全局的通用流程，充分利用：

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

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

后知后觉

后悔没有先读《重构—改善既有代码的设计》这本书，若是我知道：

1. 尽可能重构而不是重写，须要克制从新写一遍的冲动
2. 重构时每次只作一件事，避免涉及到多个功能点

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