JavaScript重構(gòu)技巧中如何降低函數(shù)復(fù)雜度

這篇文章給大家介紹JavaScript重構(gòu)技巧中如何降低函數(shù)復(fù)雜度，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

我們提供的服務(wù)有：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、花溪ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的花溪網(wǎng)站制作公司

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

將重復(fù)的代碼移到同個(gè)位置

我們應(yīng)該將重復(fù)的代碼提取出來(lái)，合并放到同個(gè)位置，這樣當(dāng)有需要修改的，我們只需要改一個(gè)地方即可，同時(shí)也減少犯錯(cuò)率。

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

const button = document.querySelector('button'); let toggled = true; button.addEventListener('click', () => {   toggled = !toggled;   if (toggled) {     document.querySelector("p").style.color = 'red';   } else {     document.querySelector("p").style.color = 'green';   } })

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

const button = document.querySelector('button'); const p = document.querySelector("p"); let toggled = true; button.addEventListener('click', () => {   toggled = !toggled;   if (toggled) {     p.style.color = 'red';   } else {     p.style.color = 'green';   } }

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

另一個(gè)常見(jiàn)的代碼實(shí)例中的數(shù)字，光看數(shù)字我們很難知道其表示的含義：

let x = 1; let y = 1; let z = 1;

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

const numPeople = 1; let x = numPeople; let y = numPeople; let z = numPeople;

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

簡(jiǎn)化函數(shù)

函數(shù)應(yīng)盡可能簡(jiǎn)單，最好只做一件事，行數(shù)也不要太多，最多不能超過(guò) 30 行。

我們不應(yīng)該使用 ES5  類的方式，也不應(yīng)將「IIFE」用于模塊或塊。相反，我們應(yīng)該使用類語(yǔ)法，其中可以在類中包含該類的多個(gè)實(shí)例方法。這會(huì)大大減少了函數(shù)的體量。

同樣，只要我們可以定義函數(shù)，函數(shù)就應(yīng)該是純函數(shù)，這意味著他們不應(yīng)該產(chǎn)生副作用。

例如，最好的簡(jiǎn)單函數(shù)是如下：

const add = (a, b) => a + b;

上面的函數(shù)沒(méi)有任何副作用，因?yàn)樗粫?huì)在函數(shù)外部修改任何變量。另外，它也是一個(gè)純函數(shù)，對(duì)于相同的輸入，輸出的結(jié)果也都一樣的。

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

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

衛(wèi)語(yǔ)句就是把復(fù)雜的條件表達(dá)式拆分成多個(gè)條件表達(dá)式，比如一個(gè)很復(fù)雜的表達(dá)式，嵌套了好幾層的if -  then-else語(yǔ)句，轉(zhuǎn)換為多個(gè)if語(yǔ)句，實(shí)現(xiàn)它的邏輯，這多條的if語(yǔ)句就是衛(wèi)語(yǔ)句

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

比如我們可能會(huì)編寫如下的代碼 ：

const greet = (firstName, lastName, greeting) => {   if (typeof firstName === 'string') {     if (typeof lastName === 'string') {       if (typeof greeting === 'string') {         return `${greeting}, ${firstName}${lastName}`;       }     }   } }

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

const greet = (firstName, lastName, greeting) => {   if (typeof firstName !== 'string') {     throw new Error('first name is required');   }   if (typeof lastName !== 'string') {     throw new Error('last name is required');   }   if (typeof greeting !== 'string') {     throw new Error('greeting is required');   }   return `${greeting}, ${firstName}${lastName}`; }

在第二個(gè)示例中，如果每個(gè)參數(shù)都不是字符串，則拋出錯(cuò)誤，從而消除了嵌套的if語(yǔ)句。

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

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

總結(jié)

重復(fù)的代碼總是不好的。我們應(yīng)該永遠(yuǎn)記住“不要重復(fù)自己(DRY)”的原則。

另外應(yīng)該使用一些新的方式來(lái)代替 ES5 時(shí)代的寫法。

最后，應(yīng)將嵌套的if語(yǔ)句替換為衛(wèi)語(yǔ)句，因?yàn)樗鼈兛梢詧?zhí)行與嵌套的if語(yǔ)句相同的檢查，這樣有利于閱讀。

關(guān)于JavaScript重構(gòu)技巧中如何降低函數(shù)復(fù)雜度就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

本文標(biāo)題：JavaScript重構(gòu)技巧中如何降低函數(shù)復(fù)雜度
網(wǎng)站URL：http://muchs.cn/article48/pgooep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)站排名、建站公司、網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)