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中文网其他相关文章！