Fragen zu Front-End-UHF-Interviews!

1. Pseudoklassen und Pseudoelemente in CSS für das Frontend

2. Welche Möglichkeiten gibt es, den Schwimmer zu reinigen?

• Antwort: Die erste Methode besteht darin, unser BFC-Prinzip zu verwenden, d
• Die zweite Methode: Fügen Sie einfach ein div-Tag zum großen Feld hinzu, geben Sie dann einen Klassennamen ein und fügen Sie einen Satz im Stil dieses Klassennamens hinzu, um das Problem des Zusammenbruchs zu lösen. Es besteht keine Notwendigkeit, etwas in das Tag zu schreiben
• Die dritte Methode besteht darin, der großen Box ein Pseudoelement hinzuzufügen. Der Stil dieses Pseudoelements muss jedoch als Element auf Blockebene festgelegt werden, um ein klares Floating zu realisieren. Das Prinzip ist das gleiche wie bei der zweiten Methode

3. Welche Methoden gibt es zur horizontalen und vertikalen Zentrierung?

• antworten:
• display:flex; Stellen Sie dann die Hauptachse und die Seitenachsen so ein, dass sie zentriert sind, um die Zentrierung von Elementen auf Blockebene zu erreichen. Beim Festlegen von Inline-Elementen ist display:inline-flex erforderlich
• Die horizontale Zentrierung von Elementen auf Blockebene lautet: margin 0 auto, dann geben Sie als margin-top die Hälfte der Höhe des großen Felds minus die Hälfte seiner eigenen Höhe ein. Sie können auch transform:translateX(); mit absoluter und relativer Positionierung verwenden Positionierung zu erreichen
• Inline-Elemente: text-align: center; collocation line-height: ; um die vertikale Mitte festzulegen

4. Der Unterschied zwischen Elementen auf Blockebene und Inline-Elementen

• antworten:
• 1. Elemente auf Blockebene können die Breite und Höhe festlegen und nur eine Zeile belegen. Im Allgemeinen gibt es solche
• 2. Inline-Elemente zeigen im Allgemeinen mehrere Elemente in einer Zeile an, und die Breite und Höhe können nicht festgelegt werden. Durch Breite und Höhe kann der Inhalt nur erweitert werden

5. Gewichtspriorität in CSS

• antworten:
• Der Superlativ ist wichtig
• Der zweite ist der Inline-Stil
• Der dritte ist der ID-Selektor
• Der vierte ist der Klassenselektor
• Der fünfte ist der Label-Selektor
• Die sechste ist Vererbung oder *-Zahl

6. Sprechen Sie darüber, was ein Prototyp und eine Prototypenkette ist

• Der Prototyp ist: Der Konstruktor zeigt über den Prototyp auf das Prototypobjekt, und die Eigenschaften und Methoden im Prototypobjekt werden von allen Instanzen gemeinsam genutzt.

• • In JavaScript verfügt jedes Objekt über ein Prototypobjekt, das null oder ein anderes Objekt sein kann. Ein Prototypobjekt kann als Vorlage oder Blaupause angesehen werden, die Eigenschaften und Methoden enthält, die von Instanzobjekten gemeinsam genutzt werden können. Wenn ein neues Objekt erstellt wird, werden seine Eigenschaften und Methoden von seinem Prototyp geerbt. Diese Vererbungsbeziehung wird als prototypische Vererbung bezeichnet.
    Prototypische Vererbung ist ein sehr wichtiges Konzept in JavaScript, das JavaScript zu einer leistungsstarken objektorientierten Sprache macht. Mithilfe von Prototypen können wir die Vererbung zwischen Objekten einfach implementieren und so die Wiederverwendung von Code realisieren. Gleichzeitig sind Prototypen auch einer der Kernmechanismen zur Implementierung der Vererbung in JavaScript.

• Prototypenkette:

