Корректная обработка значений null

Введение

В этом проекте вы научитесь исправлять ошибку в библиотеке vue-router-2.7.0 связанную с обработкой значений null в параметре query.

👀 Предварительный просмотр

🎯 Задачи

В этом проекте вы научитесь:

• Как определить и понять функцию isObjectEqual в файле vue-router-2.7.0/src/util/route.js.
• Как исправить функцию isObjectEqual для правильной обработки значений null.
• Как перестроить и выпустить проект vue-router-2.7.0 с исправленной функцией.
• Как проверить исправление, проверяя консоль браузера на отсутствие предыдущих сообщений об ошибках.

🏆 Достижения

После завершения этого проекта вы сможете:

• Идентифицировать и исправить ошибку в сторонней библиотеке.
• Работать с библиотекой vue-router-2.7.0 и понимать ее внутренние функции.
• Перестроить и выпустить проект после внесения изменений в код.
• Проверить исправление, проверяя консоль браузера на сообщения об ошибках.

Исправьте функцию isObjectEqual

Для начала ознакомьтесь с структурой каталогов файлов слева, которая выглядит следующим образом:

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

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите его вручную, нажмите "test" и откройте пункт Console в консоли браузера, вы увидите два сообщения об ошибках: TypeError: Cannot convert undefined or null to object и Uncaught TypeError: Cannot convert undefined or null to object.

В этом шаге вы научитесь исправлять функцию isObjectEqual в файле vue-router-2.7.0/src/util/route.js для правильной обработки значений null.

1. Откройте файл vue-router-2.7.0/src/util/route.js.
2. Найдите функцию 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];
    // проверьте вложенную равенство
    if (typeof aVal === "object" && typeof bVal === "object") {
      return isObjectEqual(aVal, bVal);
    }
    return String(aVal) === String(bVal);
  });
}

3. Обновите функцию для правильной обработки значений 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];
    // проверьте вложенную равенство
    if (typeof aVal === "object" && typeof bVal === "object") {
      return isObjectEqual(aVal, bVal);
    }
    return String(aVal) === String(bVal);
  });
}

Изменения следующие:

• Добавлено условие для проверки, является ли a или b равным null или undefined. Если хотя бы один из них равен null или undefined, функция вернет a === b.
• Это гарантирует, что функция правильно обрабатывает значения null в параметре query.

Перестройте и протестируйте проект

В этом шаге вы перестройте и протестируете проект vue-router-2.7.0 после исправления функции isObjectEqual.

1. В терминале перейдите в каталог vue-router-2.7.0.
2. Выполните команду npm install, чтобы установить зависимости. Этот процесс может занять некоторое время, будьте терпеливы. (Если процесс застрянет долго, нажмите Ctrl+C, чтобы прервать его, а затем запустите эту команду снова.)
3. После завершения установки выполните команду npm run build, чтобы перестроить и выпустить проект. Это создаст обновленную библиотеку vue-router-2.7.0 с исправленной функцией isObjectEqual.
4. Вернитесь на веб-страницу и обновите страницу.
5. Нажмите на "test" и откройте консоль в вкладке Console, чтобы проверить, вы больше не увидите вышеуказанное сообщение об ошибке.

Если сообщения об ошибках исчезли, исправление выполнено успешно. Вы завершили проект!

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.