導火索
需要給所有查詢頁面加上篩選條件快取功能，檢視了一下現有程式碼，發現每個頁面都有大量冗餘的關於本地儲存和遠端儲存的程式碼，並且每個頁面的儲存邏輯都略有不同，想了半天，愣是一行程式碼沒寫下去。我離開座位，就一直想，到底是什麼東西在妨礙我，最後所有矛頭都指向一點——缺少通用流程。
思考原因
缺少溝通
專案在產品階段時，定位的是一個實施查詢平臺，其中有多個查詢頁面，每個頁面的查詢功能點不同，我跟另一個小夥伴一人負責一個查詢頁面的開發。由於時間緊任務重，我們沒有做好專案的整體規劃，沒有制定規範，就直接開擼程式碼，在一開始就給自己挖了一個大坑。
缺少經驗
當時我還在實習，只做過一些小專案，不管是對框架的理解，還是在專案的經驗上，都有硬傷，體現在:
- 過度元件，可能有一種“就不應該出現原生HTML，只要出現了都要封裝成元件”的瘋狂想法，為了封裝而封裝，導致頁面最後變得稀爛，光找元件就得找半天。
- 沒有全域性觀，寫程式碼的思路僅侷限在當前頁面，沒有考慮到全域性的一些通用流程。
- 對框架的理解不夠深入，很多用法都是參照開源專案照葫蘆畫瓢，沒有自己的思考在裡面。
重構需要覆蓋的內容
重構應該針對區域性的內容做針對性的程式碼重寫，這樣才能保證安全且高效，這一點對大型專案尤其重要。我就在這裡栽了跟斗，這次重構的專案已經十分複雜，而我愣是硬著頭皮重寫了80%的程式碼，一次性重構了多個功能點，導致重構後的變化點暴增，甚至一度讓我覺得我已經控制不過來了。同時，過多的功能變化也給測試帶來了很大的麻煩，需要耗費大量時間做一次整體的迴歸測試。這也是重構專案上線後的第一週，bug頻現的主要原因。
所以，重構之前必須要想好本次重構的功能點，最好針對某一個功能點做單獨的重構，而不是一次性的重構多個功能點。
重構思路
這次重構的核心工作就是抽離冗餘邏輯到全域性的通用流程，充分利用：
- Vue-router的hooks
- Vue的mixin
- Axios的interceptors
- Vuex和localStorage的無縫結合
以此，像一個系統一樣，為整個專案提供通用的處理流程
後知後覺
後悔沒有先讀《重構—改善既有程式碼的設計》這本書，如果我知道：
- 儘量重構而不是重寫，需要剋制重新寫一遍的衝動
- 重構時每次只做一件事，避免涉及到多個功能點
我就不會一時衝動把80%的程式碼重寫，也不會一次重寫多個複雜功能點