JavaScript重构技术：特定于通用代码-js教程-PHP中文网

JavaScript Refactoring Techniques: Specific to Generic Code

钥匙要点：

>重构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重构技术包括提取方法，重命名变量或功能，删除死亡代码，简化条件表达式以及用直接查询替换临时变量。 我如何确保重构不会在代码中引入新错误？ 综合单位测试至关重要。在重构之前和之后进行验证功能的测试仍然不受影响。