Comment éviter la duplication du code: pratique d'optimisation de la page Web JavaScript

Cet article vise à résoudre le problème de la duplication du code en raison de la sélection des sujets dans le développement Web JavaScript Q&A. En adoptant les opérateurs ternaires et l'encapsulation des fonctions, nous montrerons comment rationaliser le code, améliorer la maintenabilité et fournir une architecture plus flexible pour les extensions ultérieures. Le noyau consiste à déterminer dynamiquement la source de données et les sélections, évitant ainsi d'écrire des blocs de code similaires pour chaque sujet.

Les dangers et les solutions de duplication de code

Lors du développement d'une page Web de questions / réponses, il est un problème courant d'écrire à plusieurs reprises à plusieurs reprises le même code pour différents sujets (tels que la biologie, la chimie, la physique). Cette approche augmente non seulement la quantité de code et réduit la lisibilité, mais rend également les erreurs sujettes à la maintenance et aux extensions ultérieures. Lorsque vous devez ajouter de nouveaux sujets ou modifier la logique existante, plusieurs codes doivent être modifiés, ce qui augmente les coûts de maintenance et les risques.

Le cœur de la résolution de ce problème est de résumer la logique répétitive et de lui permettre d'ajuster dynamiquement le comportement en fonction de différents sujets. Les méthodes courantes comprennent:

• Utilisez les opérateurs ternaires: sélectionnez dynamiquement les sources de données (par exemple, les tableaux de questions) et les cours sélectionnés en fonction des sujets.
• Encapsulation de la fonction: encapsule les blocs de code en double dans les fonctions et implémentez différents comportements en passant par des paramètres.
• Axé sur les données: Stockez des sujets, des cours et des données de problème dans une structure de données unifiée pour stimuler le comportement de la page via la configuration.

Implémentation de code optimisée

Le code suivant montre comment utiliser les opérateurs ternaires pour simplifier la logique de sélection des sujets, réduisant ainsi la duplication de code.

 $ (document) .ready (function () {
    $ ('. go-btn'). sur ('click', function () {

        var array = ($ ('# mytopic'). val () == 'biology'? biologyq: ($ ('# mytopic'). val () == 'chimie'? Chemistryq: Physicsq));
        const le courslected = ($ ('# mytopic'). val () == 'biology'? $ ('# mybiology'). val (): ($ ('# mytopic'). val () == 'chimie'? $ ('# myChemistry'). Val (): $ ('# myphysics').
        var lesonResult = $ .Grep (array, function (e) {return e.lesson == leseNesed;});

        {
            const Array = LesonResult;

            fonction shuffle (array) {
                for (Laisse i = array.length - 1; i> 0; i--) {
                    Soit j = math.floor (math.random () * (i 1));
                    Soit temp = array [i];
                    array [i] = array [j];
                    Array [j] = temp;
                }
                Tableau de retour;
            };

            const result = shuffle (array);
            $ ('# q1'). html (résultat [0] .Quertion);
            $ ('# q2'). html (résultat [1].
            $ ('# q3'). html (résultat [2] .Quittion);

            var currentVal = $ ('# myNumber'). Val ();
            $ ('. Selected'). Hide (). Slice (0, CurrentVal) .show ();
        }
    });
});

Le cœur de ce code est les deux lignes suivantes:

 var array = ($ ('# mytopic'). val () == 'biology'? biologyq: ($ ('# mytopic'). val () == 'chimie'? Chemistryq: Physicsq));
const le courslected = ($ ('# mytopic'). val () == 'biology'? $ ('# mybiology'). val (): ($ ('# mytopic'). val () == 'chimie'? $ ('# myChemistry'). Val (): $ ('# myphysics').

Ici, l'opérateur ternaire est utilisé pour sélectionner dynamiquement la source de données correspondante (BiologyQ, ChemistryQ, PhysicsQ) et le sélecteur de cours (#Mybiology, #MyChemistry, #Myphysics) basé sur le sujet sélectionné par l'utilisateur. De cette façon, la structure if ... else if ... else qui devait à l'origine être écrite pour chaque sujet est simplifiée en une seule ligne de code, améliorant considérablement la lisibilité et la maintenabilité du code.

Optimisation supplémentaire: encapsulation de la fonction

Bien que l'utilisation des opérateurs ternaires puisse simplifier le code, l'enveloppe du code dans une fonction est plus efficace si la logique est plus complexe, ou si la même logique doit être réutilisée à plusieurs endroits.

Par exemple, la logique d'obtenir le tableau de problèmes et le sélecteur de cours basé sur le sujet peut être encapsulé en une fonction:

 fonction getTopicData (thème) {
  commutateur (sujet) {
    Cas «biologie»:
      return {array: biologyq, leseNelector: '#mybiology'};
    Cas «chimie»:
      return {Array: ChemistryQ, leseNelector: '#mychemistry'};
    Cas «physique»:
      return {array: Physicsq, leseNelector: '#myphysics'};
    défaut:
      return {array: [], leseNelector: ''};
  }
}

Ensuite, utilisez cette fonction dans le gestionnaire d'événements:

 $ (document) .ready (function () {
    $ ('. go-btn'). sur ('click', function () {
        const topic = $ ('# mytopic'). val ();
        const topicdata = getTopicData (sujet);
        var array = topicData.array;
        const le moins élu = $ (topicData.lessonselector) .Val ();
        var lesonResult = $ .Grep (array, function (e) {return e.lesson == leseNesed;});

        {
            const Array = LesonResult;

            fonction shuffle (array) {
                for (Laisse i = array.length - 1; i> 0; i--) {
                    Soit j = math.floor (math.random () * (i 1));
                    Soit temp = array [i];
                    array [i] = array [j];
                array [i] = array [j];
                Array [j] = temp;
                }
                Tableau de retour;
            };

            const result = shuffle (array);
            $ ('# q1'). html (résultat [0] .Quertion);
            $ ('# q2'). html (résultat [1].
            $ ('# q3'). html (résultat [2] .Quittion);

            var currentVal = $ ('# myNumber'). Val ();
            $ ('. Selected'). Hide (). Slice (0, CurrentVal) .show ();
        }
    });
});

Résumé et précautions

En utilisant les opérateurs ternaires et l'encapsulation des fonctions, nous pouvons réduire efficacement la duplication du code dans le développement Web JavaScript et améliorer la lisibilité au code et la maintenabilité.

Notes:

• Lors du choix d'utiliser des opérateurs ternaires ou de l'encapsulation des fonctions, les compromis doivent être effectués en fonction des conditions réelles. Si la logique est relativement simple, vous pouvez utiliser des opérateurs ternaires; Si la logique est relativement complexe ou doit être réutilisée à plusieurs endroits, vous devez utiliser l'encapsulation de la fonction.
• Lors de la conception de structures de données, vous devez essayer de maintenir l'uniformité pour faciliter l'expansion et la maintenance ultérieures.
• Lorsque vous rédigez du code, vous devez prêter attention à la lisibilité du code et ajouter des commentaires appropriés pour faciliter les autres pour comprendre et maintenir le code.

En suivant ces principes, nous pouvons écrire du code JavaScript de haute qualité et facile à maintenir, ce qui peut améliorer l'efficacité du développement et réduire les coûts de maintenance.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!