Manejar correctamente los valores nulos

Introducción

En este proyecto, aprenderás a corregir un error en la librería vue-router-2.7.0 relacionado con el manejo de valores null en el parámetro query.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo localizar y entender la función isObjectEqual en el archivo vue-router-2.7.0/src/util/route.js.
• Cómo corregir la función isObjectEqual para manejar correctamente los valores null.
• Cómo reconstruir y liberar el proyecto vue-router-2.7.0 con la función corregida.
• Cómo probar la corrección verificando la consola del navegador para la ausencia de los mensajes de error anteriores.

🏆 Logros

Después de completar este proyecto, podrás:

• Identificar y corregir un error en una librería de terceros.
• Trabajar con la librería vue-router-2.7.0 y entender sus funciones internas.
• Reconstruir y liberar un proyecto después de realizar cambios de código.
• Probar la corrección verificando la consola del navegador para mensajes de error.

Corregir la función isObjectEqual

Para comenzar, observa la estructura de directorio de los archivos en el lado izquierdo, como sigue:

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

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente, haz clic en "test" y abre la opción Console en la consola del navegador, verás dos mensajes de error, son TypeError: Cannot convert undefined or null to object y Uncaught TypeError: Cannot convert undefined or null to object.

En este paso, aprenderás a corregir la función isObjectEqual en el archivo vue-router-2.7.0/src/util/route.js para manejar correctamente los valores null.

1. Abre el archivo vue-router-2.7.0/src/util/route.js.
2. Localiza la función 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];
    // verifica la igualdad anidada
    if (typeof aVal === "object" && typeof bVal === "object") {
      return isObjectEqual(aVal, bVal);
    }
    return String(aVal) === String(bVal);
  });
}

3. Actualiza la función para manejar correctamente los valores 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];
    // verifica la igualdad anidada
    if (typeof aVal === "object" && typeof bVal === "object") {
      return isObjectEqual(aVal, bVal);
    }
    return String(aVal) === String(bVal);
  });
}

Los cambios son:

• Se agregó una condición para verificar si a o b es null o undefined. Si cualquiera de ellos es null o undefined, la función devolverá a === b.
• Esto asegura que la función maneje correctamente los valores null en el parámetro query.

Reconstruir y probar el proyecto

En este paso, reconstruirás y probarás el proyecto vue-router-2.7.0 después de corregir la función isObjectEqual.

1. En la terminal, navega hasta el directorio vue-router-2.7.0.
2. Ejecuta el comando npm install para instalar las dependencias. Este proceso puede tomar un tiempo, por favor, ten paciencia. (Si se atasca durante mucho tiempo, presiona Ctrl+C para terminar el proceso y luego ejecuta este comando nuevamente.)
3. Una vez completada la instalación, ejecuta el comando npm run build para reconstruir y liberar el proyecto. Esto generará la librería actualizada vue-router-2.7.0 con la función isObjectEqual corregida.
4. Vuelve a la página web y actualiza la página.
5. Haz clic en "test" y abre la consola en la pestaña Console para verificar, ya no verás el mensaje de error anterior.

Si los mensajes de error han desaparecido, la corrección es exitosa. ¡Has completado el proyecto!

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.