什么項目，為何會重構？
項目是公司主打業(yè)務產品之一的可視化子項目，與其他子項目幾乎沒有耦合，所以可以單獨拎出來重構。
具體業(yè)務不作描述。技術主要用的是Vue2系列和JavaScript，還有一個自研的可視化工具庫。第一個重構原因就是沒有引入靜態(tài)類型，導致查看一個對象結構需要翻來覆去在多個文件中查找。第二是因為之前新增代碼模式一般為：“來一個需求加一段代碼”，長期積累導致代碼結構混亂，可讀性差。第三是各個狀態(tài)模塊耦合度高，加大了代碼維護難度。
怎么重構的？
一、在JavaScript中使用TypeScript?！笆裁?？在JS中使用TS? 聞所未聞。 ” 在看到TS官網手冊最后一條"Type Checking JavaScript File"?之前，我也這樣想。其實，TS和VSCode（一款IDE）結合，也可以實現(xiàn)靜態(tài)類型檢測，只不過使用注釋形式，一樣支持tsconfig.json?和自定義Typing。
typeTypeApple = { name:string, count:number}
/** @type {TypeApple} */constapple = { name:'foo', count:100}
二、細化模塊分類。一般情況下，模塊都會有耦合。但如果耦合度過高，往往是因為模塊沒有細分到位。如果細化模塊？舉例，假如有一個模塊叫Operation?，里面既包含操作相關邏輯，也有操作面板邏輯。隨著業(yè)務發(fā)展，操作面板邏輯越來越多。我們完全可以將操作面板邏輯單獨抽成一個模塊OperationPanel?。
三、解耦可視化庫和Vue/Vuex。寫業(yè)務的時候，很容易因為方便，在Vue組件或Vuex模塊中代碼越寫越長，越來越難維護。這個項目也不列外。所以重構的時候，單獨將可視化庫喜愛那個管邏輯抽成模塊，并使用類Vuex寫法(state, getters, mutations, actions)進行管理。
classCounter{// # state? /** @type {number} */count =0// # gettersgetcountText() {return`Countis: ${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 )? }}
四、最后一條，編寫可維護性高的代碼。這里說兩個方法。
第一個是“使用Map?”。處理“一個有多類型的數(shù)據(jù)”需要使用判斷，常見有3種方法：If?,Switch?,Map?。If?的使用簡單粗暴，容易理解。
if( animalType ==='dog') {? ? console.log('Wang!')}elseif( animalType ==='cat') {? ? console.log('Miao!')}elseif( animalType ==='bird') {? ? console.log('Jiu!')}
Switch?可以看做是If?的簡化。
switch( animalType ) {case'dog':console.log('Wang!')breakcase'cat':console.log('Miao!')breakcase'bird':console.log('Jiu!')break}
而Map?針對性最強，并且最簡潔、最易于維護。
const logMap = {? ? dog:()=>console.log('Wang!'),? ? cat:()=>console.log('Miao!'),? ? bird:()=>console.log('Jiu!'),}logMap[ animalType ]()
具體使用也哪一種因場景而異，但多數(shù)場景下，使用Map?可讀性更強。
第二個是“使用getters和mutations”。比如定義一個模塊的：?operationGetters.js`, 里面提供各種用來獲取與操作有關的常量和方法。
exportconstOPERATION_TYPE_A =0exportconstOPERATION_TYPE_B =1exportconstOPERATION_TITLE_MAP = {? [ OPERATION_TYPE_A ]:'Title A',? [ OPERATION_TYPE_B ]:'Title B',}exportconstgetOperationTitleByType =type=>OPERATION_TITLE_MAP[ type ]
定義mutations?則是定義一個提供相關各種變更數(shù)據(jù)方法的文件。在維護代碼的時候，查找變更方法名即可直接找到更改數(shù)據(jù)的出處。
exportconstSET_OPERATION_TITLE =( operation, title ) =>{ operation.title = title }
重構前后對比
代碼量減少了快一半，性能顯著提升，最重要的是代碼可讀性、可維護性大大增強，從而淡定從容應對之后的新需求。
如果有想學習編程的初學者，可來我們的前端直播授課群的哦：571671034里面免費送整套系統(tǒng)的前端教程！
