Sand zu einem Turm sammeln und jeden Tag ein wenig vorankommen
⭐ Einführung in die Kolumne
Front-End-Einstiegsreise: Entdecken Sie die wunderbare Welt der Webentwicklung. Denken Sie daran, auf den Link oben oder rechts zu klicken, um diese Kolumne zu abonnieren. Geometry nimmt Sie mit auf eine Front-End-Reise.
Willkommen zur Front-End-Einstiegsreise! Diese Kolumne ist maßgeschneidert für diejenigen, die sich für Webentwicklung interessieren und gerade erst in den Frontend-Bereich eingestiegen sind. Egal, ob Sie ein absoluter Anfänger oder ein Entwickler mit Grundkenntnissen sind, hier finden Sie eine systematische und benutzerfreundliche Lernplattform. In dieser Kolumne werden wir es täglich in Form von Fragen und Antworten aktualisieren und Ihnen ausgewählte Frontend-Wissenspunkte und Antworten auf häufig gestellte Fragen präsentieren. Wir hoffen, durch das Q&A-Format direkter auf die Fragen der Leser zur Front-End-Technologie antworten zu können und allen dabei zu helfen, nach und nach eine solide Grundlage zu schaffen. Ob HTML, CSS, JavaScript oder verschiedene gängige Frameworks und Tools, wir erklären Konzepte einfach und leicht verständlich und stellen praktische Beispiele und Übungen zur Verfügung, um das Gelernte zu festigen. Gleichzeitig geben wir auch einige praktische Tipps und Best Practices weiter, die Ihnen helfen, verschiedene Technologien in der Front-End-Entwicklung besser zu verstehen und anzuwenden.
Darüber hinaus werden wir regelmäßig einige praktische Projekt-Tutorials veröffentlichen, damit Sie das erlernte Wissen in der tatsächlichen Entwicklung anwenden können. Durch die Praxis tatsächlicher Projekte werden Sie in der Lage sein, den Arbeitsablauf und die Methodik der Front-End-Entwicklung besser zu verstehen und Ihre eigene Fähigkeit zu entwickeln, Probleme zu lösen und unabhängig zu entwickeln. Wir glauben, dass wir die Front-End-Entwicklungstechnologie nur durch kontinuierliche Anhäufung und Übung wirklich beherrschen können. Machen Sie sich also bereit für die Herausforderung und begeben Sie sich mutig auf diese Front-End-Einstiegsreise! Egal, ob Sie sich beruflich verändern, sich weiterbilden oder persönliche Interessen verfolgen möchten, wir sind bestrebt, Ihnen die besten Lernressourcen und Unterstützung zu bieten. Lassen Sie uns gemeinsam die wunderbare Welt der Webentwicklung erkunden! Nehmen Sie an der Front-End-Einstiegsreise teil und werden Sie ein herausragender Front-End-Entwickler! Beginnen wir mit der Front-End-Reise
⭐Ereigniserfassung und Ereignissprudeln
In JavaScript sind die Ereigniserfassung (Event Capturing) und das Event Bubbling (Event Bubbling) zwei verschiedene Phasen der Verarbeitung der DOM-Ereignisweitergabe. Diese beiden Phasen beschreiben, wie Ereignisse von einem Element zum anderen auf der Seite übertragen werden.
⭐ Ereigniserfassung
Die Ereigniserfassung ist die erste Stufe der Ereignisverbreitung. Während der Ereigniserfassungsphase <html>werden Ereignisse vom Stammknoten des Dokuments (normalerweise das Element) bis zum Zielelement weitergegeben. Das bedeutet, dass das äußerste Element zuerst das Ereignis empfängt, dann die inneren Elemente usw., bis das Zielelement des Ereignisses erreicht ist.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>事件捕获示例</title>
</head>
<body>
<div id="outer">
<div id="inner">点击我</div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
outer.addEventListener('click', function () {
console.log('外部元素被点击，事件捕获阶段');
}, true); // 第三个参数为 true 表示开启事件捕获
inner.addEventListener('click', function () {
console.log('内部元素被点击，事件捕获阶段');
}, true);
</script>
</body>
</html>
Wenn Sie im obigen Beispiel auf das innere Element klicken („klick mich“), wird das Ereignis zuerst auf dem äußeren Element ausgelöst und dann auf das innere Element übertragen. So funktioniert die Ereigniserfassungsphase.
⭐Event Sprudeln
Das Bubbling von Ereignissen ist die zweite Stufe der Ereignisausbreitung. In der Ereignis-Bubbling-Phase breitet sich das Ereignis vom Zielelement nach außen aus und sprudelt bis zum Wurzelknoten des Dokuments.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>事件冒泡示例</title>
</head>
<body>
<div id="outer">
<div id="inner">点击我</div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
outer.addEventListener('click', function () {
console.log('外部元素被点击，事件冒泡阶段');
});
inner.addEventListener('click', function () {
console.log('内部元素被点击，事件冒泡阶段');
});
</script>
</body>
</html>
Wenn Sie im obigen Beispiel auf das innere Element klicken („klick mich“), wird das Ereignis zunächst auf dem inneren Element ausgelöst, bevor es nach außen zum äußeren Element gelangt. So funktioniert die Sprudelphase einer Veranstaltung.
⭐Anwendungsszenarien
Ereigniserfassung und Ereignis-Bubbling können in verschiedenen Szenarien eingesetzt werden, um die Ereignisverarbeitung flexibler zu gestalten. Einige häufige Anwendungsszenarien sind:
-
Ereignisdelegation : Durch das Erfassen von Ereignissen auf übergeordneten Elementen und das Durchführen verschiedener Vorgänge basierend auf dem Zielelement können Sie die Anzahl der Ereignishandler reduzieren und die Leistung verbessern.
document.getElementById('parent').addEventListener('click', function (event) { if (event.target.tagName === 'LI') { console.log('点击了列表项'); } }); -
Ereignisdelegation : Sie können Ereignishandler in der Ereigniserfassungs- oder Ereignis-Bubbling-Phase registrieren und entsprechend Ihren Anforderungen auswählen, welche Phase Sie verwenden möchten.
element.addEventListener('click', function () { console.log('在事件冒泡阶段处理点击事件'); }); element.addEventListener('click', function () { console.log('在事件捕获阶段处理点击事件', true); }, true);
Durch das Verständnis der Ereigniserfassung und des Ereignis-Bubblings können Sie den Ausbreitungsprozess von Ereignissen im DOM besser steuern und verstehen, um unterschiedlichen Anforderungen gerecht zu werden.
⭐ Am Ende geschrieben
Diese Kolumne ist für eine breite Leserschaft geeignet und eignet sich für Front-End-Anfänger, für diejenigen, die Front-End noch nicht gelernt haben und sich für Front-End interessieren, oder für Back-End-Studenten, die sich besser zeigen und erweitern möchten Einige Front-End-Wissenspunkte während des Interviewprozesses. Wenn Sie also über die Grundlagen des Front-Ends verfügen und dieser Kolumne folgen, kann es Ihnen auch in hohem Maße dabei helfen, nach Auslassungen zu suchen und die Lücken zu schließen, da der Blogger selbst dies tut Wenn der Artikel fehlerhaft ist, können Sie mich über die linke Seite der Homepage kontaktieren. Lassen Sie uns gemeinsam Fortschritte machen, und gleichzeitig empfehle ich jedem mehrere Spalten. Interessierte Partner können abonnieren: Zusätzlich zu den folgenden Spalten können Sie auf meiner Homepage auch andere Spalten sehen.
Frontend-Spiele (kostenlos) Diese Kolumne entführt Sie in eine Welt voller Kreativität und Spaß. Mithilfe der Grundkenntnisse in HTML, CSS und JavaScript werden wir gemeinsam verschiedene interessante Seitenspiele erstellen. Ganz gleich, ob Sie Anfänger sind oder über Erfahrung in der Frontend-Entwicklung verfügen, diese Kolumne ist genau das Richtige für Sie. Wir beginnen mit den Grundlagen und führen Sie durch die Fähigkeiten, die Sie zum Erstellen eines Seitenspiels benötigen. Anhand praktischer Fälle und Übungen lernen Sie, wie Sie mit HTML eine Seitenstruktur erstellen, mit CSS die Spieloberfläche verschönern und mit JavaScript dem Spiel interaktive und dynamische Effekte hinzufügen. In dieser Kolumne behandeln wir verschiedene Arten von Minispielen, darunter Labyrinthspiele, Ziegelbrecher, Schlange, Minensuchboot, Taschenrechner, Flugzeugschlachten, Tic-Tac-Toe, Rätsel, Labyrinthe und mehr. Jedes Projekt führt Sie in prägnanten und klaren Schritten durch den Bauprozess, mit ausführlichen Erklärungen und Codebeispielen. Gleichzeitig geben wir Ihnen auch einige Optimierungstipps und Best Practices, die Ihnen dabei helfen, die Seitenleistung und das Benutzererlebnis zu verbessern. Egal, ob Sie nach einem interessanten Projekt suchen, um Ihre Front-End-Fähigkeiten zu trainieren, oder sich für die Entwicklung von Seitenspielen interessieren, die Rubrik „Front-End-Spiele“ ist die beste Wahl. Klicken Sie hier, um die Spalte „Frontend-Spiele“ zu abonnieren
Vue3 Transparent Tutorial [Von Null auf Eins] (kostenpflichtig) Willkommen beim Vue3 Transparent Tutorial! Ziel dieser Kolumne ist es, jedem umfassendes technisches Wissen rund um Vue3 zu vermitteln. Wenn Sie über Vue2-Erfahrung verfügen, kann Ihnen diese Kolumne dabei helfen, die Kernkonzepte und die Verwendung von Vue3 zu beherrschen. Wir fangen bei Null an und begleiten Sie Schritt für Schritt bei der Erstellung einer vollständigen Vue-Anwendung. Durch praktische Fälle und Übungen lernen Sie, wie Sie die Vorlagensyntax, Komponentenentwicklung, Zustandsverwaltung, Routing und andere Funktionen von Vue3 verwenden. Wir werden auch einige erweiterte Funktionen wie Composition API und Teleport vorstellen, um Ihnen zu helfen, die neuen Funktionen von Vue3 besser zu verstehen und anzuwenden. In dieser Kolumne führen wir Sie in prägnanten und klaren Schritten durch jedes Projekt, mit detaillierten Erklärungen und Beispielcode. Gleichzeitig werden wir einige häufig auftretende Probleme und Lösungen bei der Vue3-Entwicklung vorstellen, um Ihnen bei der Überwindung von Schwierigkeiten und der Verbesserung der Entwicklungseffizienz zu helfen. Egal, ob Sie Vue3 eingehend erlernen möchten oder eine umfassende Anleitung zum Erstellen eines Front-End-Projekts benötigen, die ausführliche Vue3-Tutorial-Kolumne wird zu einer unverzichtbaren Ressource für Sie. Klicken Sie hier, um die Spalte „Vue3 Transparent Tutorial [From Zero to One]“ zu abonnieren
Der TypeScript-Einstiegsleitfaden (kostenlos) ist eine Kolumne, die Ihnen den schnellen Einstieg und die Beherrschung der TypeScript-bezogenen Technologien erleichtern soll. Durch prägnante und klare Sprache und reichhaltigen Beispielcode erklären wir die Grundkonzepte, Syntax und Funktionen von TypeScript ausführlich. Egal, ob Sie Anfänger oder erfahrener Entwickler sind, hier finden Sie den Lernpfad, der zu Ihnen passt. Von Kernfunktionen wie Typanmerkungen, Schnittstellen und Klassen bis hin zur modularen Entwicklung, Toolkonfiguration und Integration mit gängigen Frontend-Frameworks werden wir alle Aspekte umfassend abdecken. Durch die Lektüre dieser Kolumne können Sie die Zuverlässigkeit und Wartbarkeit von JavaScript-Code verbessern und für eine bessere Codequalität und Entwicklungseffizienz für Ihre Projekte sorgen. Begeben wir uns gemeinsam auf diese spannende und herausfordernde TypeScript-Reise! Klicken Sie hier, um die Spalte „TypeScript-Erste Schritte“ zu abonnieren