• • In JavaScript verfügt jedes Objekt über eine interne Eigenschaft [[Prototype]], die auf den Prototyp des Objekts verweist. Wenn wir versuchen, auf eine Eigenschaft oder Methode zuzugreifen, die in einem Objekt nicht vorhanden ist, sucht die JavaScript-Engine nach dem Prototyp des Objekts. Wenn die Eigenschaft oder Methode auf dem Prototyp nicht vorhanden ist, sucht sie weiterhin nach dem Prototyp des Prototyps, bis er gefunden wird. Dieser Suchprozess bildet die Prototypenkette.
  • Die Prototypenkette ist die Kette des Prototyps jedes Objekts, die ein Objekt mit seinem Prototyp, mit dem Prototyp dieses Prototyps usw. verbindet, bis hin zum Object.prototype-Objekt an der Spitze der Prototypenkette. Dieses oberste Objekt ist die Basis aller Objekte und definiert einige häufig verwendete Eigenschaften und Methoden, wie z. B. toString(), valueOf() und andere Methoden. Durch den Prototypkettenmechanismus kann jedes Objekt auf die in seinem Prototyp definierten Eigenschaften und Methoden zugreifen und so die Wiederverwendung von Code und die Vererbungsbeziehung zwischen Objekten realisieren.
  • Es ermöglicht einem Objekt, Eigenschaften und Methoden von seinem Prototyp zu erben und die erforderlichen Eigenschaften und Methoden in der Prototypenkette zu finden.

7. Wissen Sie, was das Versprechensobjekt ist? Sprechen Sie über seine Vor- und Nachteile sowie über Async und Wait

• • Promise-Objekte sind eine Lösung für die Handhabung der asynchronen Programmierung in JavaScript
  • Der größte Vorteil des Promise-Objekts besteht darin, die Callback-Hölle zu vermeiden, das heißt, mehrschichtige verschachtelte Callback-Funktionen zu vermeiden, wodurch die asynchrone Programmierung einfacher zu verstehen und zu warten ist
  • Die Nachteile sind: Stornierung wird nicht unterstützt: Sobald ein Versprechen erstellt wurde, kann es nicht mehr storniert werden. . Synchrone Aufgaben können nicht verarbeitet werden: Versprechen eignen sich hervorragend für die Implementierung asynchroner Vorgänge, können jedoch keine synchronen Aufgaben verarbeiten.
  • asynchron:

• • • Es ermöglicht Funktionen, ein Promise-Objekt zurückzugeben
    • Fehler innerhalb asynchroner Funktionen können mithilfe von Try-Catch erfasst und behandelt werden
    • Synchroner Code kann wie normale Funktionen innerhalb einer asynchronen Funktion verwendet werden. Nach der Verwendung fühlt es sich bequemer an, mit asynchronem Code umzugehen, und der Code ist prägnanter und leichter zu verstehen

• • Warten: Das Schlüsselwort „await“ kann nur in asynchronen Funktionen platziert werden. 2. Das Schlüsselwort „await“ wird vor der Methode platziert, deren Rückgabewert ein Versprechensobjekt ist, und der folgende Code wird erst ausgeführt, wenn die Methode ausgeführt wird

8. Sprechen Sie über das Verpackungsprinzip von Webpack

• Prinzip:

• • Bei der Webpack-Verpackung wird alles als Modul behandelt, egal ob HTML, CSS oder JS, sie können alle aufeinander verweisen. Der erste Schritt besteht darin, die Eintragsdatei zu analysieren, der zweite Schritt besteht darin, die abhängigen Module zu analysieren, und der dritte Schritt besteht darin, die Module zu analysieren und zu laden

• • • Der vierte Schritt besteht darin, das Plug-In auszuführen, und der fünfte Schritt besteht darin, das Verpackungsergebnis auszugeben. Einige neue ES6-Grammatiken wie Less-, Sass- und Vue-Dateien erfordern jedoch andere Verarbeitungstools

9. Sprechen Sie über den Lebenszyklus in vue2 und die Details der darin enthaltenen Hooks

• Lebenszyklus:

• • Vor dem Erstellen, nach dem Erstellen, vor dem Aufhängen, nach dem Aufhängen, vor dem Aktualisieren, nach dem Aktualisieren, vor dem Zerstören, nach dem Zerstören. Dies sind die am häufigsten verwendeten Haken.
  • Sobald einige Seiten geöffnet sind, muss ich sie im Allgemeinen aufrufen, um Daten anzufordern. Ich lasse sie erstellen. Es ist ein Haken nach der Erstellung. Es kann auf Daten zugreifen, Attribute berechnen, überwachen und so weiter.
  • Im Allgemeinen hängen meine ehemaligen Kollegen die Daten gerne im Mount auf
  • Außerdem werden zwei Hooks aktiviert und deaktiviert, wenn die Komponente zwischengespeichert wird
  • Nutzen Sie die Gelegenheit, vue3 damit zu vergleichen

