JavaScript重構技術：特定於通用代碼

鑰匙要點：

>重構JavaScript增強了代碼可讀性，可維護性，性能和可重複性，輔助錯誤檢測和校正。 通用技術涉及使用變量最大程度地減少冗餘，改進事件處理和精煉類管理以提高靈活，適應性的代碼。 重構之前和之後進行徹底的單位測試對於防止意外後果至關重要。儘管性能提高是可能的，但優先考慮可讀性和可維護性至關重要。 重構應該是整合到開發生命週期中的迭代過程。

>本文由丹·普林斯（Dan Prince）進行同行評審。 感謝SitePoint的同行評審！ > SitePoint論壇線程顯示了控制下拉可視性的代碼。 在功能上，該代碼缺乏魯棒性和適應性。 本文展示了重構技術，以提高可重複使用性和防止未來的能力。

>原始CSS：

>原始JavaScript：

#second { display: none; }
#second.show { display: block; }

本文重構此JavaScript代碼，以更好地可維護性和可重複使用性。 選擇正確的重構路徑：

> JavaScript提供多種解決方案；目標是改進代碼，以避免將來的返工。 刪除冗餘是一個起點，朝著更通用，適應性的代碼發展。 特定的代碼通常是脆弱的，而通用代碼處理更廣泛的情況。 平衡在於在不犧牲可讀性的情況下實現普遍性。

document.getElementById("location").onchange = function () {
  if (this[this.selectedIndex].value === "loc5") {
    document.getElementById("second").className = "show";
  } else {
    document.getElementById("second").className = "";
  }
};

重構：特定於通用：

> >測試驅動的開發（TDD）突出了一個至關重要的原則：隨著測試變得更加具體，代碼變得更加通用。 這增強了代碼處理各種情況的能力。 對於示例代碼，改進包括：

使用變量存儲字符串，集中管理。

>用替換>以提供更好的事件處理和防止覆蓋。

>利用

而不是

管理類名稱而不覆蓋現有類。
• >
• 這些更改增強了對未來修改的彈性並簡化了更新。 onchange> addEventListener
使用變量來防止重複：
• > 在變量中存儲元素ID和触發值可提高可維護性。 使用單個變量引用，而不是對同一元素的多個引用，從而簡化了未來的修改。 classList> className
改進的代碼（使用可變）：

>

這個重構集中化標識符管理。

改進事件處理：

傳統活動處理程序可以被覆蓋。 addEventListener允許多個處理程序進行同一事件，以防止意外覆蓋。

改進的代碼（使用AddeventListener）：>

這確保事件處理程序的持久性。 >

#second { display: none; }
#second.show { display: block; }

改進類處理：

使用>和

>防止現有類覆蓋，維護元素的原始樣式。

classList.add()最終重構代碼： classList.remove()

此代碼更健壯和適應性。

結論：

document.getElementById("location").onchange = function () {
  if (this[this.selectedIndex].value === "loc5") {
    document.getElementById("second").className = "show";
  } else {
    document.getElementById("second").className = "";
  }
};

重構是一個簡單的過程。 “特定於通用”原理（通常是TDD的副產品）增強了代碼靈活性。 這些技術減少了對重複代碼修復的需求，從而導致更可維護和可重複使用的JavaScript。 在JavaScript重構技術上的常見問題（常見問題解答）：

（本節在很大程度上與輸入保持不變，因為它提供了有價值的信息，並且不需要出於釋義目的而需要重大重寫。） 重構JavaScript代碼的主要好處是什麼？ >重構JavaScript代碼提供了許多優點：提高可讀性和可維護性，通過代碼優化提高性能，更輕鬆的錯誤檢測和校正以及增加代碼可重複使用性。 我如何識別需要重構的代碼？ 需要重構的代碼跡象包括代碼重複，過長的方法或功能，過多的類，高複雜性和性能差。代碼分析工具可以幫助識別有問題的領域。

>有哪些常見的JavaScript重構技術？

常見的JavaScript重構技術包括提取方法，重命名變量或功能，刪除死亡代碼，簡化條件表達式以及用直接查詢替換臨時變量。 我如何確保重構不會在代碼中引入新錯誤？ 綜合單位測試至關重要。 在重構之前和之後進行驗證功能的測試仍然不受影響。

>

可以重構改善JavaScript代碼的性能嗎？ 是的，重構可以通過消除不必要的代碼，優化功能並簡化複雜表達式來顯著提高性能。但是，可讀性和可維護性應仍然是主要目標。

>

是否有必要一次重構整個代碼？

不，通常建議使用漸進的重構，專注於特定領域或功能，以提高可管理性和降低風險。

我如何了解有關JavaScript重構技術的更多信息？

>提供了許多在線資源，包括教程，博客，書籍和視頻課程。 可以通過編碼挑戰和開源項目獲得實踐經驗。

我可以使用哪些工具來重構JavaScript代碼？ WebStorm和Visual Studio代碼（如WebStorm）提供內置的重構功能。 諸如ESLINT和JSHINT之類的代碼分析工具有助於識別有問題的代碼部分。

>

可以重構幫助減少JavaScript代碼的大小？

是的，重構可以導致更簡潔的代碼，降低其大小並可能改善網頁加載時間。

是重構一次性過程嗎？

不，重構是整合到開發生命週期中以保持代碼質量和效率的持續過程。

>

以上是JavaScript重構技術：特定於通用代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！