Skip to main content

[筆記] 重構 vue project

為何要重構？​

閱讀完 explain this 的重構文章後，我自己決定練習重構專案的原因：

  1. 檢視自己的程式碼進步狀況
  2. 試著以提高可讀性、好維護、更好的效能 的視角來優化
  3. 這個專案很小，很適合入門練習

重構方式​

我會附上重構前後程式碼進行比對，在重構的過程若有遇到值得複習、不清楚的概念會記錄下來，以下是主要步驟：

  1. 圖解架構及各個架構的功能
  2. 更新專案打包工具 webpack -> vite
  3. 為重要功能加入單元測試 (Vitest)
  4. 以頁面為單位去針對程式碼進行重構（並且記錄下程式碼重構的原因）
  5. 以 Typescript 進行編寫

為何要撰寫單元測試​

重構最簡單可以理解是「不影響功能運行下調整優化程式碼」的行為，透過撰寫測試我們可以更加確保功能運作正常，但每個專案內都有許多功能，如何選擇測試功能也是一門學問。

以下是我得出需要測試的重要功能：

  1. 高頻率使用/核心功能：所謂的核心功能可以是指「攸關網站營收」、「現在未來主要發展」的功能，像是以後台系統來說，排除 API 不正常的情境，搜尋、圖表顯示功能都是非常重要的，常見識別核心功能的方法可透過 Google Analysis, Meta Pixiel 埋點，來統計、追蹤使用者使用行為。
  2. 異常狀態處理：像是在 API 資料回來前要顯示的載入效果、或是載入失敗的錯誤畫面顯示，都可以算在這類。

測試方法​

重構記錄​

圖解專案架構​

圖片說明的是專案架構、內部包含的元件以及元件概要的功能說明

是否全面改寫 compositionAPI?​

首先發現這個專案目前是使用 optionAPI 進行撰寫，要決定專案是否翻新前，先檢視當時開發的時空背景：

製作這個專案時，我算是初次入門 vue，當時職場上主流需求還偏向 vue2 ，optionAPI 架構較為類似 vue2

大致確認了沒有特別的理由後，就可以單純以程式面來比較，經過 research 加上自己開發經驗得出以下的結論：

  1. 以 compositionAPI 開發，可以將同個功能的狀態與功能函式聚集，而 optionAPI 則因為架構規範無法做到這件事，隨著專案體積擴大，功能維護的容易性越差越多，如同官方文件的比較圖

  1. 相關生態系與 Typescript 的支援程度，因為後續想以 typescript 進行改寫。

綜合上述兩點，確認要翻寫。