Des conseils simples aident à rendre le code CLEAR et MAIN plus facile

Avec ma propre expérience en tant que programmeur frontend, je construis souvent mes propres habitudes lors de l'écriture de code pour aider le code à devenir flexible et à améliorer les capacités de lecture ainsi qu'à maintenir le code. Ce sont tous des conseils très simples mais extrêmement utiles que je souhaite partager afin que vous puissiez parfaitement comprendre au premier coup d'œil.

Technique 1 : Réduire le nombre d’instructions if-else

Chaque fois que nous écrivons quelque chose qui utilise plus de 2 if-else, nous devons nous demander s'il existe une manière plus optimale d'écrire le code. Un exemple simple est le suivant :

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

Dans cet exemple j'écris une fonction pour obtenir les prix des marques de téléphones, si je veux ajouter le prix d'un téléphone oppo, je devrai ajouter une branche if-else, ou je veux modifier le prix d'un téléphone oppo. le téléphone. Téléphone Xiaomi Je vais devoir travailler dur pour trouver l'emplacement du téléphone Xiaomi dans ma mâchoire.

Écrire un code comme celui-ci peut rendre le code susceptible à des erreurs telles qu'être verbeux, difficile à lire, difficile à rechercher et à développer.
Mais ne vous inquiétez pas, je vais vous montrer comment l'écrire correctement sans violer le principe DRY. Nous utiliserons un objet pour stocker les prix des produits au lieu d'utiliser une chaîne if-else-if
.

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

Dans l'exemple amélioré ci-dessus, nous pouvons lire le code plus clairement, ou lorsque nous voulons modifier le prix d'un produit, nous n'avons pas besoin de modifier la logique de base de la fonction getPrice().

Technique 2 : La technique de pipeline réduit le nombre inutile de boucles

const phones = [
    { name: 'Apple', group: 1 },
    { name: 'Samsung', group: 2 },
    { name: 'Xiaomi', group: 1 },
    // more items...
];

const group1 = [];
for (let i = 0; i < phones .length; i++) {
    if (phones[i].group === 1) {
        group1.push(phones [i].name);
    }
}

Il s'agit d'une manière traditionnelle, vous pouvez utiliser une boucle for pour parcourir chaque élément du tableau et vérifier quel élément remplit la condition, puis l'ajouter au tableau de résultats.

Bien que la méthode ci-dessus ne soit pas fausse, écrire du code comme celui-ci peut rendre le code plus verbeux et difficile à lire. Au lieu de cela, nous pouvons utiliser des fonctions courantes telles que le filtre et la carte pour aider à garder le code concis et améliorer la sémantique.

const group1 = phones
    .filter(phone => phone.group === 1)
    .map(phone => phone.name);

Technique 3 : utilisez find pour remplacer les boucles en double

Continuez avec l'exemple de segment téléphonique ci-dessus. Ensuite, utiliser find montre une commodité évidente

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

Cette méthode de recherche vous permet de localiser rapidement le premier élément du tableau qui satisfait à la condition fournie, rendant le code beaucoup plus clair que l'utilisation de boucles traditionnelles.

Technique 4 : Utiliser des inclusions pour remplacer les boucles redondantes

Lorsque nous devons vérifier si un tableau contient une valeur spécifique, l'utilisation d'includes peut simplifier votre code au lieu de parcourir le tableau pour vérifier l'existence d'un élément.

Par exemple :

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

Il vous suffit d'utiliser les inclusions :

const phones = [
    { name: 'Apple', group: 1 },
    { name: 'Samsung', group: 2 },
    { name: 'Xiaomi', group: 1 },
    // more items...
];

const group1 = [];
for (let i = 0; i < phones .length; i++) {
    if (phones[i].group === 1) {
        group1.push(phones [i].name);
    }
}

Cette méthode offre une solution élégante au processus plus fastidieux d'utilisation des boucles traditionnelles.

Cette fonctionnalité est particulièrement utile lorsqu'il s'agit de tableaux que vous devez fréquemment vérifier.

Technique 5 : utiliser des variables qui renvoient des résultats uniques

Pour autant que je sache, en particulier dans les fonctions compactes, nous pouvons utiliser des noms de variables cohérents pour les résultats renvoyés. Cela clarifie l'origine de la valeur de retour et fournit une convention de dénomination de variable standard selon laquelle si quelqu'un d'autre lit votre code, il peut facilement le reconnaître.

const group1 = phones
    .filter(phone => phone.group === 1)
    .map(phone => phone.name);

Technique 6 : Maintenir l'intégrité de l'objet

Lors de la manipulation des données JSON renvoyées par le backend, nous traitons souvent des attributs spécifiques individuellement dans une valeur-clé. Cela est encore plus évident lorsque l’on a parfois des cas qui n’utilisent que quelques attributs. De nombreux programmeurs ont tendance à extraire uniquement les propriétés nécessaires aux opérations, c'est la première méthode à laquelle les gens pensent, mais c'est une manière pratique et éphémère de faire les choses.

Lorsqu'il existe une incertitude quant à savoir si une fonction aura besoin de dépendances supplémentaires ultérieurement, il est conseillé de maintenir l'intégrité de l'objet entier. Par exemple, un composant de fonction peut utiliser une icône et du contenu, mais peut-être que le titre ou la date peuvent être utilisés ultérieurement. Passer des objets entiers aux composants de fonction au lieu de propriétés individuelles réduit non seulement la longueur de la liste des accessoires, mais améliore également la lisibilité et la flexibilité du code

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

? Conclusion finale

Les techniques de codage JS ci-dessus peuvent améliorer les performances qualitatives de votre code, le rendant plus facile à lire et à maintenir à long terme. Alors essayez ces conseils simples dans votre projet et découvrez les améliorations par vous-même. Je vous souhaite un bon codage !!!

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!