Entkommen der Dualen Vektorreede

Einführung

In diesem Projekt lernst du, wie du eine RequestControl-Klasse entwickelst, die Startanforderungen für Raumschiffe sammelt und den Start der nächsten Raumschiffsreihe automatisch basierend auf den Ergebnissen der Raumschiffe organisiert. Dies wird helfen, dass die Menschen den Einfluss der „Dual Vector Foil“ des Dreikörperproblems überwinden, das den dreidimensionalen Raum in eine zweidimensionale Ebene zusammenzieht.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die run-Funktion in der RequestControl-Klasse implementierst, um den Start der Raumschiffe zu verarbeiten.
• Wie du die Startergebnisse auf der Seite mit der render-Funktion darstellst.

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Promises verwenden, um den Raumschiffstartprozess zu simulieren.
• Die Startwarteschlange zu verwalten und die Anzahl der Raumschiffe zu steuern, die gleichzeitig gestartet werden können.
• Die Benutzeroberfläche zu aktualisieren, um die Startergebnisse anzuzeigen.

Skills Graph

Projektstruktur einrichten

In diesem Schritt wirst du die Projekt-Dateien und -struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne das Projektverzeichnis. Die Verzeichnisstruktur ist wie folgt:

├── index.html
└── main.js

Darin:

• index.html ist die Hauptseite.
• main.js ist die js-Datei, in der der Code ergänzt werden muss.

In der Datei main.js:

• Die createRequest-Methode ist ein Promise für einen Raumschiffstartanfrage.
• Die addRequest-Methode der RequestControl-Klasse sammelt Startanfragen für Raumschiffe. Die Raumschiffstartanfrage wird in die Startwarteschlange this.requestQueue gelegt.
• Die run-Methode ordnet automatisch den Start der nächsten Raumschiffsreihe basierend auf den Start-Ergebnissen an.
• Die render-Methode wird verwendet, um die Start-Ergebnisse auf der Seite darzustellen.

Nehmen wir max = 2 als Beispiel. Der Raumschiffstartprozess ist wie folgt:

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen. Es hat zunächst keine Wirkung.

Implementiere die run-Funktion in der RequestControl-Klasse

In diesem Schritt wirst du die run-Funktion in der RequestControl-Klasse implementieren, um den Start der nächsten Raumschiffsreihe automatisch basierend auf den Start-Ergebnissen zu organisieren.

1. Öffne die Datei main.js im bereitgestellten Projekt.
2. Locate die run-Funktion in der RequestControl-Klasse.
3. Füge im Inneren der run-Funktion folgenden Code hinzu, um den Start der Raumschiffe zu verarbeiten:

run() {
  // Ermittle die Länge der Anforderungswarteschlange
  let len = this.requestQueue.length;

  // Wenn die Anforderungswarteschlange leer ist, breche ab
  if (len === 0) return;

  // Ermittle das Minimum der maximalen Anzahl von Raumschiffen und der Länge der Anforderungswarteschlange
  let min = Math.min(this.max, len);

  // Starte die Raumschiffe nacheinander
  for (let i = 0; i < min; i++) {
    // Verringere die maximale Anzahl von Raumschiffen, die gestartet werden können
    this.max--;

    // Hole die nächste Anforderung aus der Warteschlange
    let req = this.requestQueue.shift();

    // Starte das Raumschiff und verarbeite das Ergebnis
    req()
   .then((res) => {
      this.render(res);
    })
   .catch((error) => {
      this.render(error);
    })
   .finally(() => {
      // Erhöhe die maximale Anzahl von Raumschiffen, die gestartet werden können
      this.max++;
      // Rufe die run-Funktion rekursiv auf, um die nächste Raumschiffsreihe zu starten
      this.run();
    });
  }
}

Die Schwerpunkte der Implementierung sind:

1. Ermittle die Länge der Anforderungswarteschlange (this.requestQueue.length).
2. Wenn die Anforderungswarteschlange leer ist, breche ab.
3. Ermittle das Minimum der maximalen Anzahl von Raumschiffen und der Länge der Anforderungswarteschlange (Math.min(this.max, len)).
4. Starte die Raumschiffe nacheinander und verringere dabei die maximale Anzahl von Raumschiffen, die gestartet werden können (this.max--).
5. Verarbeite das Ergebnis des Raumschiffstarts mit den then- und catch-Methoden des Promises, das von req() zurückgegeben wird.
6. Erhöhe die maximale Anzahl von Raumschiffen, die gestartet werden können (this.max++) und rufe die run-Funktion rekursiv auf, um die nächste Raumschiffsreihe zu starten.

Teste das Projekt

1. Speichere die Datei main.js.
2. Aktualisiere die Webseite in deinem Browser.
3. Beobachte die auf der Seite angezeigten Start-Ergebnisse. Die Seite sollte die erfolgreichen und fehlgeschlagenen Raumschiffstarts anzeigen.

Das finale Seiteneffekt ist wie folgt:

Herzlichen Glückwunsch! Du hast die Implementierung der RequestControl-Klasse abgeschlossen, um den Raumschiffstart automatisch zu organisieren. Das Projekt sollte jetzt voll funktionsfähig sein.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labore absolvieren, um deine Fähigkeiten zu verbessern.