自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

【前端】重構(gòu),有品位的代碼 06── 重新組織數(shù)據(jù)

開發(fā) 前端
變量在代碼中有著不同的用途,而有些用途毀導(dǎo)致臨時(shí)變量被多次賦值,比如:循環(huán)語句中的變量以及結(jié)果收集變量(通過整個(gè)函數(shù)運(yùn)算構(gòu)成的值)。

[[409049]]

本文轉(zhuǎn)載自微信公眾號「前端萬有引力」,作者一川。轉(zhuǎn)載本文請聯(lián)系前端萬有引力公眾號。

重新組織數(shù)據(jù)

常用的重新組織數(shù)據(jù)方式有:

  • 拆分變量
  • 字段改名
  • 以查詢?nèi)〈缮兞?/li>
  • 將引用對象改為值對象
  • 將值對象改為引用對象

1. 拆分變量

變量在代碼中有著不同的用途,而有些用途毀導(dǎo)致臨時(shí)變量被多次賦值,比如:循環(huán)語句中的變量以及結(jié)果收集變量(通過整個(gè)函數(shù)運(yùn)算構(gòu)成的值)。當(dāng)然,還有許多變量只被賦值一次,用于保存冗長代碼的運(yùn)算結(jié)果,如果其承擔(dān)多個(gè)責(zé)任(被賦值多次),那么就意味著需要對其進(jìn)行拆分為多個(gè)單獨(dú)責(zé)任的變量。

其實(shí),就是在待分解變量的聲明及其初次被賦值處,修改其名稱,盡量將其變量聲明設(shè)置為不可修改(其實(shí)就是使用const)。以該變量的第二次賦值動(dòng)作為界,修改此時(shí)對該變量的所有引用,讓其引用新變量。

原始代碼:

  1. let height = 2, width = 3; 
  2. let temp = 4 * ( height + width); 
  3. console.log(temp); 
  4.  
  5. temp = height * width; 
  6. console.log(temp); 

重構(gòu)代碼:

  1. const height = 2, width = 3; 
  2. const perimeter = 4 * ( height + width); 
  3. console.log(perimeter); 
  4.  
  5. const area = height * width; 
  6. console.log(area); 

2. 字段改名

對于程序中廣泛使用的記錄結(jié)構(gòu),數(shù)據(jù)結(jié)構(gòu)有助于閱讀理解代碼邏輯,其字段的命名顯得格外重要。數(shù)據(jù)結(jié)構(gòu)作用無非就是讓代碼更加簡潔有條理,但事實(shí)上隨著時(shí)間的推移,我們對代碼的理解更加透徹,此時(shí)就會(huì)對于某些字段根據(jù)作用和業(yè)務(wù)進(jìn)行改名。

來看看如何對字段進(jìn)行改名,首先判斷當(dāng)前記錄的作用域的范圍,當(dāng)其作用域小時(shí)可以直接修改所有該字段的代碼。當(dāng)然如果作用域范圍大時(shí),可以先對記錄進(jìn)行封裝,在對象內(nèi)部對私有字段進(jìn)行改名,并對應(yīng)調(diào)整內(nèi)部訪問該字段的函數(shù)。

原始代碼:

  1. class User
  2.   constructor(data){ 
  3.     this._name = data.name
  4.     this._age = data.age; 
  5.   } 
  6.   get name(){ 
  7.     return this._name; 
  8.   } 
  9.   set name(newName){ 
  10.     this._name = newName; 
  11.   } 
  12.   get age(){ 
  13.     return this._age; 
  14.   } 
  15.   set age(newAge){ 
  16.     this._age = newAge; 
  17.   } 
  18. const yichuan = new User({name:"yichuan",age:18}); 

重構(gòu)代碼:

  1. class User
  2.   constructor(data){ 
  3.     this._title = data.title; 
  4.     this._age = data.age; 
  5.   } 
  6.   get title(){ 
  7.     return this._title; 
  8.   } 
  9.   set title(newTitle){ 
  10.     this._name = newTitle; 
  11.   } 
  12.   get age(){ 
  13.     return this._age; 
  14.   } 
  15.   set age(newAge){ 
  16.     this._age = newAge; 
  17.   } 

是不是很簡單,就是對應(yīng)的改變字段名字而已。

3. 以查詢?nèi)〈缮兞?/h3>

要知道數(shù)據(jù)可變時(shí)軟件犯錯(cuò)的源頭,對數(shù)據(jù)的修改常導(dǎo)致代碼各部分耦合,即在某處進(jìn)行修改后,卻對另外一處造成意想不到的災(zāi)難。當(dāng)然,完全消滅可變數(shù)據(jù)這是不現(xiàn)實(shí)的,所以應(yīng)該將可變數(shù)據(jù)的作用域縮小到可控制范圍內(nèi)。

