Frontend-Konzepte II

Junior-Level

1. Frage: Was ist CSS Grid? Antwort: CSS Grid ist ein Layoutsystem, mit dem Sie zweidimensionale Layouts im Web erstellen können. Es unterteilt die Seite in Zeilen und Spalten und erleichtert so die Positionierung von Elementen. Zum Beispiel:

   .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }

1. Frage: Was ist das „DOMContentLoaded“-Ereignis? Antwort: Das DOMContentLoaded-Ereignis wird ausgelöst, wenn das ursprüngliche HTML-Dokument vollständig geladen und analysiert wurde, ohne darauf zu warten, dass Stylesheets, Bilder und Subframes vollständig geladen werden. Dies ist nützlich, um Skripte auszuführen, sobald das DOM bereit ist:

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

1. Frage: Was ist die „z-index“-Eigenschaft in CSS? Antwort: Die Z-Index-Eigenschaft steuert die Stapelreihenfolge von Elementen. Elemente mit einem höheren Z-Index werden vor Elementen mit einem niedrigeren Z-Index angezeigt. Zum Beispiel:

   .box1 {
       position: relative;
       z-index: 1;
   }
   .box2 {
       position: relative;
       z-index: 2; /* box2 será exibido na frente de box1 */
   }

1. Frage: Was ist „dies“ in JavaScript? Antwort: Dies bezieht sich in JavaScript auf den aktuellen Ausführungskontext. Der Wert kann sich abhängig davon ändern, wie eine Funktion aufgerufen wird. Zum Beispiel:

   const obj = {
       name: "John",
       greet: function() {
           console.log("Hello, " + this.name);
       }
   };
   obj.greet(); // "Hello, John"

1. Frage: Was sind CSS-Selektoren? Antwort: CSS-Selektoren sind Muster, mit denen Sie die Elemente auswählen, die Sie formatieren möchten. Es gibt verschiedene Arten von Selektoren, z. B. Klassen-, ID- und Typselektoren. Zum Beispiel:

   .className { /* Seleciona todos os elementos com a classe "className" */
       color: blue;
   }
   #idName { /* Seleciona o elemento com o ID "idName" */
       font-size: 20px;
   }

1. Frage: Was ist „localStorage“ in JavaScript? Antwort: localStorage ist eine API, die es Ihnen ermöglicht, Daten dauerhaft im Browser des Benutzers zu speichern. In localStorage gespeicherte Daten verfallen nicht und bleiben auch nach dem Schließen des Browsers erhalten. Zum Beispiel:

   localStorage.setItem("key", "value");
   const value = localStorage.getItem("key"); // "value"

1. Frage:Was ist „Event-Bubbling“?
   
   Antwort: „Event Bubbling“ ist ein Ereignisausbreitungsmechanismus, bei dem ein Ereignis im innersten Element beginnt und sich auf die äußeren Elemente ausbreitet. Wenn beispielsweise eine Schaltfläche in einem

   geklickt wird, wird das Klickereignis zuerst auf der Schaltfläche und dann auf dem

   ausgelöst.

2. Frage: Was ist eine „Callback-Funktion“?
   
   Antwort: Eine „Callback-Funktion“ ist eine Funktion, die als Argument an eine andere Funktion übergeben wird, die zu einem späteren Zeitpunkt aufgerufen werden kann. Zum Beispiel:
   

   .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }

1. Frage: Was ist „Responsive Design“? Antwort: „Responsive Design“ ist ein Webdesign-Ansatz, der darauf abzielt, Seiten zu erstellen, die sich an unterschiedliche Bildschirmgrößen und Geräte anpassen. Dies wird häufig durch Medienabfragen in CSS erreicht. Zum Beispiel:

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

1. Frage:Was ist „Abruf-API“?
   
   Antwort: Die Fetch-API ist eine moderne Schnittstelle zum Stellen von HTTP-Anfragen in JavaScript. Es gibt ein Promise zurück, das die Antwort der Anfrage auflöst. Zum Beispiel:
   

      .box1 {
          position: relative;
          z-index: 1;
      }
      .box2 {
          position: relative;
          z-index: 2; /* box2 será exibido na frente de box1 */
      }
   

Volles Level

