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

JavaScriptJavaScriptBeginner
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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

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

Исправленное управление query в vue-router

🎯 Задачи

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

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

🏆 Достижения

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) javascript(("JavaScript")) -.-> javascript/NetworkingGroup(["Networking"]) javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/AdvancedConceptsGroup -.-> javascript/error_handle("Error Handling") javascript/ToolsandEnvironmentGroup -.-> javascript/debugging("Debugging") javascript/NetworkingGroup -.-> javascript/http_req("HTTP Requests") subgraph Lab Skills javascript/functions -.-> lab-445749{{"Корректная обработка значений null"}} javascript/obj_manip -.-> lab-445749{{"Корректная обработка значений null"}} javascript/error_handle -.-> lab-445749{{"Корректная обработка значений null"}} javascript/debugging -.-> lab-445749{{"Корректная обработка значений null"}} javascript/http_req -.-> lab-445749{{"Корректная обработка значений null"}} end

Исправьте функцию 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);
  });
}
  1. Обновите функцию для правильной обработки значений 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, чтобы улучшить свои навыки.