記一次前端項(xiàng)目重構(gòu)要點(diǎn)總結(jié)

frolc 發(fā)布于2019-08-23 18:29 / 3017人閱讀

摘要：重構(gòu)總共耗時個工作日。第一個重構(gòu)原因就是沒有引入靜態(tài)類型，導(dǎo)致查看一個對象結(jié)構(gòu)需要翻來覆去在多個文件中查找。第三是各個狀態(tài)模塊耦合度高，加大了代碼維護(hù)難度。但如果耦合度過高，往往是因?yàn)槟K沒有細(xì)分到位。這個項(xiàng)目也不列外。

不知不覺已是2019年的7月，恍惚之間已工作四年。懵懵懂懂的成長，間歇性努力，實(shí)話說，對現(xiàn)在自己取得的成果不大滿意。不過，好在時不時頓悟，知道適時作出改變。

此后發(fā)文會適當(dāng)記錄一些心路歷程，與君共勉。

歡迎Star和訂閱我的博客。

本文要點(diǎn)：

什么項(xiàng)目，為何會重構(gòu)？

怎么重構(gòu)的？

重構(gòu)前后對比

什么項(xiàng)目，為何會重構(gòu)？

項(xiàng)目是公司主打業(yè)務(wù)產(chǎn)品之一的可視化子項(xiàng)目，與其他子項(xiàng)目幾乎沒有耦合，所以可以多帶帶拎出來重構(gòu)。具體業(yè)務(wù)不作過多描述，主要重構(gòu)內(nèi)容為系統(tǒng)組件和一個自研可視化圖形庫。重構(gòu)總共耗時30個工作日。

技術(shù)主要用Vue2系列和JavaScript。第一個重構(gòu)原因就是沒有引入靜態(tài)類型，導(dǎo)致查看一個對象結(jié)構(gòu)需要翻來覆去在多個文件中查找。第二是因?yàn)橹靶略龃a模式一般為：“來一個需求加一段代碼”，長期積累導(dǎo)致代碼結(jié)構(gòu)混亂，可讀性差。第三是各個狀態(tài)模塊耦合度高，加大了代碼維護(hù)難度。

怎么重構(gòu)的？

一、在JavaScript中使用TypeScript。“什么？在JS中使用TS? 聞所未聞。 ” 在看到TS官網(wǎng)手冊最后一條"Type Checking JavaScript File"之前，我也這樣想。其實(shí)，TS和VSCode（一款I(lǐng)DE）結(jié)合，也可以實(shí)現(xiàn)靜態(tài)類型檢測，只不過使用注釋形式，一樣支持tsconfig.json和自定義Typing。

type TypeApple = { name: string, count: number }

/** @type {TypeApple} */
const apple = { name: "foo", count: 100 }

二、細(xì)化模塊分類。一般情況下，模塊都會有耦合。但如果耦合度過高，往往是因?yàn)槟K沒有細(xì)分到位。如果細(xì)化模塊？舉例，假如有一個模塊叫Operation，里面既包含操作相關(guān)邏輯，也有操作面板邏輯。隨著業(yè)務(wù)發(fā)展，操作面板邏輯越來越多。我們完全可以將操作面板邏輯多帶帶抽成一個模塊OperationPanel。

三、解耦可視化庫和Vue/Vuex。寫業(yè)務(wù)的時候，很容易因?yàn)榉奖悖赩ue組件或Vuex模塊中代碼越寫越長，越來越難維護(hù)。這個項(xiàng)目也不列外。所以重構(gòu)的時候，多帶帶將可視化庫相關(guān)邏輯抽成模塊，并使用類Vuex寫法(state, getters, mutations, actions)進(jìn)行管理。

class Counter {
  // # state  
  /** @type {number} */
  count = 0

  // # getters
  get countText() { return `Count is: ${ this.count }` }

  // # mutations
  /** @param {number} count*/
  SET_COUNT = count => { this.count = count }
  
  // # actions
  /** @param {number} count*/
  logCount = ( count ) => {
    this.SET_COUNT( count )
    console.log( this.countText )
  }
}

四、最后一條，編寫可維護(hù)性高的代碼。這里說兩個方法。

第一個是“使用Map”。處理“一個有多類型的數(shù)據(jù)”需要使用判斷，常見有3種方法：If, Switch, Map。If的使用簡單粗暴，容易理解。

if ( animalType === "dog" ) {
    console.log( "Wang!" )
} else if ( animalType === "cat" ) {
    console.log( "Miao!" )
} else if ( animalType === "bird" ) {
    console.log( "Jiu!" )
}

Switch可以看做是If的簡化。

switch ( animalType ) {
    case "dog":
      console.log( "Wang!" )
      break
    case "cat":
      console.log( "Miao!" )
      break
    case "bird":
      console.log( "Jiu!" )
      break
}

而Map針對性最強(qiáng)，并且最簡潔、最易于維護(hù)。

const logMap = {
    dog: () => console.log( "Wang!" ),
    cat: () => console.log( "Miao!" ),
    bird: () => console.log( "Jiu!" ),
}
logMap[ animalType ]()

具體使用也哪一種因場景而異，但多數(shù)場景下，使用Map可讀性更強(qiáng)。

第二個是“使用getters和mutations”。比如定義一個模塊的`：operationGetters.js`, 里面提供各種用來獲取與操作有關(guān)的常量和方法。

export const OPERATION_TYPE_A = 0
export const OPERATION_TYPE_B = 1

export const OPERATION_TITLE_MAP = {
  [ OPERATION_TYPE_A ]: "Title A",
  [ OPERATION_TYPE_B ]: "Title B",
}

export const getOperationTitleByType = type => OPERATION_TITLE_MAP[ type ]

定義mutations則是定義一個提供相關(guān)各種變更數(shù)據(jù)方法的文件。在維護(hù)代碼的時候，查找變更方法名即可直接找到更改數(shù)據(jù)的出處。

export const SET_OPERATION_TITLE = ( operation, title ) => { operation.title = title }

重構(gòu)前后對比

代碼類型	重構(gòu)前	重構(gòu)后
可視化工具庫	245kb	214kb
組件	171kb	157kb
狀態(tài)管理	62kb	60kb
模塊模型	15kb	19kb
服務(wù)請求	12kb	4kb
常量	18kb	22kb
工具（Utils）	15kb	19kb
靜態(tài)類型（TypeScript）	0kb	9kb
合計(jì)	521kb	509 kb