第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

Array vs If 在索引 for 循環(huán)中的性能?

Array vs If 在索引 for 循環(huán)中的性能?

浮云間 2022-10-13 14:29:53
哪個(gè)性能更好?如果語(yǔ)句更具可讀性,但是如果我在數(shù)組(數(shù)據(jù)庫(kù)式)中創(chuàng)建值并讓我的 for 循環(huán)根據(jù)當(dāng)前索引調(diào)用函數(shù),這使得進(jìn)一步編輯變得更容易。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"]var button = document.getElementsByTagName("button")for (var i = 0, len = button.length; i < len; ++i) {  (function(index) {    button[i].addEventListener("click",      function() {        document.getElementById("msg").innerHTML = msg[index];      });  })(i);}<button>Tab1</button><button>Tab2</button><button>Tab3</button><button>Tab4</button><br><p id="msg">Message here</p>var button = document.getElementsByTagName("button")for (var i = 0, len = button.length; i < len; ++i) {  (function(index) {    button[i].addEventListener("click",      function() {      if (index==0){        document.getElementById("msg").innerHTML = "You are now viewing Tab number one";      }      if (index==1) {        document.getElementById("msg").innerHTML = "You are now viewing Tab number two";      }      if (index==2) {        document.getElementById("msg").innerHTML = "You are now viewing Tab number three";      }      if (index==3) {        document.getElementById("msg").innerHTML = "You are now viewing Tab number four";      }      });  })(i);}<button>Tab1</button><button>Tab2</button><button>Tab3</button><button>Tab4</button><br><p id="msg">Message here</p>
查看完整描述

3 回答

?
喵喵時(shí)光機(jī)

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="...">


查看完整回答
反對(duì) 回復(fù) 2022-10-13
?
MYYA

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è)classorid并以此為它們的消息編制索引。這至少意味著按鈕和消息不依賴于它們的確切順序。如果您不確定哪些按鈕將出現(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 上工作。



查看完整回答
反對(duì) 回復(fù) 2022-10-13
?
陪伴而非守候

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。


查看完整回答
反對(duì) 回復(fù) 2022-10-13
  • 3 回答
  • 0 關(guān)注
  • 154 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)