建站
咨詢
售后
建站咨詢
新聞中心
JavaScript 是一種易于學習的編程語言，編寫運行并執(zhí)行某些操作的程序很容易。然而，要編寫一段干凈的JavaScript 代碼是很困難的。
創(chuàng)新互聯(lián)于2013年開始，先為西疇等服務(wù)建站，西疇等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為西疇企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
在本文中，我們學習如何使用數(shù)組來代替條件語句，以及如何使用classList操作類名。
用數(shù)組檢查替換長表達式
平時開發(fā)中，我們可能會寫如下的代碼：
- if (fruit === 'apple' || fruit === 'orange' || fruit === 'grape') {
- //...
- }
對于上面，我們可以使用一些數(shù)組方法來減少條件表達式的長度。
一種方法是使用數(shù)組的include方法:
- if (['apple', 'orange' ,'grape'].includes(fruit)) {
- //...
- }
如果傳遞給參數(shù)的值包含在數(shù)組實例中，include方法返回true，否則返回false。
另一種方法是使用數(shù)組的some方法:
- if (['apple', 'orange', 'grape'].some(a => a === fruit)) {
- //...
- }
通過some方法，我們可以檢查回調(diào)中是否存在具有給定條件的數(shù)組元素。
如果存在一個或多個，則返回true，否則返回false。
在 DOM 元素中使用 classList 屬性
檢查 DOM 元素中是否存在類并操作多個類的最簡單方法是使用classList屬性。
例如，如果要添加多個類，可以使用下面方式：
- const p = document.querySelector('p');
- p.classList.add('foo');
- p.classList.add('bar');
- p.classList.add('baz');
這樣，我們可以添加多個類而無需操作字符串。我們只是獲得DOM元素對象的classList屬性，然后調(diào)用add通過將帶有類名的字符串傳遞到add方法中來添加類。
現(xiàn)在，渲染的DOM元素具有foo，bar和baz類。
同樣，我們可以調(diào)用classList屬性的remove方法，該方法使用一個帶有要刪除的類名的字符串來刪除該類。
例如，我們可以這樣寫：
- const p = document.querySelector('p');
- p.classList.add('foo');
- p.classList.add('bar');
- p.classList.add('baz');
- p.classList.remove('baz');
要檢查 DOM 元素對象中是否存在類名，可以使用contains方法。
例如，我們可以這樣寫：
- const p = document.querySelector('p');
- p.classList.add('foo');
- p.classList.add('bar');
- const hasBaz = p.classList.contains('baz');
上面判斷 p 元素是否包含 baz 類，因為 p 沒有包含 baz類，所以返回false。
classList屬性還有toggle方法，表示切換類(添加或者移除)，例如下面的代碼：
- const p = document.querySelector('p');
- const button = document.querySelector('button');
- p.classList.add('foo');
- p.classList.add('bar');
- button.onclick = () => {
- p.classList.toggle('bar');
- }
每點擊一次按鈕，p 的上 bar 類就會添加或者移除。
clasList屬性有一個類似數(shù)組的可迭代對象，稱為DOMTokenList對象。因此，我們可以使用展開操作符將其轉(zhuǎn)換為數(shù)組，將clasList轉(zhuǎn)換為一個帶有類名的字符串數(shù)組。
例如，我們可以這樣寫：
- const p = document.querySelector('p');
- p.classList.add('foo');
- p.classList.add('bar');
- const classArr = [...p.classList];
上面 classArr 最終值為[“foo”, “bar”]。
一旦我們將DOMTokenList轉(zhuǎn)換為一個數(shù)組，那么我們就可以使用任何數(shù)組方法來操作代碼。
總結(jié)
帶有 || 操作的長條件語句，我們使用對應(yīng)數(shù)組方法來進行優(yōu)化。
要操作多個類名，我們應(yīng)該使用作為DOM元素對象一部分的classList屬性。通過這種方式，我們可以添加、刪除和切換類，而不需要操作字符串并自己將其設(shè)置為className屬性。
John Au-Yeung 來源：medium 譯者：前端小智
原文：https://levelup.gitconnected.com/javascript-refactoring-tips-making-functions-clearer-and-cleaner-c568c299cbb2
本文轉(zhuǎn)載自微信公眾號「 大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系 大遷世界公眾號。
當前文章：JavaScript重構(gòu)技巧 — 數(shù)組，類名和條件
分享URL：http://www.dlmjj.cn/article/codjchd.html
