[[408550]]

寫在前面

本文是《重構，有品位的代碼》系列第五篇文章，前面文章主要介紹的重構手法是關于如何新建、移除或重命名程序的元素。當然，不只是只有這些手法，還有類型的重構也是很重要的，主要是在不同上下文間搬移元素。可以通過搬移函數手法在類與其他模塊之間搬移函數，同樣的也有搬移字段手法，還有其它手法將在本文中將逐一介紹...

前情回顧：

• 《重構，有品位的代碼 01──走上重構之道》
• 《重構，有品位的代碼 02──構建測試體系》
• 《重構，有品位的代碼 03──常用重構手法》
• 《重構，有品位的代碼 04──封裝》

常見的搬移特性手法

在平時開發中，經常會在代碼中使用到搬移特性，但是并不知道是做了什么搬移特性，現在我們將常用的搬移特性手法進行總結如下：

• 搬移函數
• 搬移字段
• 搬移語句到函數
• 搬移語句到使用者
• 以函數調用取代內聯代碼
• 移動語句
• 拆分循環
• 以管道取代循環
• 移除死代碼

1. 搬移函數

模塊化能夠確保我們的代碼塊間的聯系易于查找、直觀易懂，能夠保證相互關聯的軟件要素集中在一塊，便于我們理解和管理。與此同時，隨著對代碼的理解加深，了解到那些軟件要素如何組織最為恰當，此時需要通過不斷地搬移元素進行重新模塊化。

函數是存活在上下文中的，這個上下文可能是全局的，也有可能是當前所在模塊進行提供的。而類即為主要的模塊化手段，作為函數的上下文，此外通過函數嵌套的方式，外層函數也可為內層函數提供上下文。簡而言之，模塊可以為函數提供存活的上下文環境。

由于在某些代碼頻繁引用其他上下文中的元素，即與其他上下文的元素關系緊密，而對于自身上下文中的元素關心甚少，此時就可以考慮將聯系密切的元素進行歸納，取得更好的封裝效果。那么有以下情況，你可以進行搬移函數的操作：

• 某段代碼需要頻繁調用別處函數
• 在函數內部定義幫助函數在別處也有調用
• 在類中定義函數

通常的，首先檢查函數在當前上下文中引用的所有程序元素(包括變量和函數)，考慮是否需要將它們進行搬移，并對待搬移函數是否具有多態性進行檢查。將函數復制一份到目標上下文中，調整函數使得適應新的上下文。執行靜態檢查，設法從源上下文中正確引用目標函數，修改源函數，使之成為一個純委托函數。

原始代碼：

class Account{ 
  constructor(){ 
    .... 
  } 
  get bankCharge(){ 
    let result = 4.5; 
    if(this._daysOverdrawn> 0) result += this.overdraftCharge; 
  } 
   
  get overdraftCharge(){ 
    if(this.type.isPremium){ 
      const basecharge = 10； 
      if(this.dayOverdrawn <= 7){ 
        return baseCharge; 
      }else{ 
        return baseCharge + (this.daysOverdrawn - 7) * 0.85; 
      } 
    }else{ 
      return this.daysOverdrawn * 1.75; 
    } 
  } 
} 

重構代碼：

class Account{ 
  constructor(){ 
    ... 
  } 
  get bankcharge(){ 
    let result = 4.5; 
    if(this._daysOverdrawn> 0) result += this.overdraftCharge; 
  } 
  get overdraftCharge(){ 
    return this.Type.overdraftCharge(this); 
  } 
} 
 
class AccountType{ 
  constructor(){ 
    ... 
  } 
  overdraftCharge(account){ 
    if(this.isPremium){ 
      const basecharge = 10； 
      if(account.dayOverdrawn <= 7){ 
        return baseCharge; 
      }else{ 
        return baseCharge + (account.daysOverdrawn - 7) * 0.85; 
      } 
    }else{ 
      return account.daysOverdrawn * 1.75; 
    } 
  } 
} 

2. 搬移字段

在開發中你是否會遇到一些糟糕的代碼，使用了糟糕的數據結構，代碼的邏輯并不清晰條理，更多的是各種糾纏不清，代碼很多令人費解的無用代碼。因此，通常可以做些預先的設計，設法獲取最恰當的數據結構，而具備驅動設計方面的經驗和知識，將有助于你設計數據結構。

當然，即使經驗豐富、技能熟練，也會在設計數據結構的時候犯錯，但是隨著對問題理解的深入，對業務邏輯的熟悉，便會考慮到更深更全面。在過程中發現數據結構不適應需求，便要及時進行修繕，如果容許瑕疵存在便會導致代碼復雜化，問題累積。

在你每次進行調用函數時，在傳入一個參數時，總是需要伴隨另外的字段作為參數傳入，即修改一條記錄同時需要修改另一條記錄，那么意味著此處的字段位置放置錯誤。另外的，假設你更新某個字段，同時需要在多個結構中做出改變，那么就意味著你需要將此字段進行正確的搬移。

具體的，確保源字段已經進行良好封裝，在目標對象上創建字段(及對應的訪問函數)并執行靜態檢查，確保源對象里能夠正常引用目標對象，即調整源對象的訪問函數能夠使用目標對象的字段。最后，移除源對象上的字段。

原始代碼：

