Gérer correctement les valeurs null

Introduction

Dans ce projet, vous allez apprendre à corriger un bogue dans la bibliothèque vue-router-2.7.0 lié à la gestion des valeurs null dans le paramètre query.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment localiser et comprendre la fonction isObjectEqual dans le fichier vue-router-2.7.0/src/util/route.js.
• Comment corriger la fonction isObjectEqual pour gérer correctement les valeurs null.
• Comment reconstruire et publier le projet vue-router-2.7.0 avec la fonction corrigée.
• Comment tester la correction en vérifiant la console du navigateur pour l'absence des anciens messages d'erreur.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Identifier et corriger un bogue dans une bibliothèque tierce.
• Travailler avec la bibliothèque vue-router-2.7.0 et comprendre ses fonctions internes.
• Rebâtir et publier un projet après avoir apporté des modifications au code.
• Tester la correction en vérifiant la console du navigateur pour les messages d'erreur.

Corrigez la fonction isObjectEqual

Pour commencer, regardez la structure de répertoire des fichiers sur la gauche comme suit :

├── vue-router-2.7.0
├── vue.min.js
└── index.html

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement, cliquez sur "test" et ouvrez l'option Console dans la console du navigateur, vous verrez deux messages d'erreur, soit TypeError: Cannot convert undefined or null to object et Uncaught TypeError: Cannot convert undefined or null to object.

Dans cette étape, vous allez apprendre à corriger la fonction isObjectEqual dans le fichier vue-router-2.7.0/src/util/route.js pour gérer correctement les valeurs null.

1. Ouvrez le fichier vue-router-2.7.0/src/util/route.js.
2. Localisez la fonction isObjectEqual :

function isObjectEqual(a = {}, b = {}): boolean {
  const aKeys = Object.keys(a);
  const bKeys = Object.keys(b);
  if (aKeys.length!== bKeys.length) {
    return false;
  }
  return aKeys.every((key) => {
    const aVal = a[key];
    const bVal = b[key];
    // vérifiez l'égalité imbriquée
    if (typeof aVal === "object" && typeof bVal === "object") {
      return isObjectEqual(aVal, bVal);
    }
    return String(aVal) === String(bVal);
  });
}

3. Mettez à jour la fonction pour gérer correctement les valeurs null :

function isObjectEqual(a = {}, b = {}): boolean {
  if (!a ||!b) return a === b;
  const aKeys = Object.keys(a);
  const bKeys = Object.keys(b);
  if (aKeys.length!== bKeys.length) {
    return false;
  }
  return aKeys.every((key) => {
    const aVal = a[key];
    const bVal = b[key];
    // vérifiez l'égalité imbriquée
    if (typeof aVal === "object" && typeof bVal === "object") {
      return isObjectEqual(aVal, bVal);
    }
    return String(aVal) === String(bVal);
  });
}

Les modifications sont les suivantes :

• Ajout d'une condition pour vérifier si a ou b est null ou undefined. Si l'un d'eux est null ou undefined, la fonction renverra a === b.
• Cela garantit que la fonction gère correctement les valeurs null dans le paramètre query.

Rebâtissez et testez le projet

Dans cette étape, vous allez rebâtir et tester le projet vue-router-2.7.0 après avoir corrigé la fonction isObjectEqual.

1. Dans le terminal, accédez au répertoire vue-router-2.7.0.
2. Exécutez la commande npm install pour installer les dépendances. Ce processus peut prendre un certain temps, veuillez être patient. (Si cela reste bloqué longtemps, appuyez sur Ctrl+C pour terminer le processus puis exécutez cette commande à nouveau.)
3. Une fois l'installation terminée, exécutez la commande npm run build pour rebâtir et publier le projet. Cela générera la bibliothèque vue-router-2.7.0 mise à jour avec la fonction isObjectEqual corrigée.
4. Revenez sur la page web et rafraîchissez-la.
5. Cliquez sur "test" et ouvrez la console dans l'onglet Console pour vérifier, vous ne verrez plus le message d'erreur ci-dessus.

Si les messages d'erreur ont disparu, la correction est réussie. Vous avez terminé le projet!

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.