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

這篇文章主要介紹了JavaScript如何將重復(fù)的代碼移到同個(gè)位置，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

我們應(yīng)該將重復(fù)的代碼提取出來，合并放到同個(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';   } }

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

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

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

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

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JavaScript如何將重復(fù)的代碼移到同個(gè)位置”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!