3 回答

TA貢獻(xiàn)1846條經(jīng)驗(yàn) 獲得超7個(gè)贊
這就像問(wèn)我的簡(jiǎn)單數(shù)字時(shí)鐘應(yīng)該使用哪種高端顯卡?性能差異可以忽略不計(jì)。使用生活而不是let已經(jīng)比您的實(shí)際問(wèn)題產(chǎn)生更大的性能影響,而是數(shù)組索引與多個(gè) ifs。
它仍然無(wú)關(guān)緊要。
關(guān)于選項(xiàng),我發(fā)現(xiàn)它們都很難閱讀,尤其是在按鈕數(shù)量變大的情況下。
這個(gè)怎么樣?
document.querySelector(".buttons").addEventListener("click", function(event) {
const button = event.target.closest("button[data-msg]");
if (button) {
document.querySelector("#msg").innerText = button.dataset.msg;
}
})
<div class="buttons">
<button type="button" data-msg="You are now viewing Tab number one">Tab1</button>
<button type="button" data-msg="You are now viewing Tab number two">Tab2</button>
<button type="button" data-msg="You are now viewing Tab number three">Tab3</button>
<button type="button" data-msg="You are now viewing Tab number four">Tab4</button>
</div>
<p id="msg">Message here</p>
海事組織 漂亮和聲明性。并且易于擴(kuò)展。
除了這些按鈕之外,該條件if(button)
還涉及您可能添加其他div.buttons
可以單擊的內(nèi)容的可能性。
在.closest("button[data-msg]")
某些情況下,您可能會(huì)在可能觸發(fā)事件的按鈕內(nèi)添加更多標(biāo)記。我們想要<button data-msg="...">

