日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
JavaScript重構技巧-降低函數復雜度

本文轉載自微信公眾號「大遷世界」，轉載本文請聯(lián)系大遷世界公眾號。

10年的海滄網站建設經驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。成都營銷網站建設的優(yōu)勢是能夠根據用戶設備顯示端的尺寸不同，自動調整海滄建站的顯示方式，使網站能夠適用不同顯示終端，在瀏覽器中調整網站的寬度，無論在任何一種瀏覽器上瀏覽網站，都能展現優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)建站從事“海滄網站設計”,“海滄網站推廣”以來，每個客戶項目都認真落實執(zhí)行。

JavaScript 是一種易于學習的編程語言，編寫運行并執(zhí)行某些操作的程序很容易。然而，要編寫一段干凈的JavaScript 代碼是很困難的。

在本文中，我們將研究如何「降低函數復雜度」。

將重復的代碼移到同個位置

我們應該將重復的代碼提取出來，合并放到同個位置，這樣當有需要修改的，我們只需要改一個地方即可，同時也減少犯錯率。

假設我們有可能很寫出下面的代碼：

 
 
 
 
    
  
  
  
  
  1. const button = document.querySelector('button'); 
    2.   
  
  
  
  2. let toggled = true; 
    3.   
  
  
  
  3. button.addEventListener('click', () => { 
    4.   
  
  
  
  4.   toggled = !toggled; 
    5.   
  
  
  
  5.   if (toggled) { 
    6.   
  
  
  
  6.     document.querySelector("p").style.color = 'red'; 
    7.   
  
  
  
  7.   } else { 
    8.   
  
  
  
  8.     document.querySelector("p").style.color = 'green'; 
    9.   
  
  
  
  9.   } 
    10.   
  
  
  
  10. }) 
    11.

上面代碼中有兩個document.querySelector(“p”)，我們可以這樣優(yōu)化，把document.querySelector(“p”) 保存到一個變量中，然后使用該變量即可，如下所示：

 
 
 
 
    
  
  
  
  
  1. const button = document.querySelector('button'); 
    2.   
  
  
  
  2. const p = document.querySelector("p"); 
    3.   
  
  
  
  3. let toggled = true; 
    4.   
  
  
  
  4. button.addEventListener('click', () => { 
    5.   
  
  
  
  5.   toggled = !toggled; 
    6.   
  
  
  
  6.   if (toggled) { 
    7.   
  
  
  
  7.     p.style.color = 'red'; 
    8.   
  
  
  
  8.   } else { 
    9.   
  
  
  
  9.     p.style.color = 'green'; 
    10.   
  
  
  
  10.   } 
    11.   
  
  
  
  11. } 
    12.

這樣我們就不必寫長長的document.querySelector("p")，只需寫個變量 p 就行了。

另一個常見的代碼實例中的數字，光看數字我們很難知道其表示的含義：

 
 
 
 
    
  
  
  
  
  1. let x = 1; 
    2.   
  
  
  
  2. let y = 1; 
    3.   
  
  
  
  3. let z = 1; 
    4.

我們不知道上面這三個一表示什么，所以我們可以移除重復的代碼，并用一個合適的變量名來表示，如下所示：

 
 
 
 
    
  
  
  
  
  1. const numPeople = 1; 
    2.   
  
  
  
  2. let x = numPeople; 
    3.   
  
  
  
  3. let y = numPeople; 
    4.   
  
  
  
  4. let z = numPeople; 
    5.

這樣我們就可以知道 numPeople 的值為1，其表示的人的數量。

簡化函數

函數應盡可能簡單，最好只做一件事，行數也不要太多，最多不能超過 30 行。

我們不應該使用 ES5 類的方式，也不應將「IIFE」用于模塊或塊。相反，我們應該使用類語法，其中可以在類中包含該類的多個實例方法。這會大大減少了函數的體量。

同樣，只要我們可以定義函數，函數就應該是純函數，這意味著他們不應該產生副作用。

例如，最好的簡單函數是如下：

 
 
 
 
    
  
  
  
  
  1. const add = (a, b) => a + b; 
    2.

上面的函數沒有任何副作用，因為它不會在函數外部修改任何變量。另外，它也是一個純函數，對于相同的輸入，輸出的結果也都一樣的。

使用衛(wèi)語句代替嵌套語句

衛(wèi)語句的定義用法：

衛(wèi)語句就是把復雜的條件表達式拆分成多個條件表達式，比如一個很復雜的表達式，嵌套了好幾層的if - then-else語句，轉換為多個if語句，實現它的邏輯，這多條的if語句就是衛(wèi)語句

有時候條件式可能出現在嵌套n次才能真正執(zhí)行，其他分支只是簡單報錯返回的情況，對于這種情況，應該單獨檢查報錯返回的分支，當條件為真時立即返回，這樣的單獨檢查就是衛(wèi)語句(guard clauses).衛(wèi)語句可以把我們的視線從異常處理中解放出來，集中精力到正常處理的代碼中。

比如我們可能會編寫如下的代碼 ：

 
 
 
 
    
  
  
  
  
  1. const greet = (firstName, lastName, greeting) => { 
    2.   
  
  
  
  2.   if (typeof firstName === 'string') { 
    3.   
  
  
  
  3.     if (typeof lastName === 'string') { 
    4.   
  
  
  
  4.       if (typeof greeting === 'string') { 
    5.   
  
  
  
  5.         return `${greeting}, ${firstName}${lastName}`; 
    6.   
  
  
  
  6.       } 
    7.   
  
  
  
  7.     } 
    8.   
  
  
  
  8.   } 
    9.   
  
  
  
  9. } 
    10.

我們可以這樣優(yōu)化

 
 
 
 
    
  
  
  
  
  1. const greet = (firstName, lastName, greeting) => { 
    2.   
  
  
  
  2.   if (typeof firstName !== 'string') { 
    3.   
  
  
  
  3.     throw new Error('first name is required'); 
    4.   
  
  
  
  4.   } 
    5.   
  
  
  
  5.   if (typeof lastName !== 'string') { 
    6.   
  
  
  
  6.     throw new Error('last name is required'); 
    7.   
  
  
  
  7.   } 
    8.   
  
  
  
  8.   if (typeof greeting !== 'string') { 
    9.   
  
  
  
  9.     throw new Error('greeting is required'); 
    10.   
  
  
  
  10.   } 
    11.   
  
  
  
  11.   return `${greeting}, ${firstName}${lastName}`; 
    12.   
  
  
  
  12. } 
    13.

在第二個示例中，如果每個參數都不是字符串，則拋出錯誤，從而消除了嵌套的if語句。

這將嵌套的if語句在執(zhí)行相同操作時減少為沒有嵌套的if語句。

嵌套很難閱讀和理解，我們應該在所有地方都擺脫它們。

總結

重復的代碼總是不好的。我們應該永遠記住“不要重復自己(DRY)”的原則。

另外應該使用一些新的方式來代替 ES5 時代的寫法。

最后，應將嵌套的if語句替換為衛(wèi)語句，因為它們可以執(zhí)行與嵌套的if語句相同的檢查，這樣有利于閱讀。


網頁標題：JavaScript重構技巧-降低函數復雜度
URL分享：http://m.5511xx.com/article/ccdscpj.html