1. Frage:Was ist „CORS“?
   
   Antwort: CORS (Cross-Origin Resource Sharing) ist ein Sicherheitsmechanismus, der es ermöglicht, eingeschränkte Ressourcen auf einer Webseite von einer anderen Domäne anzufordern als der, die die Seite bereitgestellt hat. Dies ist wichtig, um Benutzerdaten zu schützen.

2. Frage: Was ist das „virtuelle DOM“ in React?
   
   Antwort: Das „virtuelle DOM“ ist eine vereinfachte Darstellung des realen DOM. React nutzt das virtuelle DOM, um die Aktualisierung des DOM zu optimieren, sodass Änderungen effizienter vorgenommen werden können, indem das virtuelle DOM mit dem realen DOM verglichen und nur die notwendigen Änderungen angewendet werden.

3. Frage:Was sind „Requisiten“ in React?
   
   Antwort: „Props“ sind ein Mechanismus zum Übergeben von Daten zwischen Komponenten in React. Sie ermöglichen die Übergabe von Daten von einer übergeordneten Komponente an eine untergeordnete Komponente. Zum Beispiel:
   

      const obj = {
          name: "John",
          greet: function() {
              console.log("Hello, " + this.name);
          }
      };
      obj.greet(); // "Hello, John"
   

4. Frage:Was ist „Zustand“ in React?
   
   Antwort: Der „Status“ ist ein Objekt, das den Teil der Anwendung darstellt, der sich ändern kann. Es wird zum Speichern von Daten verwendet, die sich auf das Rendering der Komponente auswirken. Zum Beispiel:
   

      .className { /* Seleciona todos os elementos com a classe "className" */
          color: blue;
      }
      #idName { /* Seleciona o elemento com o ID "idName" */
          font-size: 20px;
      }
   

5. Frage: Was ist „React Router“?
   
   Antwort: React Router ist eine Bibliothek, die die Navigation zwischen verschiedenen Komponenten in einer React-Anwendung ermöglicht und so die Erstellung von Single-Page-Anwendungen (SPA) erleichtert. Es ermöglicht Ihnen, Routen zu definieren und Komponenten basierend auf der URL zu rendern.

6. Frage:Was sind „Hooks“ in React?
   
   Antwort: Hooks sind Funktionen, mit denen Sie Status- und andere React-Ressourcen in Funktionskomponenten verwenden können. useState und useEffect sind Beispiele für Hooks. Zum Beispiel:
   

      .grid-container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 10px;
      }
   

7. Frage:Was ist „Webpack“?
   
   Antwort: Webpack ist ein Modul-Wrapper für JavaScript-Anwendungen. Es ermöglicht Ihnen, JavaScript, CSS und andere Ressourcendateien in einer einzigen Datei oder mehreren produktionsoptimierten Dateien zu bündeln.

8. Frage:Was ist „Babel“?
   
   Antwort: Babel ist ein Transpiler, mit dem Sie modernen JavaScript-Code (ES6) schreiben und in eine mit älteren Browsern kompatible Version konvertieren können. Es wird häufig in Verbindung mit Webpack verwendet.

9. Frage:Was ist „SASS“?
   
   Antwort: SASS (Syntactically Awesome Style Sheets) ist ein CSS-Präprozessor, der Ihnen die Verwendung von Variablen, Verschachtelungen und Funktionen ermöglicht, wodurch CSS dynamischer und einfacher zu warten ist. Zum Beispiel:
   

      document.addEventListener("DOMContentLoaded", function() {
          console.log("DOM completamente carregado e analisado");
      });
   

10. Frage:Was ist „AJAX“?
    
    Antwort: AJAX (Asynchronous JavaScript and XML) ist eine Technik, mit der Sie asynchrone Anfragen an den Server stellen können, ohne die Seite neu laden zu müssen. Dies wird häufig verwendet, um Teile einer Webseite dynamisch zu aktualisieren.

Oberstufe

1. Frage: Was ist „Microservices-Architektur“?
   
   Antwort: Microservices-Architektur ist ein Architekturstil, der eine Anwendung als eine Reihe kleiner, unabhängiger Dienste strukturiert, die miteinander kommunizieren. Dadurch können verschiedene Teams effizienter an verschiedenen Teilen der Anwendung arbeiten.