TA貢獻(xiàn)1868條經(jīng)驗(yàn) 獲得超4個(gè)贊
對(duì)于 4 項(xiàng),甚至 40 項(xiàng),性能無(wú)關(guān)緊要:計(jì)算機(jī)速度非???,而且列表非常短。更重要的是閱讀和維護(hù)的難度。
表現(xiàn)
但值得研究一些潛在的性能原則,特別是在列表方面,因?yàn)樾×斜碛凶兇蟮膼廊粟厔?shì)。
類(lèi)似的數(shù)組查找button[i]
是常數(shù)時(shí)間或 O(1)。這意味著無(wú)論button
獲取多大的查找都將始終花費(fèi)相同的時(shí)間。
而連續(xù)的 if 語(yǔ)句或 aswitch
必須嘗試每一個(gè),直到找到匹配的一個(gè)。最好的情況i
總是 0 并且必須比較 1 次。最壞的情況i
總是 3,它必須比較 4 次。如果i
分布均勻,則平均需要 2 次。這稱為線性時(shí)間或 O(n),查找時(shí)間隨著大小的增加而button
增加。如果button
變大兩倍,則時(shí)間變長(zhǎng)兩倍。
隨著數(shù)組查找button
變大,性能將保持不變。隨著 if 語(yǔ)句button
變大,性能會(huì)變差。
可讀性
現(xiàn)在,剛開(kāi)始,你會(huì)發(fā)現(xiàn)線性代碼更容易閱讀。您會(huì)更喜歡按照?qǐng)?zhí)行順序在頁(yè)面上呈現(xiàn)所有內(nèi)容。但是隨著代碼變得越來(lái)越復(fù)雜,這很快就會(huì)變得不堪重負(fù),并且會(huì)導(dǎo)致大量的剪切和粘貼代碼違反DRY 原則:不要重復(fù)自己。
有經(jīng)驗(yàn)的程序員發(fā)現(xiàn)最好將盡可能多的細(xì)節(jié)推到其他地方,這樣人們就可以清楚地看到重要的部分。重要的部分是它為每個(gè)添加消息的按鈕生成單擊處理程序msg
。不重要的是該信息究竟是什么。
通過(guò)從循環(huán)中提取函數(shù),您可以使代碼更簡(jiǎn)單,并可能節(jié)省一些內(nèi)存。
var addMsgListener = function(element, message) {
element.addEventListener("click",
function() {
document.getElementById("msg").innerHTML = message;
}
)
};
var buttonMessages = [
"You are now viewing Tab number one",
"You are now viewing Tab number two",
"You are now viewing Tab number three",
"You are now viewing Tab number four"
]
var button = document.getElementsByTagName("button")
for (var i = 0, len = button.length; i < len; ++i) {
addMsgListener(button[i], buttonMessages[i]);
}
請(qǐng)?jiān)徫铱赡芎茉愀獾?Javascript。
現(xiàn)在很清楚該循環(huán)的作用,它為每個(gè)按鈕添加了一個(gè)消息偵聽(tīng)器。如果我關(guān)心消息監(jiān)聽(tīng)器是什么,我可以選擇查看addMessageListener
. 或者我可以跳過(guò)它。這使得代碼“可略讀”;人們可以閱讀代碼以了解它的作用,并且只在必要時(shí)深入了解細(xì)節(jié)。這不是線性閱讀,但這是你會(huì)習(xí)慣并喜歡的東西。
請(qǐng)注意,addMsgListener
不再指msg
代也不button
。這些是由使用它的循環(huán)選擇的。它現(xiàn)在是通用的,可用于其他元素和消息。
更多的可重用性現(xiàn)在將展現(xiàn)出來(lái);事件和 id 是否需要硬編碼?這種在不改變代碼的情況下改變代碼的過(guò)程稱為重構(gòu)。
維護(hù)
每次要更改消息時(shí),都必須更改代碼。如果要添加消息,則必須添加代碼并重新編號(hào)。如果要?jiǎng)h除消息,則必須刪除代碼并重新編號(hào)。如果要對(duì)消息重新排序,則必須重新編號(hào)。這需要開(kāi)發(fā)人員進(jìn)行 UI 更改。而且這個(gè)過(guò)程很容易出錯(cuò),如果您刪除了一條消息而忘記更改索引怎么辦?
通過(guò)將消息放入數(shù)組中,您只需更改msg
. 如果要添加消息,請(qǐng)?jiān)?中添加一行msg
。如果要?jiǎng)h除消息,請(qǐng)從 中刪除一行msg
。如果要對(duì)消息重新排序,請(qǐng)重新排序msg
。
msg
不必存在于代碼中,它可以進(jìn)入配置文件,使非編碼人員更容易更改。
遠(yuǎn)距離行動(dòng)
這導(dǎo)致了我們的最后一個(gè)問(wèn)題:msg
需要與按鈕的長(zhǎng)度和順序相同。每次更改 HTML 時(shí),都msg
可能需要更改,反之亦然。但是按鈕及其消息位于不同的位置。這被稱為遠(yuǎn)距離操作:更改代碼的一部分會(huì)受到代碼完全不同部分中的某些內(nèi)容的影響。
為避免這種情況,您可以給每個(gè)按鈕一個(gè)class
orid
并以此為它們的消息編制索引。這至少意味著按鈕和消息不依賴于它們的確切順序。如果您不確定哪些按鈕將出現(xiàn)在 HTML 中,但希望為所有可能的按鈕提供消息,這將很有用。
var msg = {
car: "??",
truck: "??",
train: "??",
plane: "?"
}
你可以走另一條路;在 Javascript 中生成按鈕及其消息。它仍然將有關(guān)每個(gè)按鈕的所有信息保存在一起。如果按鈕是動(dòng)態(tài)的并且可以更改,這將很有用。
您可以按照 Thomas 的建議進(jìn)行操作,并將消息附加到按鈕本身。然后所有關(guān)于按鈕的數(shù)據(jù)都在一起。如果您添加、刪除或重新排序按鈕,消息仍然有效。這允許人們只在 HTML 上工作。

TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超8個(gè)贊
在這種情況下,使用tabindex或data-index屬性可能是一個(gè)好主意。示例代碼段不涉及循環(huán)并使用data-index.
var msg = [
"You are now viewing Tab number one",
"You are now viewing Tab number two",
"You are now viewing Tab number three",
"You are now viewing Tab number four"
]
document.body.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
if (e.target.tagName == 'BUTTON') {
document.getElementById('msg').innerHTML = msg[e.target.dataset['index']];
}
});
<button data-index="0">Tab1</button>
<button data-index="1">Tab2</button>
<button data-index="2">Tab3</button>
<button data-index="3">Tab4</button>
<br>
<p id="msg">Message here</p>
編輯
tabindex如果您將擁有大量選項(xiàng)卡,請(qǐng)盡量避免使用。以下部分摘自MDN
避免使用大于 0 的 tabindex 值。這樣做會(huì)使依賴輔助技術(shù)的人難以導(dǎo)航和操作頁(yè)面內(nèi)容。相反,應(yīng)按邏輯順序編寫(xiě)包含元素的文檔。
此外tabindex,最大值為 32767。
添加回答
舉報(bào)