10. Erzählen Sie mir von Ihrem Verständnis von Vuex

• verstehen

• • Erstens gibt es in Vuex mehrere Attribute: 1, Mutation (der Ort, an dem die Methode platziert wird), 2, Zustand (der Ort, an dem die Daten und die Variable gespeichert werden), 3, Aktion (der Ort, an dem die asynchrone Methode wird platziert, und einige öffentliche asynchrone Anforderungen werden oft hier platziert)
  • 4. Getter (Sie können die Variablen im Status filtern, ähnlich den berechneten Eigenschaften), 5. Module (wenn das Projekt besonders kompliziert ist, können Sie jedem Modul seine eigenen Eigenschaften zuweisen, was klarer und einfacher zu verwalten ist)
  • Auch beim Aufruf von vuex erfolgt eine vereinfachte Verarbeitung. Beispielsweise kann die Verarbeitung von Hilfsfunktionen den Code beim Aufruf von Attributen in vuex vereinfachen.
  • Einige Verwendungsszenarien von Vuex: wie das Speichern von Benutzerinformationen, das Speichern von Token usw.

11. Sprechen Sie über den Unterschied zwischen vue2 und vue3 – 1 Unterschied im Lebenszyklus – 2 Unterschied in der Datenspeicherung

• der Unterschied:

• • 1. Vue3 hat die Leistung für vue2 optimiert. Vue3 hat das virtuelle DOM optimiert, wodurch die Rendering-Leistung erhöht und die Speichernutzung reduziert werden kann. Beim Packen wird nicht verwendeter Code entfernt, um die Codegröße zu reduzieren
  • 2. Vue3 ist in TS geschrieben
  • 3. Die Lebenszyklen von vue2 und vue3 unterscheiden sich ebenfalls etwas. Die Vor- und Nacherstellung von vue2 wird durch das Setup in vue3 ersetzt, und die letzten beiden Hooks in vue3 werden auch als Vor-Deinstallation und Nach-Deinstallation bezeichnet .

• • • Vor den Hooks von Vue3 steht on

12. Wie kommunizieren Geschwisterkomponenten?

• Brother-Komponenten können Vuex zur Kommunikation verwenden
• Sie können auch die Event-Bus-Kommunikation verwenden. Die Verwendungsmethode besteht darin, ein Ereignis über $emit auszulösen, ein Ereignis über die Methode $on() abzuhören und Daten in dieser Methode zu verarbeiten

13. So passen Sie einen Filter für Vue an und schreiben ihn

• antworten:

• • Wir können einen benutzerdefinierten Filter mit der Methode Vue.filter() registrieren. Es enthält zwei Parameter, einer ist der Name des Filters, der andere ist eine Funktion, und diese Funktion verfügt auch über einen Parameter, der übergeben wird
  • Parameter, geben Sie das Verarbeitungsergebnis nach der Verarbeitung des Werts zurück.
  • Wenn Sie einen Filter verwenden, schließen doppelte geschweifte Klammern den Filternamen ein | Parameter, die übergeben werden sollen ------- { { Filtername | Parameter, die übergeben werden sollen}}

14. Sprechen Sie über Keep-Alive --- 1 Keep-Alive unterliegt irgendwelchen Einschränkungen

• Keep-Alive ist der Komponenten-Cache. Nachdem der Komponenten-Cache ausgelöst wurde, gibt es zwei weitere Hooks, einen aktivierten und einen deaktivierten
• Seine Verwendung besteht darin, die zwischenzuspeichernden Komponenten zu verpacken
• Seine Einschränkung: Er kann nur dynamische Komponenten zwischenspeichern, was zu Speicherverlusten führen und sich auch auf das Rendering auswirken kann

15. Der Unterschied und die Nutzungsszenarien zwischen http und Websocket

• der Unterschied:

