【前端】重構(gòu)，有品位的代碼 05── 搬移特性

作者：一川 2021-07-01 08:28:24

在本文中，主要介紹了搬移字段、搬移函數(shù)等搬移手段，也有單獨(dú)對(duì)語句搬移、調(diào)整順序的，也可以調(diào)整代碼的位置，對(duì)循環(huán)進(jìn)行拆分、使用管道替換等方法。

[[408550]]

寫在前面

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

前情回顧：

《重構(gòu)，有品位的代碼 01──走上重構(gòu)之道》
《重構(gòu)，有品位的代碼 02──構(gòu)建測(cè)試體系》
《重構(gòu)，有品位的代碼 03──常用重構(gòu)手法》
《重構(gòu)，有品位的代碼 04──封裝》

常見的搬移特性手法

在平時(shí)開發(fā)中，經(jīng)常會(huì)在代碼中使用到搬移特性，但是并不知道是做了什么搬移特性，現(xiàn)在我們將常用的搬移特性手法進(jìn)行總結(jié)如下：

搬移函數(shù)
搬移字段
搬移語句到函數(shù)
搬移語句到使用者
以函數(shù)調(diào)用取代內(nèi)聯(lián)代碼
移動(dòng)語句
拆分循環(huán)
以管道取代循環(huán)
移除死代碼

1. 搬移函數(shù)

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

函數(shù)是存活在上下文中的，這個(gè)上下文可能是全局的，也有可能是當(dāng)前所在模塊進(jìn)行提供的。而類即為主要的模塊化手段，作為函數(shù)的上下文，此外通過函數(shù)嵌套的方式，外層函數(shù)也可為內(nèi)層函數(shù)提供上下文。簡而言之，模塊可以為函數(shù)提供存活的上下文環(huán)境。

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

某段代碼需要頻繁調(diào)用別處函數(shù)
在函數(shù)內(nèi)部定義幫助函數(shù)在別處也有調(diào)用
在類中定義函數(shù)

通常的，首先檢查函數(shù)在當(dāng)前上下文中引用的所有程序元素(包括變量和函數(shù))，考慮是否需要將它們進(jìn)行搬移，并對(duì)待搬移函數(shù)是否具有多態(tài)性進(jìn)行檢查。將函數(shù)復(fù)制一份到目標(biāo)上下文中，調(diào)整函數(shù)使得適應(yīng)新的上下文。執(zhí)行靜態(tài)檢查，設(shè)法從源上下文中正確引用目標(biāo)函數(shù)，修改源函數(shù)，使之成為一個(gè)純委托函數(shù)。

原始代碼：

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

重構(gòu)代碼：

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. 搬移字段

在開發(fā)中你是否會(huì)遇到一些糟糕的代碼，使用了糟糕的數(shù)據(jù)結(jié)構(gòu)，代碼的邏輯并不清晰條理，更多的是各種糾纏不清，代碼很多令人費(fèi)解的無用代碼。因此，通常可以做些預(yù)先的設(shè)計(jì)，設(shè)法獲取最恰當(dāng)?shù)臄?shù)據(jù)結(jié)構(gòu)，而具備驅(qū)動(dòng)設(shè)計(jì)方面的經(jīng)驗(yàn)和知識(shí)，將有助于你設(shè)計(jì)數(shù)據(jù)結(jié)構(gòu)。

當(dāng)然，即使經(jīng)驗(yàn)豐富、技能熟練，也會(huì)在設(shè)計(jì)數(shù)據(jù)結(jié)構(gòu)的時(shí)候犯錯(cuò)，但是隨著對(duì)問題理解的深入，對(duì)業(yè)務(wù)邏輯的熟悉，便會(huì)考慮到更深更全面。在過程中發(fā)現(xiàn)數(shù)據(jù)結(jié)構(gòu)不適應(yīng)需求，便要及時(shí)進(jìn)行修繕，如果容許瑕疵存在便會(huì)導(dǎo)致代碼復(fù)雜化，問題累積。

在你每次進(jìn)行調(diào)用函數(shù)時(shí)，在傳入一個(gè)參數(shù)時(shí)，總是需要伴隨另外的字段作為參數(shù)傳入，即修改一條記錄同時(shí)需要修改另一條記錄，那么意味著此處的字段位置放置錯(cuò)誤。另外的，假設(shè)你更新某個(gè)字段，同時(shí)需要在多個(gè)結(jié)構(gòu)中做出改變，那么就意味著你需要將此字段進(jìn)行正確的搬移。