2. Frage: Was ist „SSR“ (Server-Side Rendering)?
   
   Antwort: SSR ist eine Technik, bei der das Rendern einer Webanwendung auf dem Server statt auf dem Client erfolgt. Dies kann die Leistung und SEO verbessern, da der Inhalt bereits gerendert an den Client gesendet wird.

3. Frage: Was ist „CSR“ (Client-Side Rendering)?
   
   Antwort: CSR ist eine Technik, bei der das Rendern einer Webanwendung auf dem Client erfolgt, normalerweise mithilfe von JavaScript. Dies ermöglicht ein interaktiveres Benutzererlebnis, kann sich jedoch negativ auf SEO auswirken, wenn es nicht richtig umgesetzt wird.

4. Frage:Was ist „Redux Saga“?
   
   Antwort: Redux Saga ist eine Bibliothek, die die Verwaltung von Nebenwirkungen in Redux-Anwendungen erleichtert. Es verwendet Generatoren, um asynchrone Vorgänge wie API-Aufrufe besser lesbar und organisiert abzuwickeln.

5. Frage: Was ist die „Kontext-API“ in React?
   
   Antwort: Die Kontext-API ist eine Möglichkeit, Daten durch den Komponentenbaum zu leiten, ohne Requisiten auf jeder Ebene manuell übergeben zu müssen. Dies ist nützlich, um globale Daten wie Themen oder Benutzerinformationen zu teilen.

6. Frage: Was ist „TypeScript“?
   
   Antwort: TypeScript ist eine Obermenge von JavaScript, die dem Code statische Typisierung hinzufügt. Sie können damit Typen für Variablen, Funktionen und Objekte definieren und so Laufzeitfehler vermeiden.

7. Frage: Was ist „Progressive Web App“ (PWA)?
   
   Antwort: PWAs sind Webanwendungen, die ein natives App-ähnliches Erlebnis bieten, einschließlich Offline-Support, Push-Benachrichtigungen und Installation auf dem Startbildschirm. Sie werden mit Standard-Webtechnologien erstellt.

8. Frage: Was ist „GraphQL“?
   
   Antwort: GraphQL ist eine Abfragesprache für APIs, die es Clients ermöglicht, genau die Daten anzufordern, die sie benötigen. Dies steht im Gegensatz zu REST-APIs, bei denen Clients möglicherweise mehr Daten als nötig erhalten.

9. Frage: Was ist „Web-Barrierefreiheit“?
   
   Antwort: Web-Barrierefreiheit bezieht sich auf die Praxis, Webanwendungen für Menschen mit Behinderungen nutzbar zu machen. Dazu gehört die Verwendung semantischer Tags, ARIA-Attribute und die Sicherstellung, dass Inhalte über die Tastatur navigierbar sind.

10. Frage: Was ist der „Service Worker“?
    
    Antwort: Ein Service Worker ist ein Skript, das der Browser getrennt von einer Webseite im Hintergrund ausführt und Funktionen wie Caching, Push-Benachrichtigungen und Hintergrundsynchronisierung ermöglicht. Es ist für den Aufbau von PWAs unerlässlich.

Bibliographie

Die präsentierten Informationen wurden aus mehreren zuverlässigen Quellen extrahiert und angepasst, darunter:

1. Glassdoor – Eine Website, auf der Menschen ihre Interviewerfahrungen und häufig gestellten Fragen teilen.

   • Glastür

2. MDN Web Docs – Umfassende Dokumentation zu HTML, CSS und JavaScript.

   • MDN-Webdokumente

3. JavaScript.info – Ein moderner Leitfaden zu JavaScript, der alles von den Grundlagen bis zu fortgeschrittenen Themen abdeckt.

   • JavaScript.info

4. React-Dokumentation – Die offizielle React-Dokumentation, die detaillierte Informationen über die Bibliothek enthält.

   • React Documentation

5. CSS-Tricks – Eine Website mit Tipps und Tutorials zu CSS und Frontend-Entwicklung.

   • CSS-Tricks

Diese Quellen genießen in der Webentwicklungs-Community weithin Anerkennung und sind hervorragende Ressourcen zur Vertiefung des Frontend-Wissens.

Das obige ist der detaillierte Inhalt vonFrontend-Konzepte II. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!