• • 1. HTTP ist eine kurze Verbindung. Jedes Mal, wenn eine Anfrage gesendet wird, wird eine kurze Verbindung erstellt und die Verbindung wird sofort geschlossen, wenn die Anfrage abgespielt wird.
  • Websocket ist eine langfristige Verbindung. Nachdem die Verbindung hergestellt wurde, bleiben der Client und der Server verbunden. Beide Parteien können jederzeit Daten aneinander senden und die Verbindung wird geschlossen, wenn die Verbindung geschlossen wird.
  • Auch das Nachrichtenformat ist unterschiedlich: Das Nachrichtenformat von http ist festgelegt, während das Nachrichtenformat von Websocket darin besteht, dass Client und Server Nachrichten frei senden können.

• Zu verwendende Szenen:

• • HTTP wird häufig vom Client verwendet, um eine Anfrage an den Server zu senden. Die Verbindung wird nach Abschluss der Datenübertragung getrennt
  • Websocket wird häufig in Chatrooms und Kommunikationsszenarien verwendet, und bei der Verwendung müssen neue Kompatibilitätsprobleme berücksichtigt werden. Einige Browser mit niedriger Version unterstützen Websocket nicht

16. Wie verstehen Sie Cross-Domain?

• Domänenübergreifend ist der Schutzmechanismus der Same-Origin-Richtlinie. Wenn eine Seite Ressourcen von einer anderen Seite anfordert, sind Port, Domänenname und Protokoll unterschiedlich und es erfolgt domänenübergreifend.
• Die Methode zur domänenübergreifenden Lösung kann CORS, JSONP, Proxy usw. sein.
• Unter diesen ist JSONP eine Methode zum dynamischen Generieren von <script>-Tags zur Implementierung domänenübergreifender Anforderungen.
• CORS ist eine Methode, mit der Webseiten-domänenübergreifende Server Ajax-Anfragen initiieren können. Die Implementierung von CORS muss den entsprechenden entsprechenden Header festlegen, um die zulässigen domänenübergreifenden Regeln zu steuern. Der entsprechende Header ist auf Englisch zu lang. Sie können den Anfang sehen von A im domänenübergreifenden Fehlerbericht.

17. So realisieren Sie den Agenten

• Proxy-Implementierung:

• • Der Proxyserver löst das domänenübergreifende Problem, baut einen Server auf dem Proxyserver auf, lauscht auf die Front-End-Anfrage, erfasst die Front-End-Anfrage auf der Serverseite und leitet die Anfrage an den Zielserver weiter. Nach Erhalt der Anfrage , gibt der Zielserver das Antwortergebnis an den Proxyserver zurück

18. Welche Sicherheitsprobleme gibt es zwischen Front- und Back-End?

• XSS (Cross Site Scripting) Es gibt verschiedene Sicherheitsprobleme zwischen Front- und Back-End. Im Folgenden sind einige der häufigsten Sicherheitsprobleme aufgeführt
• Verlust vertraulicher Informationen: Einige vertrauliche Informationen werden im Front-End-Code gespeichert, z. B. Schlüssel des Verschlüsselungsalgorithmus, Zugriffsschlüssel der API-Schnittstelle usw. Ohne Verschlüsselung können diese Informationen von böswilligen Angreifern abgerufen werden, was zu Schäden am System führen kann.

19. Sprechen Sie über das dynamische Routing des Vue-Routings

20. Sprechen Sie über den Zahlungsvorgang

• Das heißt, um eine Zahlung durchzuführen, sind Front-End und Back-End erforderlich. Das Back-End muss verschiedene Zahlungs-SDKs beantragen, z. B. das SDK von WeChat oder Alipay, und dann die entsprechende Schnittstelle auf dem Back-End schreiben. Das Frontend bietet Alipay, WeChat und andere Auswahlschnittstellen auf der Schnittstelle, und die entsprechende Schnittstelle wird aufgerufen, wenn der Benutzer klickt. Anschließend wird die Bestellnummer von der Backend-Schnittstelle generiert und an das Frontend zurückgegeben. Das Frontend ruft dann die entsprechende Zahlungs-API auf und wartet darauf, dass der Benutzer das Passwort eingibt, um einen vollständigen Rückruf zu erhalten. Wenn die Zahlung erfolgreich ist, wird die Zahlungserfolgsseite angezeigt. Und leiten Sie die Daten zur Aufzeichnung an das Backend weiter. Wenn dies fehlschlägt, übergeben Sie die Seite mit Zahlungsfehlern