class User{ 
  constructor(name,age,getName){ 
    this._getName = getName; 
    this._age = age; 
    this._name = name; 
  } 
  get getName(){ 
    return this._getName; 
  } 
} 
 
class UserType{ 
  constructor(firstName){ 
    this._firstName = firstName; 
  } 
} 

重構代碼：

class User{ 
  constructor(age,name){ 
    this._age = age; 
    this._name = name; 
  } 
  get getName(){ 
    return this._name.getName; 
  } 
} 
 
class UserType{ 
  constructor(firstName,getName){ 
    this._firstName = firstName; 
    this._getName = getName; 
  } 
  get getName(){ 
    return this._getName; 
  } 
} 

3. 搬移語句到函數

在重構代碼時有幾條黃金準則，其中最重要的就是要“消除重復”代碼，對重復語句進行抽象到函數中，通過調用函數來實現復雜代碼的運行。

4. 搬移語句到調用者

作為搬磚碼農的指責就是設計結構一致、抽象合宜的程序，而函數就是抽象的制勝法寶。當然所有的手段都并非放之四海而皆準的法則，隨著系統能力的演變，最初設計的抽象邊界逐漸向外擴散變得模糊，從原先單獨整體、聚焦唯一點，分化成多個不同關注點。

而函數邊界發生偏移，意味著之前多個地方調用的行為，現在需要會在不同點表現出不同的行為。這樣，我們可以把不同表現行為從函數中挪出，將其搬移到調用處。

printHtml(outData,onData.html); 
 
function printHtml(outData,html){ 
  outData.write(`<p>title:${html.title}</p>`); 
  outData.write(`<p>content:${html.content}</p>`); 
} 

即：

printHtml(outData,onData.html); 
outData.write(`<p>content:${onData.html.content}</p>`); 
 
function printHtml(outData,html){ 
  outData.write(`<p>title:${html.title}</p>`); 
   
} 

5. 以函數調用取代內聯代碼

使用函數可以將相關行為進行打包，提升代碼的表達能力，清晰的解釋代碼的用途和作用，有助于消除重復的代碼。如果某段內聯代碼是對已有函數進行重復，那么可以使用一個函數調用來取代內聯代碼，可以實現業務邏輯的抽象。

let flag = false; 
for(const color of colors){ 
  if(color === "yellow") flag = true; 
} 

即：

let flag = colors.includes("yellow"); 

6. 移動語句

如果有幾行代碼使用了相同的數據結構，那么可以使其關聯使用，使得代碼更易理解，而不是夾在其他數據結構中間。那么在我們寫完代碼后，需要進行審讀，將關聯性強的代碼移動語句進行聚集。通常，移動語句作為其他重構代碼的先提重構手段。

const pricingPlan = rePricingPlan(); 
const order = reOrder(); 
let charge; 
const chargePerUnit = ricingPlan.uint; 

重構代碼：

const pricingPlan = rePricingPlan(); 
const chargePerUnit = ricingPlan.uint; 
const order = reOrder(); 
let charge; 

7. 拆分循環

在常規的開發中，會在一次循環中做多件事情，意圖讓其避免過高的時間復雜度。有的時候，在一次循環中代碼過多、邏輯混亂，反而不便于我們日常理解。因此可以根據情況合理拆分循環，使其每次循環只做一件事情，更便于閱讀使用。

let averagePrice = 0; 
let totalCount = 0; 
for(const p in goods){ 
  averagePrice += p.price; 
  totalCount += p.count; 
} 
averagePrice = averagePrice / totalCount; 

重構代碼：

let averagePrice = 0; 
for(const p in goods){ 
  averagePrice += p.price; 
} 
let totalCount = 0; 
for(const p in goods){ 
  totalCount += p.count; 
} 
 
averagePrice = averagePrice / totalCount; 

是不是看起來有點傻，當你在復雜代碼中閱讀會發現很清晰。

8. 以管道取代循環

在過去進行數組、對象遍歷時，通常做法是使用循環進行迭代，當然也可以使用更好的語言結構———”集合管道“來處理迭代(map和filter等)。集合管道允許使用一組運算來描述集合迭代過程，其中每種運算都是一個集合。

通常做法：創建一個用于存放參與循環過程的集合的新變量，從c循環頂部開始，將循環內的每塊行為依次搬移。在創建的集合變量中用管道運算進行替換，直到循環內的全部行為進行搬移完畢，最后將循環進行刪除。

const users = []; 
for(const item in arrs){ 
  if(item.age === 20) users.push(item.name); 
} 
 
//重構代碼 
const users = arrs 
.filter(item=>item.age === 20) 
.map(item=>item.name); 

9. 移除死代碼

在將項目部署在生產環境中，可能會因為代碼量太大而造成更大的內存開銷，無用代碼會拖累系統的運行速度，導致項目進程緩慢。當然，多數的現在編譯器會自動將無用代碼進行移除，但是在你閱讀理解代碼邏輯和原理時，會讓你花費時間去思索，耗費精力。在代碼不再使用時，應當立即刪除，當你突然又想使用時可以通過版本控制回滾。

if(false){ 
  ... 
} 

這是一句無用代碼，應當立刻刪除。

小結

在本文中，主要介紹了搬移字段、搬移函數等搬移手段，也有單獨對語句搬移、調整順序的，也可以調整代碼的位置，對循環進行拆分、使用管道替換等方法。