具體的，確保源字段已經(jīng)進(jìn)行良好封裝，在目標(biāo)對(duì)象上創(chuàng)建字段(及對(duì)應(yīng)的訪問函數(shù))并執(zhí)行靜態(tài)檢查，確保源對(duì)象里能夠正常引用目標(biāo)對(duì)象，即調(diào)整源對(duì)象的訪問函數(shù)能夠使用目標(biāo)對(duì)象的字段。最后，移除源對(duì)象上的字段。

原始代碼：

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

重構(gòu)代碼：

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. 搬移語句到函數(shù)

在重構(gòu)代碼時(shí)有幾條黃金準(zhǔn)則，其中最重要的就是要“消除重復(fù)”代碼，對(duì)重復(fù)語句進(jìn)行抽象到函數(shù)中，通過調(diào)用函數(shù)來實(shí)現(xiàn)復(fù)雜代碼的運(yùn)行。

4. 搬移語句到調(diào)用者

作為搬磚碼農(nóng)的指責(zé)就是設(shè)計(jì)結(jié)構(gòu)一致、抽象合宜的程序，而函數(shù)就是抽象的制勝法寶。當(dāng)然所有的手段都并非放之四海而皆準(zhǔn)的法則，隨著系統(tǒng)能力的演變，最初設(shè)計(jì)的抽象邊界逐漸向外擴(kuò)散變得模糊，從原先單獨(dú)整體、聚焦唯一點(diǎn)，分化成多個(gè)不同關(guān)注點(diǎn)。

而函數(shù)邊界發(fā)生偏移，意味著之前多個(gè)地方調(diào)用的行為，現(xiàn)在需要會(huì)在不同點(diǎn)表現(xiàn)出不同的行為。這樣，我們可以把不同表現(xiàn)行為從函數(shù)中挪出，將其搬移到調(diào)用處。

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. 以函數(shù)調(diào)用取代內(nèi)聯(lián)代碼

使用函數(shù)可以將相關(guān)行為進(jìn)行打包，提升代碼的表達(dá)能力，清晰的解釋代碼的用途和作用，有助于消除重復(fù)的代碼。如果某段內(nèi)聯(lián)代碼是對(duì)已有函數(shù)進(jìn)行重復(fù)，那么可以使用一個(gè)函數(shù)調(diào)用來取代內(nèi)聯(lián)代碼，可以實(shí)現(xiàn)業(yè)務(wù)邏輯的抽象。

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

即：

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

6. 移動(dòng)語句

如果有幾行代碼使用了相同的數(shù)據(jù)結(jié)構(gòu)，那么可以使其關(guān)聯(lián)使用，使得代碼更易理解，而不是夾在其他數(shù)據(jù)結(jié)構(gòu)中間。那么在我們寫完代碼后，需要進(jìn)行審讀，將關(guān)聯(lián)性強(qiáng)的代碼移動(dòng)語句進(jìn)行聚集。通常，移動(dòng)語句作為其他重構(gòu)代碼的先提重構(gòu)手段。

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

重構(gòu)代碼：

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

7. 拆分循環(huán)

在常規(guī)的開發(fā)中，會(huì)在一次循環(huán)中做多件事情，意圖讓其避免過高的時(shí)間復(fù)雜度。有的時(shí)候，在一次循環(huán)中代碼過多、邏輯混亂，反而不便于我們?nèi)粘＠斫狻Ｒ虼丝梢愿鶕?jù)情況合理拆分循環(huán)，使其每次循環(huán)只做一件事情，更便于閱讀使用。

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

重構(gòu)代碼：

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;

是不是看起來有點(diǎn)傻，當(dāng)你在復(fù)雜代碼中閱讀會(huì)發(fā)現(xiàn)很清晰。

8. 以管道取代循環(huán)

在過去進(jìn)行數(shù)組、對(duì)象遍歷時(shí)，通常做法是使用循環(huán)進(jìn)行迭代，當(dāng)然也可以使用更好的語言結(jié)構(gòu)———”集合管道“來處理迭代(map和filter等)。集合管道允許使用一組運(yùn)算來描述集合迭代過程，其中每種運(yùn)算都是一個(gè)集合。

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

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

9. 移除死代碼

在將項(xiàng)目部署在生產(chǎn)環(huán)境中，可能會(huì)因?yàn)榇a量太大而造成更大的內(nèi)存開銷，無用代碼會(huì)拖累系統(tǒng)的運(yùn)行速度，導(dǎo)致項(xiàng)目進(jìn)程緩慢。當(dāng)然，多數(shù)的現(xiàn)在編譯器會(huì)自動(dòng)將無用代碼進(jìn)行移除，但是在你閱讀理解代碼邏輯和原理時(shí)，會(huì)讓你花費(fèi)時(shí)間去思索，耗費(fèi)精力。在代碼不再使用時(shí)，應(yīng)當(dāng)立即刪除，當(dāng)你突然又想使用時(shí)可以通過版本控制回滾。