Guten Tag, Freunde!
Ich präsentiere Ihnen die Übersetzung des Node.js-Handbuchs im Format einer einseitigen progressiv angepassten Anwendung.
Dieses Format bedeutet Folgendes:
- SPA - Neue Daten (Abschnitte oder Kapitel des Handbuchs) werden ohne erneutes Laden der Seite geladen - implementiert durch dynamischen Import
- PWA - Die Anwendung kann auf einem Mobiltelefon oder Computer installiert werden. Die Anwendung funktioniert auch dann, wenn keine Netzwerkverbindung besteht - implementiert mithilfe eines Service Workers und Caching
- mobile-first - Die Anwendung soll hauptsächlich auf Smartphones verwendet werden, sieht aber auch auf Breitbildschirmen gut aus
Sie können die Anwendung hier anzeigen und installieren: Netlify , PWA Store .
→ Projektcode auf GitHub
Sandkasten:
Auf einem Desktop sieht die Anwendung folgendermaßen aus:
Auf einem Smartphone wie folgt:
Die App ist eine kurze Anleitung für Anfänger zu Node.js und sollte für diejenigen, die bereits mit dem Tool vertraut sind, nicht von Interesse sein. Es kann jedoch als Taschenanleitung verwendet werden, um schnell eine Antwort auf eine Frage zu finden.
Der ursprüngliche Leitfaden wurde 2019 unter Berücksichtigung der neuesten Version von Node.js und ES2018 zu diesem Zeitpunkt verfasst, was ihn relevant macht.
Das Handbuch besteht aus 54 Abschnitten (Kapiteln), in denen in einer zugänglichen Form die Grundlagen und einige Funktionen von Node.js beschrieben werden. Das Tutorial macht Sie nicht zu einem Experten für serverseitiges JavaScript, hilft Ihnen jedoch dabei, es zu lernen und den Weg in die Zukunft zu bestimmen.
Die Nummer der angezeigten Seite wird im lokalen Speicher gespeichert, sodass Sie die Anwendung jederzeit beenden können. Wenn Sie zurückkehren, beginnen Sie dort, wo Sie aufgehört haben.
Die Seiten werden über Tasten und Tastatur umgeschaltet. Materialise wurde
verwendet, um die Anwendung zu formatieren .
Ein paar Worte zur Umsetzung
Die Implementierung der Anwendung ist unglaublich einfach.
Jeder Abschnitt (Kapitel) ist ein Modul mit folgendem Inhalt:
export default `
`
Im Markup der Hauptseite haben wir Links:
<a class="link" data-url="1" href="#">1. </a>
und Tasten:
<!-- -->
<button>
<i class="left">navigate_before</i>
</button>
<button>
<i class="right">navigate_after</i>
</button>
Wenn Sie auf einen Link oder eine Schaltfläche klicken, wird die Seitenanzeigefunktion aufgerufen, der die Seitenzahl übergeben wird. Bei der Initialisierung der Anwendung wird die Seitenzahl vom lokalen Speicher angefordert. Wenn keine vorhanden ist, ist die Seitenzahl = 1. Wenn Sie auf den Link klicken, wird die Seitenzahl zum Wert des Attributs "Daten-URL" des Links. Wenn Sie die Taste drücken, erhöht oder verringert sich die Seitenzahl um 1. Die Funktion selbst sieht folgendermaßen aus:
const showPage = i => {
//
const url = `./chapters/${i}.js`
//
import(url)
//
.then(data => container.innerHTML = data.default)
//
localStorage.setItem('NodejsGuidePageNumber', i)
//
scrollTo(0, 0)
}
Das ist alles, wie Sie sehen, nichts Besonderes. Die ersten beiden Codezeilen sind die Navigationsleiste Materialise. Sie können über Service - Mitarbeiter lesen hier .
Wie Sie wissen, irrt sich nur derjenige, der nichts tut, also entschuldige ich mich für mögliche Fehler und Tippfehler. Ich wäre Ihnen dankbar für Ihre Hilfe bei der Suche und Behebung dieser Probleme.
Ich hoffe euch gefällt die App. Danke für die Aufmerksamkeit.