計(jì)算能夠清晰地表達(dá)數(shù)據(jù)的含義,能夠最大化避免源數(shù)據(jù)修改時(shí)忘更新派生變量的情況。有些變量很容易隨時(shí)被計(jì)算,如果能夠?qū)⑵湎俗兞?,那么也就朝著消除?shù)據(jù)可變性更進(jìn)一步。如果計(jì)算的源數(shù)據(jù)是不可變的,也可以強(qiáng)制計(jì)算得到的結(jié)果是不可變的,這樣就不必消除計(jì)算得到的派生變量。因此,可以根據(jù)源數(shù)據(jù)生成新數(shù)據(jù)結(jié)構(gòu)的變換操作保持不變,即使已經(jīng)將其替換為計(jì)算操作。

看看具體例子,其原始代碼如下:

  1. get discountedTotal(){ 
  2.   return this._discountedTotal; 
  3. set discountedTotal(discount){ 
  4.   const old = this._discount; 
  5.   this._discount = discount; 
  6.   this._discountedTotal += old - discount; 

重構(gòu)代碼:

  1. get discountedTotal(){ 
  2.   return this._baseTotal - this._discount; 
  3. set discountedTotal(discount){ 
  4.   this._discount = discount; 

4. 將引用對象改為值對象

在將一個(gè)對象嵌入到另一個(gè)對象時(shí),位于內(nèi)部的這個(gè)對象被稱為引用對象,亦可稱為值對象。當(dāng)然兩者最明顯差異在于如何更新內(nèi)部對象的屬性:如果將內(nèi)部對象視為引用對象,在更新其屬性時(shí)可以保留原對象不動(dòng),只更新內(nèi)部對象的屬性;如果將內(nèi)部對象視為值對象,可以替換整個(gè)內(nèi)部對象,對新對象可以設(shè)置新的屬性值,

在實(shí)際操作中,得先檢查重構(gòu)目標(biāo)是否是不可變對象,或者是否可修改不可變對象,再逐步去除所有設(shè)置函數(shù)。提供一個(gè)基于值的相等性判斷函數(shù),在其中使用對象的字段。

原始代碼:

  1. class Product{ 
  2.   applyDiscount(arg){ 
  3.     this._price.aount -= arg; 
  4.   } 

重構(gòu)代碼:

  1. class Product{ 
  2.   applyDiscount(arg){ 
  3.     this._price = new Money(this._price.amount - arg, this._price.currency) 
  4.   } 

5. 將值對象改為引用對象

在數(shù)據(jù)結(jié)構(gòu)中有可能包含多個(gè)記錄,這些記錄都關(guān)聯(lián)到同個(gè)邏輯數(shù)據(jù)結(jié)構(gòu)。同份數(shù)據(jù)復(fù)制多次可能造成困擾,因?yàn)闀?huì)導(dǎo)致內(nèi)存占用問題,會(huì)導(dǎo)致性能問題。如果共享數(shù)據(jù)需要更新,可以將多份數(shù)據(jù)副本變成單一引用,可以將數(shù)據(jù)修改反映到變化中。

在為相關(guān)對象創(chuàng)建一個(gè)倉庫,確保構(gòu)造函數(shù)可以找到關(guān)聯(lián)對象的正確實(shí)例,修改宿主對象的構(gòu)造函數(shù),令其從倉庫中獲取關(guān)聯(lián)對象。

  1. // 原始代碼 
  2. let customer = new Customer(data); 
  3. // 重構(gòu)代碼 
  4. let customer = customerRespository.get(data.id); 

小結(jié)

在本文中,主要介紹了如何重新組織數(shù)據(jù),可以將代碼中的數(shù)據(jù)結(jié)構(gòu)進(jìn)行改善。

參考文章

 

《重構(gòu)──改善既有代碼的設(shè)計(jì)(第2版)》

 

責(zé)任編輯:武曉燕 來源: 前端萬有引力
相關(guān)推薦

2021-07-01 08:28:24

前端搬移特性開發(fā)技術(shù)

2021-08-03 08:13:48

重構(gòu)API代碼

2021-07-10 14:22:24

前端代碼條件邏輯

2013-09-16 10:57:59

蘋果世界

2022-05-06 15:24:15

數(shù)字化轉(zhuǎn)型市場化企業(yè)

2020-12-08 06:20:49

前端重構(gòu)Vue

2019-09-27 09:57:09

大數(shù)據(jù)機(jī)器學(xué)習(xí)神經(jīng)網(wǎng)絡(luò)

2024-09-05 10:17:34

2013-06-09 10:37:14

架構(gòu)框架

2021-10-18 11:42:23

數(shù)據(jù)系統(tǒng)權(quán)衡

2022-08-08 13:24:28

整潔架構(gòu)架構(gòu)前端

2012-07-27 10:30:12

重構(gòu)

2011-08-16 09:47:58

編程

2019-02-18 16:21:47

華為代碼重構(gòu)

2021-08-01 22:35:16

Vscode開發(fā)編輯器

2023-10-20 08:04:34

系統(tǒng)重構(gòu)實(shí)踐

2023-02-27 07:40:00

系統(tǒng)重構(gòu)前端

2022-12-26 00:02:24

重構(gòu)代碼軟件

2019-04-03 08:10:17

代碼架構(gòu)信息

2020-11-17 05:52:08

數(shù)據(jù)中心自動(dòng)化數(shù)據(jù)中心
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號