Pourquoi JavaScript n'est-il pas un gâchis ?

Ça me décourage toujours...

Cela m'exaspère d'entendre que le développement frontend est un gâchis, en particulier l'affirmation selon laquelle JavaScript "accepte tout" et peut être écrit de n'importe quelle manière sans affecter le résultat final.

En fait, ce n'est pas entièrement faux. Il est vrai que JavaScript permet plusieurs approches pour atteindre le même objectif.

Le problème réside dans le manque de modèles de conception aussi bien définis que dans le backend. En front-end, les meilleures pratiques sont dispersées, générant une diversité d’opinions et un manque d’uniformité. Cette dispersion rend le développement et la compréhension difficiles, surtout pour les débutants. Même celui qui écrit ceci a ses propres opinions.

Le point clé…

Au-delà de la frustration, je tiens à souligner que le manque de preuves de bonnes pratiques ne veut pas dire qu'elles n'existent pas. Il est essentiel de rechercher des connaissances et d’appliquer au moins les bases des modèles de conception. En JavaScript, il existe de nombreuses ressources avec des implémentations et des modèles établis. Il faut juste du temps pour lire et comprendre son objectif et son utilisation appropriée. Exemple : Documentation Mozilla pour JavaScript.

Un exemple pratique…

Le code suivant est issu d'un projet réel en production. Bien qu'il fonctionne correctement, sa mise en œuvre pourrait être améliorée en termes de lisibilité et de performances.

Nous ajusterons certaines parties pour les aligner sur les recommandations de la documentation JavaScript, en utilisant des méthodes et des fonctions plus efficaces. Nous nous concentrerons sur un concept de base : la manipulation de tableaux et d'objets. Le code est simplifié à des fins pédagogiques.

Commençons par un objet, représentant les données reçues d'une API backend :

<code class="language-javascript">const storesList = [{
  activeStories: [
    {
      name: 'Starbucks',
      code: 1
    },
    {
      name: 'Duck Duck Coffe',
      code: 2
    }
  ],
  inactiveStories: [
    {
      name: 'Mac Coffe',
      code: 3
    }
  ]
}]</code>

Nous devons ajouter un champ "libellé" avec le préfixe "Ouvert" suivi du nom du magasin.

Regardons d'abord une implémentation « moins idéale », qui n'utilise pas les meilleurs outils JavaScript :

<code class="language-javascript">storesList.reduce((previous, current) => {
  current.activeStories.forEach(store => {
    previous.push({
      ...store,
      label: `Opened ${store.name}`
    })
  })

  return previous
}, [])

// resultado:
[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]</code>

On regarde .reduce, .forEach et .push, histoire de reconstituer une liste. Le manque d'utilisation de .flatMap et .map est évident. La syntaxe est déroutante et verbeuse.

Regardons une implémentation améliorée :

<code class="language-javascript">storesList.flatMap((item) => {
  return item.activeStories
}).map((item) => {
  return {
    ...item,
    label: `Opened ${item.name}`
  }
})</code>

Plus simple, non ?

.flatMap "aplatit" le tableau d'objets à un seul niveau :

<code class="language-javascript">[
    {
        "name": "Starbucks",
        "code": 1
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2
    }
]</code>

Ensuite, .map "remappe" le tableau, en ajoutant la propriété "label":

<code class="language-javascript">[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]</code>

Conclusion…

JavaScript offre les outils nécessaires pour écrire du code de qualité. L'important est de l'étudier et d'appliquer correctement les concepts, pas seulement de programmer pour le plaisir de programmer.

Recommandations de lecture :

• [PT-BR] - //m.sbmmt.com/link/729404b28f3bd32761c667a668453f4c
• [FR] - //m.sbmmt.com/link/f5c80b20fdee4e645ff315a56f12a716

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!