Les anti-patterns

Définition

Il existe 3 catégories d’anti-pattern, il ne s’agira jamais d’erreur de programmation mais de choix ou de techniques qui alourdissent le code et rende le maintien du projet impossible

Les anti-patterns de développement

Pour moi, les anti-patterns conceptuels sont peu importants et faciles à corriger. Il s’agit simplement de changer des habitudes et des routines de programmation.

Commençons par les plus évidents

• Le Copier/Coller

  Il ne s’agit pas de copier une solution trouvée sur internet et la coller telle quelle dans le projet. On sait que faire cela entraînera une erreur puisque si le contexte change la fonction change de comportement. Non le copier/Coller consiste à récupérer un morceau de code sur une page et la coller sur une autre. Evidement dupliquer un code sans faire de vérification ça va créer des erreurs.

• La dorure ou la paralysie par perfection

  Une fonction doit arriver à un résultat. Une fois le résultat atteint, il faut passer à autre chose. Par exemple : on demande une fonction qui permet de mettre toute les valeurs entière d’un tableau au carré qu'on utilisera dans un forEach
  Alors on propose ceci

  • let a=[3,2,5,2];
  • function carre(el, i, arr){
    • arr[i]=el*el;
  • }
  • a.forEach(carre);

  C'est bien mais si l'élément n'est pas un entier

  • let a=[3,2,5,2];
  • function carre(el, i, arr){
    • arr[i]=parseInt(el)*parseInt(el);
  • }
  • a.forEach(carre);

  Et s'il n'y a pas d'élément dans le tableau

  • let a=[3,2,5,2];
  • function carre(el, i, arr){
    • if(arr.length?!=0)
      • arr[i]=parseInt(el)*parseInt(el);
    • else
      • return false
  • }
  • a.forEach(carre);

  Etc.

  Le développeur a perdu un temps. Le tableau est un tableau d'entier c'est dans le cahier des charges et un foreach sur un tableau vide ça fait un tableau vide

• Surcharge d'interface

  Les développeurs web en sont souvent victime. Sur la page du site il y a un logo dans la barre de navigation (navbar) permettant de revenir à l'accueil puis on met un lien dans la navbar permettant aussi de revenir à l'accueil au cas où cliquer sur le logo ne soit pas clair. Et sur la page il y a le fil d'ariane (breadCrumb) qui permet aussi de revenir à l'accueil car on vient forcement de là. Un bouton ou une fonction est dédié à une et une seule tâche si 2 boutons ont le même comportement ou si 2 fonctions font la même chose alors il y en a un ou une en trop.

• Le panier garni ou le panier de données

  Ça consiste à créer une structure de données complexe et détaillée qui servira de paramètre à des fonctions qui ne se serviront que d'une partie des informations de la structure.

  Très bien j’ai un objet contact avec un nom, un prénom, une date de naissance et un numéro de téléphone. Et une fonction pour dire Bonjour à ce contact.

  • let contact={
    • nom:"PAUL",
    • prenom:"Adrien",
    • naissance:"29/05/1959",
    • tel:"00-00-00-00-00"
  • }
  • function direBonjour(c){
    • console.log("Bonjour "+c.prenom);
  • }
  • direBonjour(contact);

  J'ai une question

  à quoi me servent le nom, la date de naissance, et le téléphone dans cette fonction si je ne m'en sers pas ?

  Ce type de programmation rend le code difficile à comprendre donc à maintenir.

  Donc voila la bonne notation.

  • let contact={
    • nom:"PAUL",
    • prenom:"Adrien",
    • naissance:"29/05/1959",
    • tel:"00-00-00-00-00"
  • }
  • function direBonjour(prenom){
    • console.log("Bonjour "+prenom);
  • }
  • direBonjour(contact.prenom);