21. Sprechen Sie über den Unterschied zwischen let const var. Kann const ein nicht fixiertes Objekt definieren?

• Der Unterschied zwischen let const var:

• • let wird zum Definieren von Variablen verwendet, die geändert werden können, und sein Gültigkeitsbereich erstreckt sich auf Blockebene
  • const wird im Allgemeinen zum Definieren konstanter Variablen verwendet, dh Variablen, die sich nicht ändern
  • Der Geltungsbereich der von var deklarierten Variablen liegt auf Funktionsebene, während der Geltungsbereich der von let und const deklarierten Variablen auf Blockebene liegt.
  • Mit var deklarierte Variablen können mehrmals ohne Fehler deklariert werden, während mit let und const deklarierte Variablen nur einmal deklariert werden können und wiederholte Deklarationen Fehler verursachen.

22. Welche benutzerdefinierten Komponenten wurden verpackt

• Zu den gängigen Kategorien gehören: Schaltflächenkomponenten, Popup-Fensterkomponenten, Dropdown-Optionskomponenten usw. Kann auf mehreren Seiten verwendet werden
• UI-Komponentenklasse: wie Karussell, Navigation, Liste usw.
• Funktionskomponenten: Bild-Upload-Komponenten, Kartenkomponenten usw.

23. Erzählen Sie mir etwas über WebSocket und wie es implementiert wird? und welche APIs darin enthalten sind

• WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert. Nachdem die Verbindung hergestellt wurde, können sowohl der Server als auch der Client aktiv Daten aneinander senden und empfangen und so eine effiziente, bidirektionale Netzwerkkommunikation in Echtzeit realisieren. Da es sich bei WebSocket um ein standardisiertes Protokoll handelt, kann es nicht nur in Webanwendungen, sondern auch in anderen Anwendungen wie mobilen Anwendungen, Desktop-Anwendungen usw. verwendet werden.
• erreichen:

• • Die Implementierung von WebSocket besteht hauptsächlich darin, über das HTTP-Protokoll die Hand zu schütteln und dann auf das WebSocket-Protokoll zu aktualisieren

• Welche APIs sind darin enthalten?

• • 1. WebSocket: Zeigt eine WebSocket-Verbindung an, über die Daten gesendet und empfangen werden können.
  • 2. onopen: Die Rückruffunktion, nachdem die WebSocket-Verbindung erfolgreich hergestellt wurde.
  • 3. close: Die Methode zum Schließen der Verbindung.
  • Darüber hinaus gibt es einige Rückruffunktionen zur Annahme von Informationen und zum Versenden von Nachrichten

24. Sprechen Sie über Pinia

• der Unterschied:

• • Kleiner und schneller: Pinia hat weniger Code und eine bessere Leistung als Vuex.
  • Einfacher: Die relativ einfache API von Pinia erleichtert das Erlernen und Verwenden.
  • Sicherer: Pinia verwendet eine starke Typisierung, die eine bessere Typprüfung und Fehleraufforderungen ermöglichen kann.
  • Im Vergleich zu Vuex verfügt Pinia über weniger APIs, ist intuitiv und einfach, aber Vuex ist relativ komplex und leistungsstark
  • Die modulare Unterstützung ist anders: In Vuex werden alle Zustände in einem einzigen Store-Objekt gespeichert, während Pinia die Gruppierung von Zuständen in mehrere Store-Module unterstützt, wodurch die Anwendung modularer und wartbarer wird.

25. Was sind die Unterschiede zwischen Makroaufgaben und Mikroaufgaben?

• Häufige Makroaufgaben sind: setTimeout, setInterval, DOM-Ereignisse, AJAX-Anfragen
• Gängige Mikrotasks sind: Versprechen, asynchron/warten
• Was ist der Unterschied?

• • Der Unterschied zwischen ihnen liegt im Ausführungszeitpunkt und in der Priorität. Der Ausführungszeitpunkt von Mikrotasks ist früher als der von Makrotasks, und der Ausführungszeitpunkt von DOM-Rendering ist auch früher als der von Makrotasks ----- Mikrotask > DOM-Rendering > Makrotask

26. Sagen Sie mir, was vue.use ist