导火索
需要给所有查询页面加上筛选条件缓存功能，查看了一下现有代码，发现每个页面都有大量冗余的关于本地存储和远端存储的代码，并且每个页面的存储逻辑都略有不同，想了半天，愣是一行代码没写下去。我离开座位，就一直想，到底是什么东西在妨碍我，最后所有矛头都指向一点——缺少通用流程。
思考原因
缺少沟通
项目在产品阶段时，定位的是一个实施查询平台，其中有多个查询页面，每个页面的查询功能点不同，我跟另一个小伙伴一人负责一个查询页面的开发。由于时间紧任务重，我们没有做好项目的整体规划，没有制定规范，就直接开撸代码，在一开始就给自己挖了一个大坑。
缺少经验
当时我还在实习，只做过一些小项目，不管是对框架的理解，还是在项目的经验上，都有硬伤，体现在:
- 过度组件，可能有一种“就不应该出现原生HTML，只要出现了都要封装成组件”的疯狂想法，为了封装而封装，导致页面最后变得稀烂，光找组件就得找半天。
- 没有全局观，写代码的思路仅局限在当前页面，没有考虑到全局的一些通用流程。
- 对框架的理解不够深入，很多用法都是参照开源项目照葫芦画瓢，没有自己的思考在里面。
重构需要覆盖的内容
重构应该针对局部的内容做针对性的代码重写，这样才能保证安全且高效，这一点对大型项目尤其重要。我就在这里栽了跟头，这次重构的项目已经十分复杂，而我愣是硬着头皮重写了80%的代码，一次性重构了多个功能点，导致重构后的变化点暴增，甚至一度让我觉得我已经控制不过来了。同时，过多的功能变化也给测试带来了很大的麻烦，需要耗费大量时间做一次整体的回归测试。这也是重构项目上线后的第一周，bug频现的主要原因。
所以，重构之前必须要想好本次重构的功能点，最好针对某一个功能点做单独的重构，而不是一次性的重构多个功能点。
重构思路
这次重构的核心工作就是抽离冗余逻辑到全局的通用流程，充分利用：
- Vue-router的hooks
- Vue的mixin
- Axios的interceptors
- Vuex和localStorage的无缝结合
以此，像一个系统一样，为整个项目提供通用的处理流程
后知后觉
后悔没有先读《重构—改善既有代码的设计》这本书，如果我知道：
- 尽量重构而不是重写，需要克制重新写一遍的冲动
- 重构时每次只做一件事，避免涉及到多个功能点
我就不会一时冲动把80%的代码重写，也不会一次重写多个复杂功能点
扫描二维码关注公众号，回复：
5161985 查看本文章
