Einführung
Suchbegriff, Kategorie, Sortierung und Seite von Fieldnote können bereits in einer URL übertragen werden. Der vorbereitete Controller ersetzt nach jeder Suche den aktuellen Verlaufseintrag. Direkte Links bleiben dadurch nützlich, die vorherige Ansicht geht jedoch verloren: Mehrere Suchen lassen sich nicht zuverlässig mit Back zurückverfolgen. Du unterscheidest neue Benutzeraktionen von Wiederherstellungen und machst den eigenen Browserverlauf nutzbar.
Dieses unabhängige Lab stellt die fertigen Auswahl-, Normalisierungs- und URL-Dateien des vorherigen Labs bereit; eine frühere VM wird nicht gebraucht. Du benötigst dessen Vertrag für vier Zustandswerte sowie grundlegende JavaScript-Funktionen, Objekte, DOM-Auswahl und Ereignisse. Du lernst pushState, replaceState, popstate und warum zum Teilen die URL nötig ist statt einer alten lokalen Voreinstellung oder eines Verlaufsobjekts im Speicher. Es gibt keine asynchronen Anfragen oder Framework-Router. Die 40 Minuten sind eine Autorenschätzung.
Verwende Workspace und Fieldnote. Bearbeite nur /home/labex/project/fieldnote/work/app.js. Erhalte selection.js, state.js, url.js, catalog.js, view.js, HTML/CSS, die unabhängige Study-Ansicht und den Dienst. Der Renderer ist vorbereitet und zeigt Titel, Beschreibung, Datum, Uhrzeit und Ort der jeweils ausgewählten Veranstaltung. Die Website bleibt Englisch. Ein Link öffnet nur, solange die öffentliche Route dieser VM verfügbar ist; dies ist keine Veröffentlichung im Internet.
Besuche für bestätigte Benutzeränderungen anlegen
In diesem Schritt hältst du die Initialisierung in einem Verlaufseintrag und legst einen neuen Besuch an, wenn eine andere Suche oder Seite bestätigt wird.
Wähle in Fieldnote Open Study view in a new page. Dies ist eine eigenständige Browserseite, nicht der eingebettete Produkt-Tab. Lies das Ergebnis für print & fold, Make, Soonest first, Seite 2. Wähle Previous, ändere Keyword zu sound + light, Category zu Listen, Sort by zu Title A–Z und aktiviere Search. Die Seite wird auf 1 gesetzt. Nutze Back des Browsers statt Previous der Website: Suchbegriff, Kategorie, Sortierung, Seite und vollständige Treffer der vorherigen Ansicht kehren zurück. Mit Forward stellst du die neuere Ansicht wieder her. Dies ist das normale Beispiel, nicht die Fertigstellung deiner Arbeit.
Dies ist die unabhängige Study-Ansicht vor deinen Änderungen. Ihr Freigabe-href beschreibt dieselbe sichtbare Seite und vervollständigt Work nicht.
Schließe Study und wähle im Fieldnote-Einstieg Open Work view in a new page. Die Arbeitsdateien enthalten alle G1-Funktionen, der vorbereitete Controller ersetzt aber weiterhin Einträge. Wechsle zu Workspace. cd setzt das Verzeichnis dieses persistenten Terminals; cat liest eine Datei unverändert:
cd /home/labex/project/fieldnote/work
cat app.js
Die aktuelle Funktion show ruft normalize auf, erzeugt mit stateURL eine URL, ersetzt die Adresse und lässt draw die gewählten Datensätze anzeigen. Diese Helfer kommen aus den vorbereiteten Dateien state.js, url.js, view.js und selection.js. Du erhältst diese Reihenfolge und unterscheidest zwei Gründe für die Anzeige einer Ansicht.
history.pushState(null, '', url) ergänzt einen Eintrag desselben Ursprungs und ändert die Adresse, ohne eine neue Seite anzufordern. replaceState aktualisiert nur den aktuellen Eintrag. Das erste Argument ist ein optionaler zugehöriger Zustand; wir verwenden null, weil alles Benötigte bereits in der URL steht. Die leere Zeichenfolge ist das ungenutzte Titelargument der API. Beide Aufrufe lösen selbst kein popstate aus. Der nächste Schritt behandelt echtes Durchlaufen des Verlaufs. Die initiale Normalisierung verwendet replace; beim Öffnen eines Links entsteht dadurch kein zusätzlicher Initialisierungseintrag. Suche und Seitenschaltflächen verwenden push, wenn sich die bestätigte URL ändert; eine unveränderte Ansicht muss keinen doppelten Eintrag erzeugen.
document.querySelector('form') findet das vorbereitete Formular. form.elements.q greift auf das Feld namens q zu. preventDefault verhindert die normale Formularnavigation, damit der Controller die Ansicht aktualisieren kann. Ein Listener läuft, wenn das benannte Ereignis eintritt. Die Spread-Syntax {...current, page: ...} kopiert die Felder des aktuellen Zustands und ersetzt anschließend die Seite; bestätigte Filter bleiben erhalten. Ein einzelnes bearbeitetes Feld bleibt bis Search ein Entwurf. Seitenschaltflächen verwenden den bestätigten Zustand.
Speichere diese vollständige Ersetzung. cat > app.js ersetzt nur diese Datei. Das mit Anführungszeichen versehene Here-Dokument <<'JS' erhält den Inhalt wörtlich; beende es mit JS allein in einer Zeile:
cat > app.js <<'JS'
const form = document.querySelector('form');
let current;
function show(raw, mode) {
current = normalize(raw);
const url = stateURL(current);
if (mode === 'push' && url.href !== location.href) {
history.pushState(null, '', url);
} else if (mode === 'replace') {
history.replaceState(null, '', url);
}
draw(current, matches(current));
}
form.addEventListener('submit', event => {
event.preventDefault();
show({q: form.elements.q.value, category: form.elements.category.value,
sort: form.elements.sort.value, page: 1}, 'push');
});
document.querySelector('#previous').addEventListener('click', () =>
show({...current, page: current.page - 1}, 'push'));
document.querySelector('#next').addEventListener('click', () =>
show({...current, page: current.page + 1}, 'push'));
show(readURL(), 'replace');
document.documentElement.dataset.ready = 'true';
JS
&& verlangt beide Bedingungen. Nur ein angeforderter push mit anderer Adresse erstellt deshalb einen Besuch. else if wählt das Ersetzen bei der Initialisierung. Die vorbereiteten Dateien sind weiterhin für Normalisierung und nur die vier Kurs-Abfrageschlüssel zuständig; echter Proxypfad, zusätzliche Parameter und Fragment bleiben erhalten. Die abschließende Markierung data-ready zeigt, dass der Controller seine erste Anzeige beendet hat. Ein sichtbares HTML-Feld allein bedeutet noch nicht, dass JavaScript fertig ist.
Kehre zur Arbeitsseite zurück und lade neu. Suche print & fold, Make, Soonest first und wähle Next. Beachte die Kartenedition und die Veranstaltung in North room auf Seite 2. Wechsle zu sound + light, Listen, Title A–Z und sende ab: Seite 1 zeigt zwei unterschiedliche Klangveranstaltungen. Aktiviere Open this view in a new page und lade die neue Seite neu. Title A–Z und korrekte Daten und Orte müssen erhalten bleiben. Eine zwischengespeicherte Voreinstellung ist unnötig; alle vier bestätigten Werte gehören in die geteilte URL, auch eine andere Sortierung als der Standard. Schließe die neue Seite und behalte die ursprüngliche.
Erwarte noch nicht, dass Back die Arbeitsseite neu zeichnet. Neue Verlaufseinträge sind vorhanden, aber der Wiederherstellungslistener fehlt. Starte Check dieses Schritts. Er prüft direkte URLs, nützliche neue Einträge und das Ersetzen bei der Initialisierung, ohne bereits den Listener des nächsten Schritts zu verlangen. Bei einem JavaScript-Tippfehler, der Aktualisierungen stoppt, verwende cat app.js, vergleiche den vollständigen Block, ersetze ihn und lade neu. Das Speichern einer Korrektur leert den Katalog nicht und erfordert keinen VM-Neustart.
Ansichten mit echtem Back und Forward wiederherstellen
In diesem Schritt liest du nach echter Verlaufsnavigation die URL und beweist, dass ein anderer Browserkontext dieselbe Ansicht rekonstruieren kann.
Back und Forward ändern den aktuellen Verlaufseintrag. Der Browser erzeugt popstate beim Durchlaufen geeigneter Einträge desselben Dokuments; ein eigener Aufruf von pushState erzeugt es nicht. Lausche auf das echte Ereignis, lies die aktuelle URL, normalisiere und zeichne die Ansicht. Führe im Listener keinen push aus: Das würde einen neuen Vorwärtseintrag statt einer Wiederherstellung erzeugen. Die URL funktioniert auch ohne event.state im Speicher, etwa beim direkten Öffnen. Verwende localStorage nicht als maßgebliche Quelle und speichere die Sortierung nicht nur in einem Verlaufsobjekt.
Wechsle zu Workspace. Ergänze einen Listener in der zuvor gespeicherten Datei. Anders als > hängt >> an, ohne vorhandenen Inhalt zu löschen. Führe diesen Block einmal aus. Hast du ihn versehentlich doppelt angehängt, ersetze app.js mit dem vorherigen vollständigen Block und hänge ihn dann genau einmal an.
cat >> app.js <<'JS'
window.addEventListener('popstate', () => show(readURL(), 'replace'));
JS
Der Pfeil-Callback läuft bei nativem Durchlaufen des Verlaufs. Er nutzt denselben show-Pfad, sodass Steuerelemente, Datensatzreihenfolge, Seitenanzeige, deaktivierte Grenzen und tatsächlicher Freigabe-href zur neuen aktuellen URL passen. Ein Ersetzen darf gleichwertige Eingaben normalisieren, aber keinen Verlaufseintrag ergänzen. Der Lernablauf simuliert keine Ereignisse und nutzt keine unsichtbare Testabkürzung.
Kehre zur ursprünglichen eigenständigen Arbeitsseite zurück. Öffne für einen eindeutigen Anfangseintrag über ihre Adressleiste die echte /work/-URL mit folgender Abfrage und erhalte den tatsächlichen Ursprung und Pfad:
?edition=november&q=print%20%26%20fold&category=make&sort=title&page=2#directory-title
Das ist Zustand A: Title A–Z, Seite 2, Print & Fold: map edition, dann Print & Fold: tiny type. Lies Uhrzeiten und Orte. Erzeuge B mit Previous: Seite 1 enthält die beiden einfachen Print & Fold-Datensätze, gefolgt von Print & Fold: colour. Erzeuge C durch Absenden von sound + light, Listen, Soonest first: Seite 1 von 1, zwei unterschiedliche Daten. Die Aktionen müssen edition und das Fragment erhalten. Neue Filter setzen die Seite zurück.
Verwende echtes Back zweimal: C → B → A. Vergleiche bei jedem Eintrag alle Felder, Seite, geordnete Titel und Datum/Uhrzeit/Ort jedes Ereignisses. Nutze dann Forward zweimal: A → B → C. Wiederhole den Back/Back/Forward/Forward-Zyklus noch einmal. Die Wiederherstellung darf nicht heimlich Einträge ergänzen oder den Vorwärtspfad verlieren. Ein Produkt-Tabwechsel durchläuft keinen Verlauf, und Previous der Website blättert Ergebnisse statt Browser-Back auszuführen.
Aktiviere in C den tatsächlichen Link Open this view in a new page. Die neue Seite muss denselben bestätigten Zustand zeigen. Lade neu und vergleiche wieder. Die Prüfung öffnet zusätzlich den genau erzeugten Link in einem sauberen Kontext ohne altes localStorage oder Verlaufszustand. Im normalen Browser ist die neue Seite ein eigener Tab, keine Zusicherung, dass jeder Browserspeicher isoliert ist. Eine Zwischenablage-API oder ungeprüfte Copied-Meldung ist nicht nötig.
Kehre zur ursprünglichen Seite zurück, gehe mit Back zu B und lade neu. B muss erhalten bleiben, weil das Neuladen die URL liest. Ein geänderter, nicht abgesendeter Suchbegriff ist ein Entwurf und wird beim Neuladen verworfen. Teste das ausdrücklich: Gib unsubmitted draft ohne Search ein, lade neu und beobachte den wiederhergestellten bestätigten Suchbegriff von B. Sende als gewöhnlichen Fehler prnit ab, lies die gültige Leer-Ergebnis-Meldung und korrigiere dann zu print & fold, Make und sende erneut. Bei leeren Ergebnissen darf keine erfundene Ersatzkarte erscheinen.
Vergleiche bei Desktopbreite, ungefähr 768 und 390 Pixeln vollständige Karten, Steuerelemente und Freigabelink. Nutze Tab und Enter für eine Suche und prüfe den sichtbaren Fokus; erhalte das vorbereitete responsive Layout. Führe Check aus. Die Prüfung führt dein unverändertes Frontend isoliert aus, testet echtes Back/Forward und das Öffnen in einem sauberen Kontext, vergleicht jeden sichtbaren Datensatz mit dem unabhängigen Katalog und bewahrt deine aktive Arbeitsumgebung. Sie erstellt kein Konto und veröffentlicht keine dauerhafte Website.
Zusammenfassung
Du hast neue bestätigte Aktionen von der initialen oder historischen Wiederherstellung getrennt. Echtes Back/Forward, direkte Freigabelinks und Neuladen verwenden jetzt denselben URL-gesteuerten Zustand und vollständige Veranstaltungsdatensätze. Die Challenge überträgt das auf einen anderen Katalog und eine andere Seitengröße, ohne Router, Backend-Paginierung oder private Speicherung einzuführen.