Korrekte Behandlung von Null-Werten

Einführung

In diesem Projekt lernst du, wie ein Bug in der vue-router-2.7.0-Bibliothek behoben wird, der mit der Behandlung von null-Werten im query-Parameter zusammenhängt.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die isObjectEqual-Funktion in der Datei vue-router-2.7.0/src/util/route.js lokalisiert und verstehst.
• Wie du die isObjectEqual-Funktion behebst, um null-Werte richtig zu behandeln.
• Wie du das vue-router-2.7.0-Projekt mit der behobenen Funktion neu baufst und veröffentlicht.
• Wie du die Behebung testest, indem du die Browserkonsole auf das Fehlen der vorherigen Fehlermeldungen überprüfst.

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Ein Bug in einer Drittanbieterbibliothek zu identifizieren und zu beheben.
• Mit der vue-router-2.7.0-Bibliothek umzugehen und deren interne Funktionen zu verstehen.
• Ein Projekt nach Codeänderungen neu zu bauen und zu veröffentlichen.
• Die Behebung zu testen, indem du die Browserkonsole auf Fehlermeldungen überprüfst.

Behebe die isObjectEqual-Funktion

Beginnen wir damit, dass wir uns die Verzeichnisstruktur der Dateien links wie folgt ansehen:

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

Klicken Sie auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffnen Sie "Web 8080" oben im VM und aktualisieren Sie es manuell, klicken Sie auf "test" und öffnen Sie die Option Console in der Browserkonsole. Sie werden zwei Fehlermeldungen sehen, nämlich TypeError: Cannot convert undefined or null to object und Uncaught TypeError: Cannot convert undefined or null to object.

In diesem Schritt lernst du, wie du die isObjectEqual-Funktion in der Datei vue-router-2.7.0/src/util/route.js behebst, um null-Werte richtig zu behandeln.

1. Öffnen Sie die Datei vue-router-2.7.0/src/util/route.js.
2. Locate die isObjectEqual-Funktion:

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. Aktualisieren Sie die Funktion, um null-Werte richtig zu behandeln:

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);
  });
}

Die Änderungen sind:

• Ein Bedingung hinzugefügt, um zu überprüfen, ob a oder b null oder undefined ist. Wenn einer von beiden null oder undefined ist, wird die Funktion a === b zurückgeben.
• Dies gewährleistet, dass die Funktion null-Werte im query-Parameter richtig behandelt.

Neueraufbau und Test des Projekts

In diesem Schritt wirst du das vue-router-2.7.0-Projekt nach Behebung der isObjectEqual-Funktion neu bauen und testen.

1. Navigieren Sie im Terminal zum Verzeichnis vue-router-2.7.0.
2. Führen Sie den Befehl npm install aus, um die Abhängigkeiten zu installieren. Dieser Prozess kann einige Zeit in Anspruch nehmen, bitte seien Sie geduldig. (Wenn es lange anhält, drücken Sie Ctrl+C, um den Prozess zu beenden, und führen Sie dann diesen Befehl erneut aus.)
3. Nachdem die Installation abgeschlossen ist, führen Sie den Befehl npm run build aus, um das Projekt neu zu bauen und zu veröffentlichen. Dadurch wird die aktualisierte vue-router-2.7.0-Bibliothek mit der behobenen isObjectEqual-Funktion erstellt.
4. Gehen Sie zurück zur Webseite und aktualisieren Sie die Seite.
5. Klicken Sie auf "test" und öffnen Sie die Konsole im Tab Console, um zu überprüfen. Sie werden die obige Fehlermeldung nicht mehr sehen.

Wenn die Fehlermeldungen verschwunden sind, ist die Behebung erfolgreich. Sie haben das Projekt abgeschlossen!

Zusammenfassung

Herzlichen Glückwunsch! Sie haben dieses Projekt abgeschlossen. Sie können in LabEx weitere Übungen absolvieren, um Ihre Fähigkeiten zu verbessern.