JavaScriptリファクタリング手法：一般的なコードに固有

キーテイクアウト：

JavaScriptのリファクタリングにより、コードの読みやすさ、保守性、パフォーマンス、および再利用性が向上し、バグの検出と修正が促進されます。 一般的な手法には、変数を使用した冗長性を最小限に抑え、イベント処理の改善、およびより柔軟で適応性のあるコードのためにクラス管理を改良することが含まれます。 リファクタリングの前後に徹底的な単体テストは、意図しない結果を防ぐために重要です。パフォーマンスの向上は可能ですが、読みやすさと保守性の優先順位付けが最重要です。 リファクタリングは、開発ライフサイクルに統合された反復プロセスである必要があります。

この記事は、ダン・プリンスによって査読されました。 SitePointのピアレビュアーに貢献してくれたことに感謝します！ SitePoint Forumスレッドがドロップダウンの可視性を制御するコードを紹介しました。 機能的ですが、コードには堅牢性と適応性がありませんでした。 この記事では、再利用性と将来の防止の改善のためのリファクタリング技術を示しています。

元のcss：

元のjavascript：

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

この記事は、保守性と再利用性を向上させるために、このJavaScriptコードをリファクタリングします。

適切なリファクタリングパスの選択：

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

javascriptは複数のソリューションを提供します。目標は、将来のやり直しを避けるためにコードを改善することです。 冗長性を削除することは出発点であり、より一般的で適応性のあるコードに向かって進みます。 特定のコードはしばしば脆く、一般的なコードはより広い範囲の状況を処理します。 バランスは、読みやすさを犠牲にすることなく一般性を達成することにあります

リファクタリング：genericに固有：

テスト駆動型開発（TDD）は、重要な原則を強調しています。テストがより具体的になるにつれて、コードはより一般的になります。 これにより、多様なシナリオを処理するコードの機能が向上します。 コードの例では、改善には次のものが含まれます

文字列を保存するために変数を使用し、管理を集中化します。 イベントの取り扱いを改善し、上書きを防ぐために、

に置き換えます。

の代わりに

を使用して、既存のクラスを上書きせずにクラス名を管理します。
これらの変更は、将来の変更に対する回復力を高め、更新を簡素化します。
• onchange変数を使用して重複を防ぐ：addEventListener
• 要素IDを保存して変数に値をトリガーすると、保守性が向上します。 同じ要素への複数の参照の代わりに、単一の変数参照が使用され、将来の変更が簡素化されます。 classListclassName改良コード（使用率が変動します）：

このリファクタリングは、識別子管理を集中化します

イベント処理の改善：

従来のイベントハンドラーは上書きできます。 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リファクタリング手法に関するよくある質問（FAQ）：（このセクションは、貴重な情報を提供し、言い換えの目的のために重要な書き換えを必要としないため、入力からほとんど変化しません。）

JavaScriptコードをリファクタリングすることの重要な利点は何ですか？

JavaScriptコードのリファクタリングは、多くの利点を提供します：読みやすさと保守性の向上、コードの最適化によるパフォーマンスの向上、バグの検出と修正の容易、およびコードの再利用性の向上。

リファクタリングが必要なコードを識別するにはどうすればよいですか？ コードのリファクタリングが必要なコードの兆候には、コードの複製、過度に長い方法または機能、過度に大きなクラス、高い複雑さ、パフォーマンスの低さが含まれます。コード分​​析ツールは、問題のある領域を特定するのに役立ちます 一般的なJavaScriptのリファクタリング手法は何ですか？

一般的なJavaScriptのリファクタリング手法には、抽出方法、変数や関数の名前変更、死んだコードの削除、条件付き式の簡素化、一時的な変数の直接クエリに置き換えることが含まれます。

リファクタリングがコードに新しいバグが導入されないことを確認するにはどうすればよいですか？

包括的な単体テストが重要です。 機能を確認するためにリファクタリングの前後にテストを実行してください。

リファクタリングはJavaScriptコードのパフォーマンスを改善できますか？

はい、リファクタリングは、不必要なコードを排除し、関数を最適化し、複雑な式を簡素化することにより、パフォーマンスを大幅に向上させることができます。ただし、読みやすさと保守性は主要な目的のままである必要があります

コード全体を一度にリファクタリングする必要がありますか？

いいえ、特定の領域または機能に焦点を当てた増分リファクタリングは、より良い管理性とリスクの低下に一般的に推奨されます。

JavaScriptリファクタリングテクニックの詳細については、どうすればご覧ください。

チュートリアル、ブログ、書籍、ビデオコースなど、多数のオンラインリソースが利用可能です。 コーディングの課題とオープンソースプロジェクトを通じて実践的な経験を得ることができます。

JavaScriptコードのリファクタリングに使用できますか？

WebStormやVisual StudioコードのようなIDESは、取り付けられたリファクタリング機能を提供します。 EslintやJshintなどのコード分析ツールは、問題のあるコードセクションを特定するのに役立ちます。

リファクタリングは、JavaScriptコードのサイズを削減するのに役立ちますか？

はい、リファクタリングはより簡潔なコードにつながり、そのサイズを縮小し、Webページの読み込み時間を改善する可能性があります。

は、1回限りのプロセスをリファクタリングしていますか？

いいえ、リファクタリングは、コードの品質と効率を維持するために、開発ライフサイクルに統合された継続的なプロセスです。

以上がJavaScriptリファクタリング手法：一般的なコードに固有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。