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

Frustrations du développement frontend : une perspective JavaScript

La plainte courante selon laquelle le développement frontend, en particulier JavaScript, est un désordre chaotique vient souvent de sa flexibilité. La capacité d'obtenir le même résultat grâce à plusieurs approches, bien que puissante, peut conduire à une qualité de code incohérente.

Ce n’est pas entièrement inexact. Contrairement au développement back-end, qui bénéficie souvent de cadres et de conventions établis, les meilleures pratiques front-end sont plus diffuses. Les ressources sur les modèles optimaux sont dispersées, ce qui favorise divers styles de codage et rend difficile pour les nouveaux arrivants la compréhension des approches optimales.

Répondre aux idées fausses

Le manque de structure apparente n'implique pas une absence de bonnes pratiques. Un développement JavaScript efficace repose sur l’exploitation de modèles établis et de méthodes efficaces. De nombreuses ressources, telles que la documentation JavaScript de Mozilla Developer Network (MDN), fournissent des conseils sur les implémentations optimales. La clé est un apprentissage dédié et l’application de ces connaissances.

Un exemple de code pratique

Considérez cet extrait de code de production réel (simplifié pour plus de clarté) : il fonctionne correctement, mais sa structure pourrait être considérablement améliorée pour plus de lisibilité et de performances. L'exemple se concentre sur la manipulation de base des tableaux et des objets.

Code initial (moins idéal) :

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

storesList.reduce((previous, current) => {
  current.activeStories.forEach(store => {
    previous.push({
      ...store,
      label: `Opened ${store.name}`
    })
  })

  return previous
}, [])

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

Cette approche, utilisant .reduce et .forEach, est inutilement verbeuse. JavaScript offre des outils plus efficaces.

Code amélioré :

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

Cette version révisée utilise .flatMap pour aplatir le tableau et .map pour ajouter la propriété "label", ce qui donne un code plus propre et plus concis.

Conclusion

JavaScript offre un riche ensemble d'outils pour créer du code de haute qualité. La clé est un apprentissage dédié et l'application de techniques appropriées, plutôt que de simplement écrire du code pour des raisons de fonctionnalité.

Lecture recommandée :

• [PT-BR] - https://www.php.cn/link/729404b28f3bd32761c667a668453f4c
• [FR] - https://www.php.cn/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!