Lidando com Valores Nulos Corretamente

Introdução

Neste projeto, você aprenderá como corrigir um bug na biblioteca vue-router-2.7.0 relacionado ao tratamento de valores null no parâmetro query.

👀 Visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como localizar e entender a função isObjectEqual no arquivo vue-router-2.7.0/src/util/route.js.
• Como corrigir a função isObjectEqual para lidar corretamente com valores null.
• Como reconstruir e lançar o projeto vue-router-2.7.0 com a função corrigida.
• Como testar a correção verificando o console do navegador para a ausência das mensagens de erro anteriores.

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Identificar e corrigir um bug em uma biblioteca de terceiros.
• Trabalhar com a biblioteca vue-router-2.7.0 e entender suas funções internas.
• Reconstruir e lançar um projeto após fazer alterações no código.
• Testar a correção verificando o console do navegador para mensagens de erro.

Corrigir a Função isObjectEqual

Para começar, observe a estrutura de diretórios dos arquivos à esquerda, conforme a seguir:

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

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente, clique em "test" e abra a opção Console no console do navegador. Você verá duas mensagens de erro, que são TypeError: Cannot convert undefined or null to object e Uncaught TypeError: Cannot convert undefined or null to object.

Nesta etapa, você aprenderá como corrigir a função isObjectEqual no arquivo vue-router-2.7.0/src/util/route.js para lidar com valores null corretamente.

1. Abra o arquivo vue-router-2.7.0/src/util/route.js.
2. Localize a função 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];
    // check nested equality
    if (typeof aVal === "object" && typeof bVal === "object") {
      return isObjectEqual(aVal, bVal);
    }
    return String(aVal) === String(bVal);
  });
}

3. Atualize a função para lidar com valores null corretamente:

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];
    // check nested equality
    if (typeof aVal === "object" && typeof bVal === "object") {
      return isObjectEqual(aVal, bVal);
    }
    return String(aVal) === String(bVal);
  });
}

As alterações são:

• Adicionada uma condição para verificar se a ou b é null ou undefined. Se um deles for null ou undefined, a função retornará a === b.
• Isso garante que a função lide corretamente com valores null no parâmetro query.

Reconstruir e Testar o Projeto

Nesta etapa, você reconstruirá e testará o projeto vue-router-2.7.0 após corrigir a função isObjectEqual.

1. No terminal, navegue até o diretório vue-router-2.7.0.
2. Execute o comando npm install para instalar as dependências. Este processo pode levar um tempo, por favor, seja paciente. (Se ele ficar preso por muito tempo, pressione Ctrl+C para terminar o processo e, em seguida, execute este comando novamente.)
3. Após a conclusão da instalação, execute o comando npm run build para reconstruir e lançar o projeto. Isso gerará a biblioteca vue-router-2.7.0 atualizada com a função isObjectEqual corrigida.
4. Volte para a página da web e atualize a página.
5. Clique em "test" e abra o console na aba Console para verificar, você não verá mais a mensagem de erro acima.

Se as mensagens de erro desaparecerem, a correção foi bem-sucedida. Você concluiu o projeto!

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.