JavaScriptで同様のコードを繰り返すことを避ける方法：Q＆A Webページを例にとる

この記事は、JavaScript開発で同様のコードを繰り返し作成する問題を解決することを目的としています。質問と回答のWebページを例にとると、それは三元演算子と機能を使用してコード冗長性を回避し、コードの保守性と読みやすさを改善する方法を示しています。条件付き判断ステートメントを簡素化する方法と、複製コードブロックを再利用可能な関数にカプセル化する方法に焦点を当て、コードの量を減らし、開発効率を向上させます。

重複コードを削減するための戦略

開発プロセス中に、さまざまな条件に基づいて同様の操作を実行する必要がある状況に遭遇することがよくあります。コードを直接コピーして貼り付けると、コードの冗長性が発生し、維持が困難になります。重複コードを減らすための一般的な戦略を以下に示します。

1. 3成分演算子を使用して条件判断を簡素化します。条件判断に条件が2つしかない場合、3成分演算子条件を使用できますか？ expr1：expr2は、コードをより簡潔にするためのif ... elseステートメントを置き換えます。

2. 再利用可能な関数のカプセル化：重複コードブロックを関数にカプセル化します。これは、同じコードの繰り返しの書き込みを避けて、異なる場所で呼び出すことができます。

例：Q＆A Webコードを最適化します

提供されたQ＆A Webコードでは、$（'。go-btn '）。質問と回答のページコードの一部は、主に次の側面に反映されています。

• 選択したトピック（生物学、化学、物理学）に従って、異なる問題配列（BiologyQ、ChemistryQ、PhysicsQ）を選択します。
• 選択したトピックに従って、対応するコース（#MyBiology、#MyChemistry、#myphysics）を取得します。
• フィルタリングされた問題配列をシャッフルします（シャッフル）。
• 対応するdiv要素にシャッフルされた問題を表示します（＃q1、＃q2、＃q3）。
• 選択した質問の数に従って、対応するdiv要素を表示します。

次のコードは、三元演算子を使用してトピックとコースの選択を簡素化する方法を示しています。

 $（document）.ready（function（）{
    $（'。go-btn '）。on（' click '、function（）{

        var array =（$（ '＃mytopic'）。val（）== 'biology'？biologyq：（$（ '＃mytopic'）。val（）== 'chemistryq：physicsq））;
        const lessonselected =（$（ '＃mytopic'）。val（）== 'biology'？$（ '＃mybiology'）。val（）：（$（ '＃mytopic'）。
        VAR LESSONRESULT = $ .GREP（array、function（e）{return e.lesson == lessonselected;}）;

        {
            const array = lessonresult;

            関数シャッフル（配列）{
                for（let i = array.length-1; i> 0; i-）{
                    J = math.floor（math.random（） *（i 1））;
                    temp = array [i];
                    配列[i] = array [j];
                    配列[j] = temp;
                }
                返品配列;
            };

            const result = shuffle（array）;
            $（ '＃q1'）。html（result [0] .question）;
            $（ '＃q2'）。html（result [1] .question）;
            $（ '＃q3'）。html（result [2] .question）;

            var currentVal = $（ '＃myNumber'）。val（）;
            $（ '。selected'）。hide（）。slice（0、currentVal）.show（）;
        }
    }）;
}）;

コード説明：

• var array =（$（ '＃mytopic'）。val（）== 'biology'？biologyq：（$（ '＃mytopic'）。val（）== 'chemistry'？chemistryq：physicsq））;：このコードは、選択したトピックに基づいて対応する問題アレイを選択します。生物学が選択されている場合、アレイは生物学に等しくなります。化学が選択されている場合、アレイは化学と等しくなります。それ以外の場合、配列は物理学に等しくなります。
• const lessonselected =（$（ '＃mytopic'）。val（）== 'biology'？$（ '＃mybiology'）。val（）：（$（ '＃mytopic'）。val（）== 'chemistry'？$（ '＃mychemistry'）。選択したトピックについて。

さらなる最適化：カプセル化関数

三元演算子を使用するとコードを簡素化できますが、シャッフルや表示の問題など、いくつかの重複したコードブロックがまだあります。これらのコードブロックは、重複をさらに減らすために関数にカプセル化できます。

シャッフル関数をカプセル化：

元のコードには、配列をシャッフルするシャッフル関数が既に含まれています。この関数は、変更なしで直接使用できます。

注：

• 関数が単一であり、特定のタスクの完了にのみ責任があることを確認してください。
• 関数に適切なコメントを追加し、その関数とパラメーターを指定します。

要約します

三元演算子と機能を使用することにより、JavaScriptコードの重複を効果的に削減し、コードの保守性と読みやすさを改善できます。実際の開発では、特定の状況に応じて適切な戦略を選択し、過度の最適化を避け、コードを簡潔で理解しやすくしておく必要があります。

以上がJavaScriptで同様のコードを繰り返すことを避ける方法：Q＆A Webページを例にとるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。