記一次前端項目重構要點總結

不知不覺已經是2019年的7月，恍惚之間已工做四年。懵懵懂懂的成長，間歇性努力，實話說，對如今本身取得的成果不大滿意。不過，好在時不時頓悟，知道適時做出改變。

此後發文會適當記錄一些心路歷程，與君共勉。

歡迎Star和訂閱 個人博客。

本文要點：

1. 什麼項目，爲什麼會重構？
2. 怎麼重構的？
3. 重構先後對比

什麼項目，爲什麼會重構？

項目是公司主打業務產品之一的可視化子項目，與其餘子項目幾乎沒有耦合，因此能夠單獨拎出來重構。

具體業務不做描述。技術主要用的是Vue2系列和JavaScript，還有一個自研的可視化工具庫。第一個重構緣由就是沒有引入靜態類型，致使查看一個對象結構須要翻來覆去在多個文件中查找。第二是由於以前新增代碼模式通常爲：「來一個需求加一段代碼」，長期積累致使代碼結構混亂，可讀性差。第三是各個狀態模塊耦合度高，加大了代碼維護難度。

怎麼重構的？

1、在JavaScript中使用TypeScript。「什麼？在JS中使用TS? 聞所未聞。 」 在看到TS官網手冊最後一條"Type Checking JavaScript File"以前，我也這樣想。其實，TS和VSCode（一款IDE）結合，也能夠實現靜態類型檢測，只不過使用註釋形式，同樣支持tsconfig.json和自定義Typing。

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

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

2、細化模塊分類。通常狀況下，模塊都會有耦合。但若是耦合度太高，每每是由於模塊沒有細分到位。若是細化模塊？舉例，假若有一個模塊叫Operation，裏面既包含操做相關邏輯，也有操做面板邏輯。隨着業務發展，操做面板邏輯愈來愈多。咱們徹底能夠將操做面板邏輯單獨抽成一個模塊OperationPanel。

3、解耦可視化庫和Vue/Vuex。寫業務的時候，很容易由於方便，在Vue組件或Vuex模塊中代碼越寫越長，愈來愈難維護。這個項目也不列外。因此重構的時候，單獨將可視化庫喜好那個管邏輯抽成模塊，並使用類Vuex寫法(state, getters, mutations, actions)進行管理。

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 )
  }
}

4、最後一條，編寫可維護性高的代碼。這裏說兩個方法。

第一個是「使用Map」。處理「一個有多類型的數據」須要使用判斷，常見有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針對性最強，而且最簡潔、最易於維護。

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

具體使用也哪種因場景而異，但多數場景下，使用Map可讀性更強。

第二個是「使用getters和mutations」。好比定義一個模塊的`：operationGetters.js`, 裏面提供各類用來獲取與操做有關的常量和方法。

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則是定義一個提供相關各類變動數據方法的文件。在維護代碼的時候，查找變動方法名便可直接找到更改數據的出處。

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

重構先後對比

代碼量減小了快一半，性能顯著提高，最重要的是代碼可讀性、可維護性大大加強，從而淡定從容應對以後的新需求。

感謝你花時間閱讀這篇文章。若是你喜歡這篇文章,歡迎點贊、收藏和分享，讓更多的人看到這篇文章，這也是對我最大的鼓勵和支持！
歡迎Star和訂閱個人原創前端技術博客。