Heim > Artikel > Web-Frontend > Eine vollständige Sammlung ausgewählter Fragen und Antworten zu Web-Frontend-Interviews im Jahr 2023 (Sammlung)

Eine vollständige Sammlung ausgewählter Fragen und Antworten zu Web-Frontend-Interviews im Jahr 2023 (Sammlung)

青灯夜游nach vorne: 2021-04-08 10:11:507595Durchsuche

Dieser Artikel fasst einige ausgewählte Web-Frontend-Interviewfragen zusammen, die es wert sind, gesammelt zu werden (mit Antworten). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

HTML, CSS-bezogen

1. Welches sind die am häufigsten verwendeten Bildformate im Internet? Dateien werden auf das Minimum komprimiert, wenn
ps

im jpeg-Format gespeichert wird , Bereitstellung von 11 Komprimierungsstufen2. Bitte beschreiben Sie kurz das CSS-Box-Modell Eine css

-Box kann von außen nach innen in vier Teile unterteilt werden:

Marge

(äußerer Rand),

Eine vollständige Sammlung ausgewählter Fragen und Antworten zu Web-Frontend-Interviews im Jahr 2023 (Sammlung) border

(Rand), padding (innerer Rand), content (content). Standardmäßig legen die Eigenschaften width und height der Box nur die Breite und Höhe von content (Inhalt) fest. Die tatsächliche Breite der box sollte sein: Inhaltsbreite + Linke und rechte Polsterung+Linke und rechte Ränder+

Linke und rechte RänderDie tatsächliche Höhe der Box sollte sein: Inhaltshöhe+Oben und unten Polsterung+Obere und untere Ränder+

Obere und untere Ränder3. Verwendung von Video-/Audio-TagsVideo:

src

Die Videoadresse, die abgespielt werden mussBreite/Höhe

Legen Sie die Breite und Höhe des abzuspielenden Videos fest Identisch mit den Breiten- und Höhenattributen des img

-TagsAutoplay

Ob automatisch abgespielt werden soll Steuerelemente Ob die Steuerleiste angezeigt werden soll

Poster Vorheriges nicht abspielen Angezeigtes Standbild

loop Ob die Wiedergabe in einer Schleife erfolgen soll

perload Video vorladen (Cache) mit autoplay

Looking Conflict, wenn das Attribut autoplay gesetzt ist

pro Ladung Attribut wird ungültig sein. stummgeschaltet Stiller Modus

Audio: Audioattribute ähneln Videoattributen, aber die Breite, Höhe und Poster-Attribute können nicht verwendet werden

4. Was sind die neuen Inhalte von HTML5?

Multimedia-Tags

5. Was sind die neuen semantischen Tags in HTML5?

Vorteile semantischer Tags:

Verbesserung der Zugänglichkeit

2.seo 3.

Klare Struktur, förderlich für die Wartung

Kopfzeile

Seitenkopfzeile HauptseiteHauptseiteninhalt Fußzeile Seite unten AbbildungLaden Sie unabhängige Inhalte ( der Text unter dem Bild oben)

figcaption Figure Titel HgroupTitelkombinations-Tag Markierung Hervorhebung

Dialog Dialogbezeichnung laden (muss mit öffnen übereinstimmen Attribut) EinbettenPlugin-Label laden

VideoVideo laden AudioAudio laden (unterstützte Formate ogg, mp3

, wav )6 Neue Funktionen Border:

border-radios Abgerundete Ränder hinzufügen border-shadow: Schatten zur Box hinzufügen (horizontale Verschiebung, vertikale Verschiebung, Unschärferadius , Schattengröße, Schattenfarbe, Insetr (innerer /äußerer Schatten))

Randbild: Legen Sie das Randbild fest.

Der Pfad des Randbildes
Der Bildrand ist nach innen geneigt. Verschieben border-image-width Die Breite des Bildrandes border-image-outset
Randbildwiederholung Ist der Bildrand gekachelt? legt fest, wo die Das Attribut „background-position“ wird relativ zu „background-clip“ positioniert )Gradient:

Linearer Gradient () linearer Gradient

Radialer Gradient() Radialer Gradient
Texteffekt: Wortumbruch
Textschatten: Textschatten (horizontale Verschiebung, vertikale Verschiebung, Unschärferadius, Schattenfarbe) Transformation:

angewendet auf 2D3D

Transformationsursprung
xyz Achse)

Transformationsstil Angeben, wie verschachtelte Elemente im dreidimensionalen Raum gerendert werden

2DKonvertierungsmethode:
drehenRotation
(x,
) gibt die Verschiebung des Elements im zweidimensionalen Raum an 3D Konvertierungsmethode:

Perspektive

n) ist 3DKonvertierung Übersetzungsskala
.
Übergang: Übergangseigenschaft
Übergangsdauer Die Zeit, die benötigt wird, um den Übergangseffekt abzuschließen
Übergangs-Timing-Funktion Geben Sie die Geschwindigkeit des Übergangseffekts an
Übergangsverzögerung Angeben Wann soll der Effekt gewechselt werden?

Animationsdauer

Die Zeit Es dauert für die Animation

Animations-Timing-Funktion
Wie die Animation einen Zyklus abschließtAnimationsverzögerung
Das Verzögerungsintervall, bevor die Animation beginnt mation-iteration-count
Anzahl der Animationswiedergaben

Animationsrichtung
Ob die Animation rückwärts abgespielt werden soll
7. Welche Möglichkeiten gibt es, Floats zu löschen? Bitte erläutern Sie uns die Vorteile der einzelnen
Höhenreduzierung: Wenn alle untergeordneten Elemente schweben und für das übergeordnete Element keine Höhe festgelegt ist, wird die Höhe für das übergeordnete Element reduziert.
Floating-Methode löschen
1: Definieren Sie die Höhe des übergeordneten Elements separat
Vorteile: Schnell und einfach, weniger Code

Nachteile: Reaktionsfähiges Layout kann nicht ausgeführt werden

🏜 (für

ie6 kompatibel)

Vorteile: einfach und schnell, weniger Code, hohe Kompatibilität

3: Fügen Sie hinter dem schwebenden Element ein leeres Tag hinzu:

; height; overflow: hidden Vorteile: einfach und schnell, weniger Code, höhere Kompatibilität. Nachteile: Das Hinzufügen leerer Tags ist der Seitenoptimierung nicht förderlich Vorteile: Einfach, weniger Code, gute Kompatibilität

Floating-Methode löschen5: Universelle Löschmethode:

Pseudoobjekte zu reduzierten Elementen hinzufügen

.father：after{
         Content：“随便写”；
         Clear：both；
         display：block；
         Height：0；
         Overflow：hidden；
         Visibility：hidden
}

Vorteile: Feste Schreibmethode, hohe Kompatibilität Nachteile: Viel Code
RelativRelative Positionierung

Absolut Absolute Positionierung, vom Dokumentenfluss abbrechen Relativ zum übergeordneten Element positionieren

Fest Feste Positionierung, außerhalb des Dokumentflusses, relativ zum Browserfenster positioniert
Standardwert, das Element erscheint im normalen Fluss9 untergeordnete Elemente im übergeordneten Element zentriert
Horizontale Zentrierung: 1.
Margin: auto

, das untergeordnete Element ist auf display

eingestellt: inline-block

, und das untergeordnete Element kann nicht auf float eingestellt werden, da sonst die Zentrierung fehlschlägt Horizontale und vertikale Zentrierung: Das untergeordnete Element ist absolut relativ zum übergeordneten Element positioniert, das untergeordnete Element top

, left wird auf 50% gesetzt, das untergeordnete Element margin-top und margin-left minus der Hälfte ihrer Breite und Höhe

Das untergeordnete Element ist absolut relativ zum übergeordneten Element positioniert. Oben, unten, links und rechts des untergeordneten Elements sind alle 0

Rand:
Auto , Kind Elementeinstellungen margin: autoDas untergeordnete Element ist relativ positioniert, das untergeordnete Element top, left
hat den Wert
50 %
, transformieren : übersetzen(- 50%
，
-50%
)
Das untergeordnete Element ist relativ zum übergeordneten Element absolut positioniert. Der Wert des untergeordneten Elements top, left beträgt 50 %, transform: übersetzen ( -50 %, -50 %)
Das übergeordnete Element legt die flexible Box fest,

Anzeige: flex; justfy-content:center ; align-item: center; justfy-content: center

10. Der Unterschied zwischen Border-Box und Content-Box

Content-Box Standard-Box-Modell Breiteohne Polsterung und Rand

Border-Box Seltsames Box-Modell Breitebeinhaltet padding und border

11 Das Element ist vertikal zentriert

1.Stellen Sie die Zeilenhöhe des untergeordneten Elements so ein, dass sie mit der des übergeordneten Elements übereinstimmt

2. Legen Sie das untergeordnete Element als Inline-Block fest und fügen Sie vertical-align hinzu: middle

3.Bekannte Höhe des übergeordneten Elements, relative Positionierung des untergeordneten Elements durch transform: TranslateY (-50%)

4. Ich kenne die Höhe des übergeordneten Elements nicht, das untergeordnete Element hat die gleiche übergeordnete Form, das untergeordnete Element top: 5 Höhe des Verborgenen Knoten muss die Hälfte der verbleibenden Höhe sein6. zum übergeordneten Element display: table, untergeordnetes Element display

: table-cell, vertikal -align:

Mitte7.Pseudoelemente zu übergeordneten Elementen hinzufügen

8.flexbox, übergeordnetes Element display: flex, untergeordnetes Element align-self: center

12. So stellen Sie sicher, dass der Chrome-Browser weniger anzeigt 12px Der Text

wurde ursprünglich von Google Private Properties hinzugefügt -webkit-text-size-adjust: none, jetzt -webkit-transform: scale()

13.Was sind die CSS-Selektoren, welche Eigenschaften können vererbt werden und wie werden die Prioritäten berechnet? Was sind die neuen Pseudoklassen in Css3? Selektor, Nachkommenselektor

Css2Pseudoklassenselektor:

a:link/visited/hover/active

Css3selektor: Leerzeichen

( n)

Finden Sie den n-ten Typ

Finden Sie den eindeutigen Typ Nur-TypAttributauswahl: Suchen Sie basierend auf Tag-Attributen [attr=Wert ]

: Wurzel Suchen Sie das Wurzelelement

html Tag: leer Überprüfen Sie das leere Tag

Ziel-Pseudoklassenselektor: (Formular)

： aktiviert Finden Sie die Tags, die verwendet werden können

deaktiviert Finden Sie die Tags, die verboten sind :

markiert Finden Sie die markierten Tags

fake Element selector

selection Hervorhebung des ausgewählten Textinhalts festlegen (kann nur für Hintergrundfarbe und Textfarbe verwendet werden) Negativer Pseudoklassenselektor
() Sprach-Pseudoklassenselektor lang
Priorität (Gewicht):

Pseudo-Element-Selektor1

KlasseSelektor10

Pseudo-Klassen-Selektor10

Attributauswahl10

IdSelector100

Inline-Style-Gewicht 1000

enthält Selektorgewicht als Gewicht. Die Summe von

erbt den Stil. Das Gewicht beträgt Diese Attribute können vererbt werden: Sichtbarkeit

und

Cursor

Elemente auf Blockebene können erben: text-indent und
List-Elemente können erben: list-style,
, list-style-position, list-style-image
Inline-Elemente vererbbar: letter-spacing, word-spacing , Linienhöhe, Farbe,
, Schriftfamilie, SchriftgrößeSchriftstil. , Schriftvariante , Schriftstärke, Textdekoration, Texttransformation
RichtungAbsatz Abstand Zeilenhöhe Schriftfarbe . .. 4. Es gibt eine große Anzahl von Bildern, die sehr langsam geladen werden. Gibt es eine Möglichkeit, sie zu optimieren? 1.Verzögertes Laden von Bildern, Hinzufügen eines Bildlaufleistenereignisses im unsichtbaren Bereich des Bildes, um den Abstand zwischen der Bildposition und dem oberen Rand des Browsers und der Seite zu bestimmen Vor letzterem wird dem Laden Priorität eingeräumt2 .Verwenden Sie die Technologie zum Vorladen von Bildern, um zuerst das vorherige und das nächste Bild des aktuell angezeigten Bildes herunterzuladen

3.Verwenden Sie csssprite oder svgsprite

15. Was sind Inline-Elemente/Block-Level-Elemente?

Inline-Elemente: Benachbarte Inline-Elemente werden in derselben Zeile angeordnet und belegen keine einzelne Zeile. Das Festlegen von Breite und Höhe ist ungültig Sie können Attribute wie Breite und Höhe festlegen

Variable Elemente: Bestimmen Sie anhand kontextbezogener Warnungen, ob das Element ein Blockelement oder ein Inline-Element ist -h6 hr p ul ol table address blockquote dir from menu

Inline-Elemente:

a br I em img input select span sub sup u textarea

Variable Elemente: button del iframe ins

16. Was ist der Unterschied zwischen dem Standardmodus und dem seltsamen Modus des Browsers?

Standardmodus: Der Browser analysiert und führt den Code gemäß den

W3C-Standards aus.

Seltsamer Modus: Der Browser analysiert und führt den Code auf seine eigene Weise aus anders heißt es seltsamer Modus Bildelemente

Für Inline-Elemente und table-cell-Elemente ist der Standardwert des Attributs

vertical-align

im Standardmodus

baseline

, während im seltsamen Modus der

ist table

Bild in der Zelle ist Der Standardwert des Attributs
vertical-align ist
bottom
, sodass am unteren Rand der Bildschrift

ein paar Pixel Platz vorhanden sind im Element css in font Die Attribute von sind alle vererbbar. Für das table-Element können einige Elemente der Schriftart nicht von anderen gekapselten Elementen geerbt werden , insbesondere das Attribut Schriftgröße Die Größe von Inline-Elementen
Im Standardmodus können
nicht ersetzte Inline-Elemente
nicht in der Großschreibung angepasst werden Die Breite und Höhe des Elements wirken sich auf die Größe des Elements aus.

Element Prozentuale Höhe des Wenn ein Element die prozentuale Höhe verwendet, hängt die Höhe im Standardmodus von der Inhaltsänderung ab, in seltsamen Fällen geht sie verloren , der Prozentsatz wird genau angewendet Behandlung von Elementüberlauf Standard Im Modus ist der Standardwert von
Überlauf
sichtbar
. Im seltsamen Modus wird dieser Überlauf als behandelt eine erweiterte
Box, das heißt, die Größe des Elements wird durch den Inhalt bestimmt und der Überlauf wird nicht automatisch angepasst, um den Überlaufinhalt einzuschließen

17 Rand und Polsterung verwendet?

Padding

Der Abstand zwischen dem eigenen Rand und dem eigenen Inhalt

Verwenden Sie margin, wenn Sie Platz außerhalb des Randes hinzufügen müssen, verwenden Sie padding, wenn Sie Platz innerhalb des

Rands hinzufügen müssen. 18. Was sind die Eigenschaften des Flexibles Box-Layout? Kurzbeschreibung? die Flexbox, wenn sie den übergeordneten Container überschreitet die Ausrichtung des Flex-Box-Elements auf der Seitenachse

Align-content: Zeilenausrichtung festlegen

Justify-content: Ausrichtung des flexiblen Box-Elements auf der Hauptachse festlegen

19. So deaktivieren Sie Beschriftungen: Hinzufügen von deaktivierten Attributen übergeordnete Box21.Px, rem, em Der Unterschied Px, absolute Längeneinheit, Pixel px

ist relativ zur Monitorbildschirmauflösung em

relative Längeneinheit , relativ zur Schriftgröße des Text Schriftgröße des HTML-Root-Elements Das ist direkt das Original

-Wert geteilt durch 10

plus

und das ist es

22. Was ist die dreischichtige Struktur einer Webseite? Struktur (html

oder

xhtm

Markup-Sprache) Leistung (

cssStylesheet) Verhalten (js

)

23. Bitte beschreiben Sie kurz die Medienanfrage

Medienabfrage erweitert das Attribut Medien. besteht darin, je nach Medientyp unterschiedliche css-Stile festzulegen, um adaptive Zwecke zu erreichen. 24. Rem-Nachteile Gemeinsam beachten Sie einige in der ersten Kompatibilitätsstufe

26. Vertikale und horizontale Zentrierungsmethoden

27. Dreispaltige Layoutmethode mit festem mittleren adaptiven Rand

negativer Wert Methode: Sowohl die linke als auch die rechte Spalte schweben nach links, und die linke und rechte Spalte verwenden negative

Margin

-Werte. Die mittlere Spalte wird von einem schwebenden Element mit einer Breite von

100 %

2 umschlossen.

Selbstschwebende Methode: Die linke Spalte schwebt nach links, die rechte Spalte schwebt nach rechts und die mittlere Spalte wird platziert last

3. Absolute Positionierungsmethode: Die linke und rechte Spalte übernehmen die absolute Positionierung und sind auf der linken bzw. rechten Seite der Seite fixiert Margin Werte. 4.flex TabelleLayout

28.Doctype-FunktionDokumenttyp deklarieren

Javascript-bezogen1. Was sind die grundlegenden Datentypen von Js

String String Numerischer Wert Number Boolean boolean null undefiniert

Object Array

2. Wie man Ajax verwendet Eine vollständige AJAX-Anfrage umfasst fünf Schritte:

Create

XMLHTTPRequest Das Objekt

verwendet die Methode

open
, um eine

http-Anfrage zu erstellen Legen Sie die Anforderungsadresse fest xhr. open(get/post , url

, async

, true (asynchron), false

Um die gesendeten Daten festzulegen, verwenden Sie send
Register event (set event for ajax)

Erhalten Sie die Antwort und aktualisieren Sie die Seite 3. Wie man beurteilt, ob es sich bei einem Datenwert um NaN handelt

NaN keine Zahl Aber verwenden Sie typeof, um die numbertype

zu erkennen. Verwenden Sie die Definition von NaN Verwenden Sie typeof, um Bestimmen Sie, ob es vom Typ Number ist, und bestimmen Sie, ob es isnan
erfüllt, indem Sie NaN verwenden. Es ist das einzige Merkmal, das keinem von sich selbst gleich ist n!用 == n
Object.is ()
Methode bereitgestellt in =ES6
(Bestimmen Sie, ob die beiden Werte gleich sind) n == nan 4. Der Unterschied zwischen null und undefiniert in Js
Gleicher Punkt: Bei der Beurteilung mit

werden beide in

false

Differenz: number

Der konvertierte Wert Anders

Nummer

(

null) ist 0 und Zahl(undefiniert) wird dargestellt durch NaNNull Ein Wert ist definiert, aber dieser Wert ist ein Nullwert

Undefiniert Variable deklariert, aber keinem Wert zugewiesen

5. Was ist ein Abschluss? Was sind die Merkmale? Welche Auswirkungen wird es auf die Seite haben?

Schließung kann einfach verstanden werden als: eine Funktion, die innerhalb einer Funktion definiert ist. Ein Abschluss wird gebildet, wenn eine der inneren Funktionen außerhalb der äußeren Funktion aufgerufen wird, die sie enthält.

Eigenschaften:

Funktion verschachtelte Funktionen.

Externe Parameter und Variablen können innerhalb der Funktion referenziert werden.
Parameter und Variablen werden vom Garbage-Collection-Mechanismus nicht recycelt
.
Verwenden Sie:

, um die Variablen innerhalb der Funktion zu lesen;

Die Werte dieser Variablen bleiben immer im Speicher und werden nach der äußeren Funktion nicht automatisch gelöscht heißt.
Vorteile:

Variablen verbleiben lange im Speicher;

Vermeiden Sie die Verschmutzung globaler Variablen;
Vorhandensein privater Mitglieder
；
Nachteile: Verursacht Speicherlecks
6 Häufige Speicherlecks in Js:

Unerwartete globale Variablen

Vergessene Timer oder Rückruffunktionen
Referenz von
DOM
Schließung

7. Was ist Eventdelegation? So ermitteln Sie die Ereignisquelle (Event.target Wer auch immer sie aufruft, ist die Ereignisquelle)

JSHohe Ebene: Die Ereignisdelegation besteht darin, Ereignisblasen zu verwenden und nur einen Zeithandler zu entwickeln, um alle Ereignisse eines bestimmten Ereignisses zu verwalten Typ .

Die Ereignisdelegation, auch Ereignis-Proxy genannt, ist eine sehr häufig verwendete Technik zum Binden von Ereignissen in js. Die Ereignisdelegation besteht darin, das Antwortereignis, das ursprünglich an das untergeordnete Element gebunden werden muss, an das übergeordnete Element zu delegieren. Die Funktion der Ereignisüberwachung, das Prinzip der Ereignisdelegation, ist das Ereignis-Bubbling von DOM-Elementen

Nachdem ein Ereignis ausgelöst wurde, wird es zwischen dem untergeordneten Element und dem übergeordneten Element weitergegeben. Diese Weitergabe ist in drei Phasen unterteilt:

Erfassungsphase (durchgeführt vom window-Objekt). Knoten (von außen) nach innen), diese Phase reagiert nicht auf Ereignisse), Zielphase (ausgelöst auf dem Zielknoten), Blasenphase (durchgeführt vom Zielknoten zurück zum Fenster-Objekt (von innen nach außerhalb)), Ereignisdelegation /Der Ereignis-Proxy verwendet den Ereignis-Bubbling-Mechanismus, um die Ereignisse, auf die die innere Schicht reagieren muss, an die äußere Schicht zu binden

9 Der Unterschied zwischen lokalem Speicher und Cookies

Cookie bedeutet Cookie. Wie der Name schon sagt, ist Cookie tatsächlich sehr klein, seine Größe ist auf etwa 4 KB begrenzt. Sein Hauptzweck besteht darin, Anmeldeinformationen zu speichern. Wenn Sie sich beispielsweise bei einem bestimmten Website-Markt anmelden, können Sie „Passwort merken“ sehen. Dies dient normalerweise dazu, die Identität des Benutzers durch Speichern eines Abschnitts zu identifizieren in den Cookie Daten zu erreichen. localStorage

localStorage

ist eine neu hinzugefügte Technologie im HTML5

Standard. Es ist keine epochale Neuheit. Bereits in der

IE 6 -Ära gab es etwas namens userData , das für die lokale Speicherung verwendet wurde. Unter Berücksichtigung der Browserkompatibilität war damals die Verwendung von Flash eine allgemeinere Lösung. Heutzutage wird „localStorage“ von den meisten Browsern unterstützt. Wenn Ihre Website „IE6+“ unterstützen muss, ist die Verwendung von „userData“ als Lösung eine gute Wahl. sessionStoragesessionStorage hat eine ähnliche Schnittstelle wie localStorage , aber der Lebenszyklus der Datenspeicherung unterscheidet sich von localStorage . Studenten, die Back-End-Entwicklung durchgeführt haben, sollten wissen, dass die Bedeutung des Wortes

Sitzung

wörtlich mit „

Sitzung

“ übersetzt wird. Und sessionStorage ist ein Front-End-Konzept. Es kann nur einen Teil der Daten in der aktuellen Sitzung speichern und die Daten sind weiterhin vorhanden, wenn die Seite aktualisiert wird. Wenn die Seite jedoch geschlossen wird, werden die Daten im sessionStorage gelöscht. Die Gemeinsamkeiten und Unterschiede zwischen den dreien

Funktionen	Cookie	localStorage	sessionStorage
Datenlebensdauer	wird im Allgemeinen vom Server generiert und die Ablaufzeit kann festgelegt werden. Wenn ein Cookie auf der Browserseite generiert wird, läuft es nach dem Schließen des Browsers standardmäßig ab	Sofern es nicht gelöscht wird, wird es dauerhaft gespeichert	Nur in der aktuellen Sitzung gültig, Schließen Sie die Seite oder den Browser. Nach dem Löschen
Die Speicherdatengröße	4Kca.	beträgt im Allgemeinen 5 MB
Kommunizieren mit Serverseite	wird jedes Mal im HTTP-Header übertragen. Wenn Sie Cookie verwenden, um zu viele Daten zu speichern, führt dies zu Leistungsproblemen	Nur gespeichert im Client (d. h. Browser), nimmt nicht an der Kommunikation mit dem Server teil
Benutzerfreundlichkeit	Der Programmierer muss es selbst kapseln, die ursprüngliche CookieSchnittstelle ist nicht freundlich	Quelle Die Rohschnittstelle kann akzeptieren. Sie können sie auch erneut kapseln, um eine bessere Unterstützung für Object und Array

zu erhalten

10.ES6 neue Funktionen

const und let, Vorlagenzeichenfolgen, Pfeilfunktionen, Standardwerte für Funktionsparameter, Objekt- und Array-Destrukturierung, for...of und for...in, Klassen in ES6

11. Der Unterschied zwischen Let, var und const

Var Die deklarierten Variablen werden auf window gemountet, während die von let und const deklarierten Variablen dies nicht tun. Es gibt eine Variablenförderung Für Variablen, die von

Var deklariert werden, gibt es keine Variablenförderung für let und const

unter demselben Geltungsbereich var mit demselben deklariert werden Namensvariablen, let und const, können nicht

Let und const Deklarationen bilden den Bereich auf Blockebene

Let vorübergehende Totzone

Const Einmal deklariert, muss null als Platzhalter verwendet werden. Wenn Sie zusammengesetzte Typdaten deklarieren, können Sie die Attribute ändern Beschreiben Sie kurz die Array-Methoden. Push(). Fügen Sie Elemente von hinten hinzu. Der Rückgabewert ist die Länge des hinzugefügten Arrays Sei eins, der Rückgabewert ist das gelöschte Element

arr.shift()

Elemente von vorne löschen und kann nur ein Element löschen.

Elemente von vorne hinzufügen und der Rückgabewert ist die Länge des Arrays nach dem Hinzufügen

arr.splice(i,n)

Löschen Sie das Element ab i (Indexwert). Der Rückgabewert ist das gelöschte Element

arr.concat()

Der Rückgabewert ist das neue Array nach der Verkettung

str.split()

Konvertieren Sie den String in ein Array

arr. sort()

Sortieren Sie das Array und der Rückgabewert ist das sortierte Array. Standardmäßig wird nach der Zahl ganz links sortiert, nicht nach der Größe der Zahl , der Rückgabewert ist das umgekehrte Array

arr.slice(start,end)

Schneiden Sie das Array vom Anfang des Indexwerts bis zum Ende des Indexwerts, mit Ausnahme des Werts des Endindex, der Rückgabewert ist das ausgeschnittene Array

arr.forEach(callback)

Durchlaufen des Arrays, keine Rückgabe Auch wenn eine Rückgabe erfolgt, wird kein Wert zurückgegeben und dies wirkt sich auf das ursprüngliche Array aus

arr.map(callback)

Map Array (Array durchqueren), mit return wird ein neues Array zurückgegeben.

arr.filter(callback)

Filtern Sie das Array und geben Sie ein Array zurück, das die Anforderungen erfüllt

13. Wie man Schlüssel-Wert-Paare in Json hinzufügt/löscht

14 ist objektorientiert

Objektorientiert ist eine Idee, die auf prozessorientiert basiert. Das heißt, objektorientiert besteht darin, Funktionen durch Objekte zu realisieren und die Objekte bestimmte Details implementieren zu lassen Im Vordergrund steht dabei eine Optimierung der Daten, die die Bedienung komfortabler macht und den Prozess vereinfacht.

Js selbst hat keinen class-Typ, aber jede Funktion hat ein prototype-Attribut, prototype zeigt auf ein Objekt, und wenn die Funktion als Konstruktor dient, Prototyp spielt eine ähnliche Rolle wie Klasse

Objektorientiert hat drei Merkmale: Kapselung (Verbergen der Eigenschaften und Implementierungsdetails des Objekts, Bereitstellung des öffentlichen Zugriffs auf die Außenwelt),

Vererbung (Verbesserung der Wiederverwendbarkeit des Codes, Vererbung ist die Voraussetzung für Polymorphismus), Polymorphismus (von einer übergeordneten Klasse oder Schnittstelle definierte Referenzvariablen können auf Instanzobjekte von Unterklassen oder bestimmten Implementierungsklassen verweisen)

15. Der Unterschied zwischen gewöhnlichen Funktionen und Konstruktoren

Der Konstruktor ist ebenfalls eine gewöhnliche Funktion. Er wird auf die gleiche Weise wie eine gewöhnliche Funktion erstellt, jedoch wird der erste Buchstabe des Konstruktors üblicherweise großgeschrieben , ein neues Objekt wird innerhalb des Konstruktors erstellt, der eine Instanz ist. Gewöhnliche Funktionen erstellen keine neuen Objekte Eine gewöhnliche Funktion zeigt auf das Objekt der aufrufenden Funktion (wenn kein Objekt aufgerufen wird, ist der Standardwert
)Der Standardrückgabewert des Konstruktors ist das erstellte Objekt (d. h. die Instanz). , der Rückgabewert einer gewöhnlichen Funktion wird durch die
-Anweisung
der Funktionsname des Konstruktors ist derselbe wie der Klassenname*****16. Bitte beschreiben Sie kurz die Prototyp-/Prototyp-Vererbung*****Was ist ein Prototyp: Jede Objektinstanz hat einen Prototyp, auch Prototypobjekt genannt. Dieses Prototypobjekt zeigt auf seinen Konstruktor aus der integrierten Eigenschaft des Objekts _proto_ Das Objekt, auf das der Prototyp zeigt, dh jedes Objekt wird von einem Konstruktor erstellt, aber nicht jedes Objekt verfügt über einen Prototyp, sondern nur Methoden über Prototypen.
Die Grundidee der Prototypenkette besteht darin, mithilfe von Prototypen einem Referenztyp die Eigenschaften und Methoden eines anderen Referenztyps erben zu lassen. Wir wissen, dass jeder Konstruktor ein Prototypobjekt hat, jedes Prototypobjekt einen Zeiger auf den Konstruktor hat und die Instanz einen internen Zeiger auf das Prototypobjekt enthält. Der Kern der Prototypkette ist der Zeiger des
des abhängigen Objekts. Wenn das Attribut selbst nicht existiert, wird der Konstruktor zum Erstellen des Objekts Schicht für Schicht extrahiert, bis er Object
erreicht

_Proto_, auf das hingewiesen wird.

_proto_

im Wesentlichen nach Prototyp

sucht, müssen wir nur den Prototyp

des Konstruktors in dieser Kette finden. Object.prototype hat kein _proto_-Attribut, es ist == null.

Jeder Konstruktor verfügt über ein Prototypobjekt. Das Prototypobjekt enthält einen Zeiger auf den Konstruktor und die Instanz enthält einen Zeiger auf das Innere des Prototypobjekts. Wir machen das Prototypobjekt (1) gleich der Instanz eines anderen Prototypobjekts (2),

Zu diesem Zeitpunkt enthält das Prototypobjekt (2) einen Zeiger auf das Prototypobjekt (1),

Lassen Sie die Instanz des Prototypobjekt (2) Es entspricht dem Prototypobjekt (3). Dieser schichtweise Verlauf bildet eine Kette von Instanzen und Prototypen. Dies ist das Konzept der Prototypkette. Jeder Konstruktor verfügt über ein Prototypobjekt Das Prototypobjekt enthält einen Zeiger auf den Konstruktor ( Konstruktor) und Instanzobjekte enthalten einen internen Zeiger auf das Prototypobjekt (__proto__). Wenn ein Prototypobjekt einer Instanz eines anderen Prototypobjekts entspricht, enthält das Prototypobjekt einen Zeiger auf einen anderen Prototyp (__proto__) und der andere Prototyp enthält auch einen Zeiger auf einen anderen Konstruktor (Konstruktor). Wenn ein anderer Prototyp eine Instanz eines anderen Typs ist, bildet dies eine Kette von Instanzen und Prototypen. Auch Prototypkette genannt

Prototypvererbung

ist eine Vererbungsmethode in js. Prototypkette ist die Hauptmethode zur Implementierung der Vererbung,Die Grundidee besteht darin, Prototypen zu verwenden, um einem Referenztyp die Eigenschaften eines anderen erben zu lassen Referenztyp und Methode , Prototypische Vererbung:

Mit der Funktion, dass Mitglieder im Prototyp von mit ihnen verbundenen Objekten gemeinsam genutzt werden können

, kann eine Vererbung erreicht werden, die als prototypische Vererbung bezeichnet wird.

17. Verständnis von Versprechen

Was ist

Versprechen? Welches Problem lösen wir mit Promise? Wir alle wissen, dass Promise Versprechen bedeutet, ein Versprechen, dass man nach einer gewissen Zeit ein Ergebnis erzielen wird.

Promise

ist eine Lösung für die asynchrone Programmierung, die sinnvoller und leistungsfähiger ist als Rückruffunktion und Ereignis. Syntaktisch gesehen ist

promise

ein Objekt, von dem Nachrichten asynchroner Operationen abgerufen werden können; 2.

promise

hat drei Zustände: pending Der Anfangszustand wird auch Wartezustand genannt, erfüllt Erfolgsstatus, abgelehntFehlerstatus; sobald sich der Status ändert, ändert er sich nicht mehr. Nachdem eine Promise-Instanz erstellt wurde, wird diese sofort ausgeführt. 3. Zwei Merkmale von Promise und kann jederzeit abgerufen werden. Daher ist der Zustand irreversibel. , kann nicht auf halbem Weg abgebrochen werden

Wenn die Rückruffunktion nicht eingestellt ist, wird der intern in

Promise ausgegebene Fehler nicht nach außen reflektiert

3)Wenn er in ausstehend

ist ( Warten) Zustand, es ist unmöglich zu wissen, in welcher Phase sich der aktuelle Fortschritt befindet, ja gerade erst begonnen oder kurz vor dem Abschluss

Versprechen wird verwendet, um zwei Probleme zu lösen:1

Rückruf Hölle, Der Code ist schwer zu pflegen, oft ist die Ausgabe der ersten Funktion die zweite Funktion. Dieses Eingabephänomen 2.promise

kann mehrere gleichzeitige Anforderungen unterstützen und Daten in gleichzeitigen Anforderungen abrufen

Dieses Versprechen kann das asynchrone Problem lösen Problem. Man kann nicht sagen, dass Versprechen an sich asynchron sind

19. Bitte beschreiben Sie kurz die Verwendung von Async. Async ist der syntaktische Zucker von Generation und Versprechen

Generator

's* Ersetzen Sie durch async, ersetzen Sie yiled durch await Sie müssen ein async vor der Funktion hinzufügen und ein warte vor der asynchronen Betriebsmethode, was bedeutet: Warten Sie einfach einen Moment und fahren Sie nach der Ausführung fort. Hinweis: await kann nur in der Funktion async

ausgeführt werden, andernfalls wird ein Fehler gemeldet

Versprechen Wenn ein falsches Ergebnis zurückgegeben wird, wenn nicht, wird bei der Ausnahmebehandlung ein Fehler gemeldet, sodass Sie try..catch verwenden können, um die Ausnahme abzufangen 20.. Was passiert in der Prozess von der Eingabe der URL bis zum Abschluss des Seitenladens und der Anzeige auf einer Seite? ist in 4 Schritte unterteilt: 1.

Beim Senden einer URL-Anfrage

, Unabhängig davon, ob es sich bei der URL um die URL der Webseite oder die URL jeder Ressource auf der Webseite handelt, öffnet der Browser eine Thread, um diese Anfrage zu verarbeiten und gleichzeitig eine DNS-Abfrage auf dem Remote-DNS-Server zu initiieren. Dadurch erhält der Browser die der Anfrage entsprechende IP-Adresse. 2. Der Browser und der Remote-Webserver verhandeln über den TCP-Drei-Wege-Handshake

, um eine TCP/IP-Verbindung

herzustellen. Der Handshake umfasst

eine Synchronisierungsnachricht, eine Synchronisierungs-Antwortnachricht und eine Antwortnachricht.

Diese drei Nachrichten werden zwischen dem Browser und dem Server weitergeleitet. Bei diesem Handshake versucht der Client zunächst, eine Kommunikation herzustellen, dann antwortet der Server und akzeptiert die Anfrage des Clients, und schließlich sendet der Client eine Nachricht, dass die Anfrage angenommen wurde.

3. Sobald die TCP/IP-Verbindung hergestellt ist, sendet der Browser über die Verbindung eine HTTP-GET-Anfrage an den Remote-Server. Der Remote-Server findet die Ressource und gibt sie mit einer HTTP-Antwort zurück

4. An diesem Punkt stellt der Webserver den Ressourcendienst bereit und der Client beginnt mit dem Herunterladen der Ressource. jQueryVerwandtes Wissen

CSS-Vorverarbeitung Was ist Sass weniger? Warum sie verwenden

Sass

und less

sind beide

css Präprozessoren, die eine Abstraktionsschicht auf

css

sind, einer speziellen Syntax, die schließlich kompiliert wird css

less ist eine dynamische Stilsprache, die css die Funktionen dynamischer Sprachen wie Variablen, Vererbung und Verschachtelung verleiht. Less kann auf dem Client oder auf dem Server ausgeführt werden (erfordert die Hilfe von node)Der Unterschied zwischen .call() und .apply() in Jsapply : Rufen Sie eine Methode eines Objekts auf, um das aktuelle Objekt durch ein anderes Objekt zu ersetzen. Aufruf: Rufen Sie eine Methode eines Objekts auf, um das aktuelle Objekt durch ein anderes Objekt zu ersetzen.

Wie aus der Definition hervorgeht, sind Aufruf und Anwenden beide Methoden zum Aufrufen eines Objekts und zum Ersetzen des aktuellen Objekts durch ein anderes Objekt. Der Unterschied besteht darin, dass die übergebenen Parameter höchstens zwei Parameter haben können – ein neues this-Objekt und ein Array argArray. Wenn arg kein Array ist, wird ein Fehler gemeldet durch zwei Methoden Der Effekt ist genau der gleiche. Die Funktion von „Call“ und „Apply“ besteht darin, die Methoden anderer Leute zum Aufrufen auszuleihen, genau wie das Aufrufen Ihrer eigenen /Bitte beschreiben Sie kurz die gleiche Ursprungsstrategie

Ursachen für domänenübergreifende Probleme: Im Front-End- und Back-End-Trennmodus sind die Domänennamen des Front- und Back-Ends inkonsistent und kreuz- Es kommt zu Problemen beim Domänenzugriff. Wenn wir während des Anforderungsprozesses die Daten zurückerhalten möchten, handelt es sich normalerweise um eine Post/Get-Anfrage, sodass ... domänenübergreifende Probleme auftreten

Domänenübergreifende Probleme entstehen durch die Same-Origin-Richtlinie von JavaScript , nur Protokoll + Hostname + Portnummer (falls vorhanden) sind gleich, gegenseitiger Zugriff ist zulässig. Mit anderen Worten: JavaScript kann nur auf Ressourcen in seiner eigenen Domäne zugreifen und diese betreiben, nicht jedoch auf Ressourcen in anderen Domänen zugreifen und diese betreiben. Die Same-Origin-Richtlinie ist eine bekannte Sicherheitsrichtlinie, die von NetScape vorgeschlagen wird. Der sogenannte gleiche Ursprung bezieht sich auf dasselbe Protokoll, denselben Domänennamen und denselben Port. Aus Sicherheitsgründen lässt der Browser nur die Schnittstelleninteraktion unter diesem Domänennamen zu. Client-Skripte aus verschiedenen Quellen können die Ressourcen der anderen Partei nicht ohne explizite Autorisierung lesen oder schreiben.

Bitte geben Sie drei Möglichkeiten aus, um die Ladezeit der Seite zu verkürzen

Bilder optimieren

Auswahl des Bildformats (GIF: weniger Farben verfügbar, in einigen Farbpaaren verfügbar) Weniger anspruchsvoll

CSS optimieren (CSS komprimieren und zusammenführen, z. B. margin-top, margin-left...)

4. Fügen Sie einen Schrägstrich nach der URL hinzu (z. B. www. Das Verzeichnis campr.com/ bestimmt, um welchen Dateityp oder welches Verzeichnis es sich bei diesem Verzeichnis handelt Gleichzeitig muss der Browser bei der Berechnung der Größe die Seite ständig anpassen. Dies wirkt sich nicht nur auf die Geschwindigkeit aus, sondern wirkt sich auch auf das Surferlebnis aus.

Nachdem der Browser die Parameter für Höhe und Breite kennt Auch wenn das Bild vorübergehend nicht angezeigt werden kann, wird es nicht auf der Seite angezeigt. Dadurch wird Speicherplatz für Bilder frei und der folgende Inhalt wird weiterhin geladen, sodass die Ladezeit schneller und das Surferlebnis besser ist)

6. HTTP-Anfragen reduzieren (Dateien zusammenführen, Bilder zusammenführen)

Dies zeigt auf

In JavaScript verweist dies normalerweise auf die Funktion selbst, die wir ausführen, oder auf das Objekt, auf das die Funktion verweist gehört.

global this → zeigt auf this im Fenster

Objekt → zeigt auf sich selbst

this im Ereignis → zeigt auf das Ereignisobjekt

Was ist JSONP und wie funktioniert es? Warum ist es kein echtes Ajax

Jsonp

ist eigentlich eine domänenübergreifende Lösung?

Eine domänenübergreifende Anforderung von Daten ist nicht zulässig, eine domänenübergreifende Anforderung von js für ein js-Skript ist jedoch möglich

So können Sie die anzufordernden

Daten in eine js-Anweisung kapseln und einen Methodenaufruf durchführen.

Sie können dieses Skript erhalten, indem Sie ein JS-Skript domänenübergreifend anfordern. Das js-Skript wird sofort nach dem Abrufen ausgeführt.

Sie können Daten als Parameter an die Methode übergeben. Sie können die Daten erhalten. Dies löst domänenübergreifende Probleme.

jsonpPrinzip: (Dynamische Erstellung von Skript-Tags, Rückruffunktion)

In js-Anfragen ermöglicht der Browser src-domänenübergreifende Anfragen über Skript-Tags, die in angefordert werden können Fügen Sie dem Ergebnis den Namen der Rückrufmethode hinzu und definieren Sie die Methode auf der Anforderungsseite, um die Daten der domänenübergreifenden Anforderung abzurufen.

Warum ist es kein echtes Ajax?

1, diese beiden Technologien „sehen“ in der Aufrufmethode sehr ähnlich, und der Zweck ist der gleiche, sie fordern beide eine URL an und dann Geben Sie den Server zurück Die Daten werden verarbeitet, daher kapseln JQuery und Ext sowie andere Frameworks JSONP als eine Form von Ajax. Der Kern von Ajax besteht darin, den Inhalt dieser Seite über XmlHttpRequest abzurufen, während der Kern von JSONP darin besteht, das <script>-Tag dynamisch hinzuzufügen, um das vom Server bereitgestellte js-Skript aufzurufen. </script>

3Der Unterschied zwischen Ajax und JSONP besteht also nicht darin, ob es domänenübergreifend ist. Ajax kann auch domänenübergreifend über einen serverseitigen Proxy erreichen, und JSONP selbst schließt die Erfassung von Daten nicht aus in derselben Domäne.

Außerdem ist JSONP eine Methode oder ein nicht obligatorisches Protokoll, genau wie Ajax. Es muss nicht unbedingt im JSON-Format vorliegen, um Daten zu übertragen. Wenn Sie möchten, können Sie die Zeichen ändern Dies ist für die Bereitstellung öffentlicher Dienste durch JSONP nicht förderlich.

Bitte beherrschen Sie mehr als zwei Möglichkeiten, Duplikate aus Arrays zu entfernen.

Verwenden Sie die Methode

indexof

()

() Methode
und indexof Die Methode ist die gleiche
indexof
Treffer vom Kopf
lastindexof Treffer vom SchwanzES6s Satz Struktur Set Akzeptieren Sie keine doppelten Daten.
Verwenden Sie die Sortiermethode, um zuerst das ursprüngliche Array zu sortieren, und vergleichen Sie es dann mit dem angrenzenden. Wenn es anders ist, speichern Sie es im neuen Array. Verwenden Sie die filiter und
indexof
Methoden
Verwenden Sie
ES6 s set und Spread-Operator
Verwenden Sie
set und Array .from() Methode Ebenenschleife
mit der includes-Methode Was ist tiefe und flache Kopie und wie erreicht man sie? Tiefe Kopie: Zeigerzuweisung und Inhaltskopie,
Flache Kopie: nur einfache Zeigerzuweisung
Array-Flache Kopie: Wenn es sich um ein Array handelt, kann es mit einigen Methoden des Arrays implementiert werden: Slice(), Concat() gibt die Eigenschaften eines neuen Arrays zurück, um die Kopie zu implementieren. Verwenden Sie den Spread-Operator spread, um

Array Deep Copy: JSON.parse(JSON.stringify())Gilt nicht nur für Arrays, sondern auch für Objekte zu implementieren. Funktionen, undefinierte Funktionen und Symbole können nicht kopiert werden.

Warum js eine schwach typisierte Sprache ist

Im Vergleich zu stark typisierten Sprachen weist die schwach typisierte Sprachimplementierung viele Arten von Variablen auf, z. und jacascript hat nur einen Typ var Beim Zuweisen eines Werts zu einer Variablen wird der Typ automatisch ermittelt und konvertiert, es handelt sich also um eine schwach typisierte Sprache. So konvertieren Sie Less in CSS Automatisch generiert mit Webstorm
- echarts Welche werden am häufigsten verwendet? Diagramme und Diagrammkombinationen? Eigenschaften, Das heißt, welche Eigenschaften in der Prototypenkette werden einbezogen? Die Map-Methode erkennt keine leeren Arrays und hat keinen Einfluss auf das ursprüngliche Array Schreiben Es gibt drei Möglichkeiten, eine einfache Klasse mit Vererbung zu erstellen: mit
- Funktion
  und dieserSchlüsselwörter
Verwenden
Prototyp
und
Dieses Schlüsselwort
Prototypische Vererbung

Geliehene Konstruktorvererbung

Kombinierte Vererbung
Prototypische Vererbung

Parasitäre Vererbung
- Parasitäre kombinierte VererbungSynchronisation Der Unterschied zwischen asynchroner und Blockieren/der Unterschied zwischen Blockieren und Nicht-Blockieren
- Asynchron (Nicht-Blockieren) Zum Beispiel: Synchronisation, wir arbeiten zusammen, bis zum Abendessen. Jetzt , ich werde dich zum gemeinsamen Essen rufen, also werde ich einfach da sitzen und warten, bis du deine Arbeit erledigt hast, bevor wir zusammen essen gehen, du bist sehr beschäftigt, also werde ich gehen und esse zuerst alleine und gehe dann essen, wenn du fertig bist
  
  Synchron (blockierend) Asynchron (nicht blockierend) Diese beiden konzentrieren sich auf den Status des Programms, während auf das Ergebnis des Aufrufs gewartet wird
  
  Was sind Redraw und Reflow?
  
  Reflow: wann RenderbaumEin Teil oder alles davon muss aufgrund von Änderungen in der Größe, dem Layout, dem Ausblenden usw. neu erstellt werden. Dies wird als Reflow bezeichnet. Jede Seite muss neu erstellt werden Es muss mindestens einmal ein Reflow durchgeführt werden, der sich auf der Seite befindet. Beim einmaligen Laden wird es zu diesem Zeitpunkt definitiv zu einem Reflow kommen, da der Render-Baum erstellt werden muss
  
  Während des Reflows macht der Browser den betroffenen Teil ungültig Erstellen Sie den Rendering-Baum und rekonstruieren Sie diesen Teil des Rendering-Baums. Nach Abschluss des Reflows zeichnet der Browser den betroffenen Teil auf dem Bildschirm neu. Dies wird als Neuzeichnen bezeichnet ist http? Was sind die Merkmale von
  
  http heißt Hypertext Transfer Protocol, dem am weitesten verbreiteten Netzwerkprotokoll im Internet? Eigenschaften: Anforderungsbasierter - Antwortmodus
  Zustandsloses Speichern
  Keine Verbindung
  
  Der Unterschied zwischen HTTP-Protokoll und HTTPS
  
  http ist ein Hypertext-Übertragungsprotokoll, Informationen werden im Klartext übertragen, https ist eine sichere Verbindung Krypta Übertragungsprotokoll
  
  http
  und
  - https
    haben völlig unterschiedliche Verbindungsmethoden und unterschiedliche Ports, http ist 80, https
    ist
  - 443
    http Die Verbindung von ist sehr einfach und zustandslos. Das https-Protokoll ist ein Netzwerkprotokoll, das auf dem ssl+http-Protokoll basiert und eine verschlüsselte Übertragung und Identitätsauthentifizierung durchführen kann als das http-Protokoll
  - Der Unterschied zwischen Prototyp und Vererbung, Prototyp, Aufruf und Anwendung der Vererbung (der erste Parameter ist derselbe, was ist der Unterschied zwischen dem zweiten)
    apply( )empfängt zwei Parameter, einer ist der Bereich, in dem die Funktion ausgeführt wird (dies), und der andere ist das Parameterarray. Der erste Parameter der call()-Methode ist derselbe wie der apply()-Methode, die an die Funktion übergebenen Parameter müssen jedoch aufgelistet werden. Der Unterschied zwischen Pfeilfunktionen und gewöhnlichen Funktionen
  Die Pfeilfunktion ist eine anonyme Funktion und kann nicht als Konstruktor verwendet werden.
  neu
  Die Pfeilfunktion kann nicht verwendet werden gebunden sein
  Argumente, Verwenden Sie den Parameter
  rest
  , um das Problem zu lösen.
  - Die Pfeilfunktion hat kein Prototypattribut. Die Pfeilfunktion ist dies zeigt immer darauf sein Kontext ist
  - ,
  - Die Pfeilfunktion kann dieses nicht binden, sie erfasst den dieses-Wert des Kontexts, in dem sie sich befindet, als ihren eigenen dieses-Wert
  Was ist ein js-Speicherleck?
  
  Speicherverlust bedeutet, dass ein Teil des zugewiesenen Speichers nicht verwendet oder recycelt werden kann, bis der Browserprozess beendet ist.
  
  Methode zum Freigeben von Speicher: Weisen Sie den Wert null
  
  zu und Dateien der Website? Ressourcen optimieren?
  
  1, Dateizusammenführung (Zweck ist die Reduzierung von HTTP-Anfragen)
  
  2, Dateikomprimierung (Zweck ist die direkte Reduzierung der Größe von Dateidownloads)
  
  3, Verwendung von CDN um Ressourcen zu hosten
  
  4, Cache verwenden
  
  5, Gizp komprimieren Sie Ihre JS- und CSS-Dateien
  
  6, Meta-Tag-Optimierung (Titel, Beschreibung, Schlüsselwörter), Optimierung der Überschrift tag, alt Optimieren 7. Reverse-Links, Optimierung externer Links auf der Website
  
  Bitte beschreiben Sie kurz den Ausführungsprozess von AJAX und den gängigen HTTP-Statuscode
  
  100: Dieser Statuscode weist den Client an, fortzufahren Beim Senden der Anfrage wird diese temporäre temporäre temporäre Antwort verwendet, um den Client darüber zu informieren, dass ein Teil der Anfrage vom Server akzeptiert wurde. Der Client sollte jedoch weiterhin den verbleibenden Teil der Anfrage senden. Die Antwort wird ignoriert und der Server sendet eine endgültige Antwort an den Client, nachdem die Anfrage abgeschlossen ist. Ergebnis
  
  200: Dies ist der häufigste HTTP-Statuscode, der angibt, dass der Server die Anfrage erfolgreich angenommen hat gibt das vom Client angeforderte Endergebnis zurück
  
  202: Zeigt an, dass der Server die Anfrage akzeptiert hat, sie jedoch noch nicht verarbeitet wurde und es nicht sicher ist, ob diese Anfrage letztendlich verarbeitet wird 204
  
  : Der Server hat die Anfrage erfolgreich verarbeitet, aber keinen Entitätsinhalt zurückgegeben und gibt möglicherweise neue Header-Metainformationen zurück. 301
  
  : Die vom Client angeforderte Webseite wurde dauerhaft an einen neuen Speicherort verschoben . Wenn sich der Link ändert, wird ein 301-Code zurückgegeben, um dem Client die Linkänderung mitzuteilen und eine Anfrage an den neuen Link zu stellen Anfrage fehlgeschlagen, die vom Client angeforderte Ressource wurde nicht gefunden oder existiert nicht 500
  
  : Der Server ist auf einen unbekannten Fehler gestoßen, der dazu führt, dass die aktuelle Anfrage des Clients nicht abgeschlossen werden kann. 503
  
  : Der Server kann die aktuelle Anfrage aufgrund vorübergehender Serverüberlastung oder Wartung nicht verarbeiten. Der Unterschied zwischen Vorladen und Lazy Loading: Wann ist der richtige Zeitpunkt für das Vorladen, bevor die Seite geladen wird? Ressourcen werden im Voraus heruntergeladen und bei späterer Verwendung aus dem Cache aufgerufen. Beim verzögerten Laden wird gewartet, bis die Bedingungen entsprechend bestimmten Bedingungen oder Anforderungen erfüllt sind, bevor die entsprechenden Ressourcen geladen werden. Der Hauptunterschied besteht darin, dass man sie lädt früh und der andere lädt langsam oder gar nicht. Lazy Loading kann den Druck auf das Server-Front-End bis zu einem gewissen Grad verringern, während das Vorladen den Druck auf das Server-Front-End erhöht
  
  .
  Jquery
  Was sind die Selektoren
  
  1. Basisselektor
  
  Der Basisselektor ist der am häufigsten verwendete und einfachste Selektor in jQuery. Er findet DOM-Elemente anhand der ID, der Klasse und des Tag-Namens des Elements.
  
  1, ID-Selektor #id
  Beschreibung: Passt ein Element basierend auf der angegebenen ID an, gibt ein einzelnes Element zurück (Hinweis: Auf der Webseite kann der ID-Name nicht wiederholt werden)
  Beispiel: $(" #test") Wählen Sie das Element mit der ID
  
  2, Klassenselektor .class
  Beschreibung: Ordnen Sie Elemente basierend auf dem angegebenen Klassennamen zu und geben Sie den Elementsatz zurück
  Beispiel: $(" .test ") Wählen Sie alle Elemente mit der Klasse test
  
  3, Elementauswahlelement
  Beschreibung: Ordnen Sie Elemente entsprechend dem angegebenen Elementnamen zu und geben Sie den Elementsatz zurück
  Beispiel: $("p") Alle
  -Elemente auswählen
  
  4, *
  Beschreibung: Alle Elemente abgleichen und den Elementsatz zurückgeben
  Beispiel: $("*") wählt alle Elemente aus
  
  5 , selector1, selector2,..., selectorN
  Beschreibung: Füge die von jedem Selektor übereinstimmenden Elemente zusammen, gib sie zusammen zurück und gebe den zusammengeführten Elementsatz zurück
  Beispiel: $("p,span,p.myClass") Wählt alle Elemente der Tags
  , mit der Klasse myClass aus.
  
  1, Nachkommen-Selektor
  
  Beispiel: $("p span") wählt alle -Elemente aus (Hinweis: Der Nachkommen-Selektor wählt alle angegebenen Auswahlen des übergeordneten Elements aus Elemente, egal ob es sich um Kinder oder Enkel handelt)
  
  2, untergeordneter Selektor $("parent>child")
  Beispiel: $("p>span") wählt das
  
  -Element aus. Alle Elemente unter (Hinweis: Der untergeordnete Selektor wählt nur die untergeordneten Elemente aus, die direkt zum übergeordneten Element gehören)
  3
  , Geschwisterselektor $("prev+next")Beschreibung: Wählen Sie das unmittelbare nächste Element aus nachdem das vorherige Element den Elementsatz zurückgibt
  Beispiel: $(".one+p") wählt den nächsten
  
  mit Klasse eins als einen aus
  4, Peer-Selektor $ ("prev ~siblings")
  Beschreibung: Wählen Sie alle Geschwisterelemente nach dem vorherigen Element aus und geben Sie den Elementsatz zurück
  Beispiel: $("#two~p") Wählen Sie alle
  
  nach dem Element mit der ID zwei aus. Sammlung von Peers Elemente
  3. Filterauswahl
  
  1>
  
  -Element im p>-Element 2
  , :last Beschreibung: Wählen Sie das letzte Element aus und geben Sie ein einzelnes Element zurück
  Beispiel: $("p:last") wählt alle< ;p> ; Das letzte
  -Element im Element
  
  3
  , :not(selector)Beschreibung: Alle Elemente entfernen, die dem angegebenen Selektor entsprechen, und den Elementsatz zurückgeben
  Beispiel: $( "Eingabe: not(.myClass)") Wählt -Elemente aus, deren Klasse nicht myClass
  4
  , :even ist. Beschreibung: Wählt alle Elemente aus, deren Index eine gerade Zahl ist, der Index beginnt bei 0 und kehrt zurück die Elementmenge
  5
  , :odd
  Beschreibung: Wählen Sie alle Elemente aus, deren Index eine ungerade Zahl ist, der Index beginnt bei 0, geben Sie die Elementmenge 6
  , :eq(index) zurück
  Beschreibung: Wählen Sie den Index aus, der dem Element des Index entspricht. Der Index beginnt bei 0 und gibt ein einzelnes Element zurück. 7
  , :gt(index)
  Beschreibung: Wählt das Element aus, dessen Index größer als der Index ist , der Index beginnt bei 0, gibt den Elementsatz 8
  zurück, :lt(index)
  Beschreibung: Wählen Sie das Element aus, dessen Index kleiner als der Index ist, der Index beginnt bei 0 und geben Sie den Elementsatz zurück 9
  , :focus
  Beschreibung: Wählen Sie das Element aus, das derzeit den Fokus erhält 2>
  Inhaltsfilterung. Selektor
  1、:contains(text)
  Beschreibung : Elemente auswählen mit Textinhalt als Text und gibt eine Sammlung von Elementen zurück
  
  Beispiel: $("p:contains( 'I')") Elemente auswählen, die den Text "I" enthalten 2
  , :emptyBeschreibung: Wählen Sie leere Elemente aus, die keine untergeordneten Elemente oder Textelemente enthalten, und geben Sie eine Sammlung von Elementen zurück
  Beispiel: $( "p:empty") Wählt ein leeres
  ), das keine untergeordneten Elemente oder Textelemente enthält
  3
  , :has(selector)Beschreibung: Select Das Element, das das vom Selektor übereinstimmende Element enthält, gibt die Elementsammlung zurück
  Beispiel: $("p :has(p)") wählt das
  -Element aus, das das
  
  -Element enthält (
  
  )
  4
  , :parent Beschreibung: Wählen Sie Elemente aus, die untergeordnete Elemente oder Text enthalten, und geben Sie eine Sammlung von Elementen zurück. Beispiel: $("p:parent") wählt Elemente aus, die den Sichtbarkeitsfilter-Selektor enthalten.
  1
  , :hidden
  Beschreibung: Auswählen alle unsichtbaren Elemente und gibt den Elementsatz zurück2
  , :visible
  Beschreibung: Alle sichtbaren Elemente auswählen und den Elementsatz zurückgeben
  
  4>Attributfilterselektor (gibt Elementsammlung zurück)
  1, [Attribut]
  Beispiel: $("p[id]") wählt das p-Element mit dem id-Attribut aus
  2 、[attribute=value]
  Beispiel: $("input[name=text]") Wählen Sie das Eingabeelement mit dem Namensattribut gleich text aus
  3、[attribute!=value]
  Beispiel: $("input[name!=text]") Wählen Sie Eingabeelemente mit Namensattributen aus, die nicht gleich text
  4, [attribute^=value]
  sind. Beispiel: $("input[name ^=text ]") Wählen Sie Eingabeelemente mit Namensattributen aus, die mit Text beginnen
  5, [attribute$=value]
  Beispiel: $("input[name$=text]") Wählen Sie Eingabeelemente mit Namen aus Attribute, die mit Text enden Das Eingabeelement
  6, [Attribut*=Wert]
  Beispiel: $("input[name*=text]") wählt das Eingabeelement mit dem Namensattribut aus, das Text enthält
  7 , [ attribute~=value]
  Beispiel: $("input[class~=text]") Wählen Sie das Eingabeelement mit dem Klassenattribut aus, dessen durch Leerzeichen getrennter Wert Text enthält
  8, [attribute1 ][attribute2] [attributeN]
  Beschreibung: Mehrere Attributfilterselektoren kombinieren
  
  5>Objektattributfilterselektor bilden (gibt eine Sammlung von Elementen zurück)
  1, :enabled
  Beschreibung : Alle verfügbaren Elemente auswählen
  2, :deaktiviert
  Beschreibung: Alle nicht verfügbaren Elemente auswählen
  3, :markiert
  Beschreibung: Alle ausgewählten Elemente auswählen (Optionsfelder, Kontrollkästchen)
  Beispiel: $("input:checked") Wählt alle ausgewählten -Elemente aus
  4, :selected
  Beschreibung: Wählt alle ausgewählten Optionselemente aus (Dropdown-Liste)
  Beispiel: $ („select option:selected“) wählt alle ausgewählten Optionselemente aus.
  
  JQuery-Methode zum Einfügen von Knoten Tatsächlich wird bei Verwendung dieser Methode die reguläre $(A).append(B)-Operation umgekehrt, um A an B anzuhängen. )
  Alle passenden Elemente dem angegebenen Element voranstellen. Tatsächlich kehrt die Verwendung dieser Methode den regulären $(A).prepend(B)-Vorgang um, d. h. statt B vor A voranzustellen, wird A vor B vorangestellt.
  after()
  Fügen Sie Inhalt nach jedem übereinstimmenden Element ein
  insertAfter()
  Fügt alle passenden Elemente nach dem angegebenen Element ein. Tatsächlich kehrt die Verwendung dieser Methode die herkömmliche $(A).after(B)-Operation um, d. h. statt B nach A einzufügen, wird A nach B eingefügt
  before()
  Inhalt vor jedem passenden Element einfügen
  insertBefore() Fügt alle passenden Elemente vor dem angegebenen Element ein. Tatsächlich kehrt die Verwendung dieser Methode den herkömmlichen $(A).before(B)-Vorgang um, d. h. statt B vor A einzufügen, wird A vor B eingefügt Funktion Anti-Shake
  
  Funktionsdrosselung bedeutet, dass die Methode
  js
  nur einmal innerhalb eines bestimmten Zeitraums ausgeführt wird. Funktion Anti-Shake bedeutet, dass der Code bei häufiger Auslösung nur einmal ausgeführt wird, wenn genügend freie Zeit vorhanden ist.
  
  Funktionsdrosselung bedeutet die Deklaration einer Variablen als Flag, um aufzuzeichnen, ob der aktuelle Code ausgeführt wird . Wenn ja, brechen Sie die Ausführung dieser Methode direkt ab
  return
  , wenn sie inaktiv ist, lösen Sie die Ausführung der Methode normal aus Funktion Anti-Shake Benötigen Sie einen Verzögerungsmechanismus, um die Implementierung zu unterstützen, verzögern Sie die Ausführung des Codes, der ausgeführt werden muss Wenn die Methode mehrmals ausgeführt wird, verwenden Sie
  cleartimeout
  , um den zuletzt aufgezeichneten verzögerten Ausführungscode zu löschen, und starten Sie erneut. Wenn der Timer abgelaufen ist und keine Möglichkeit besteht, auf den Auslöser zuzugreifen, wird der Ausführungscode angezeigt Get unterscheidet sich von Post.
  
  Get URL
  
  , die Daten können in url, post Methode gesehen werden, Daten werden in
  
  HTML-Header platziert, um SicherheitsproblemeAbrufen eingereichte Daten kann nur maximal 1024Byte haben, Beitrag Keine Einschränkungen
  
  Was ist ein CSRF-Angriff
  
  Csrf (Cross-Site Request Forgery) Nachdem sich der Benutzer angemeldet hat Wenn der Angreifer auf die Zielwebsite gelangt, lockt er den Benutzer dazu, eine Angriffsseite zu besuchen, und nutzt die Zielwebsite, um den Benutzer anzugreifen. Vertrauen Sie ihm, verwenden Sie die Identität des Benutzers, um die Seite anzugreifen, und initiieren Sie eine gefälschte Benutzeroperationsanforderung an die Zielwebsite Erreichen Sie den Zweck des Angriffs Wenn eine flache Kopie auftritt, bedeutet dies normalerweise, dass eine Bekanntschaftsbeziehung vorliegt. Ein einfaches Beispiel: Bei der Implementierung eines Kombinationsmusters wird normalerweise eine tiefe Kopie implementiert Bei der Implementierung eines BeobachtermustersBeobachtermuster müssen Sie eine flache Kopie1 implementieren. Was ist der Kern von Vue?
  ist eine Reihe progressiver, inkrementeller Bottom-up-Entwicklung zum Erstellen von Benutzeroberflächen
  MVVM
  Framework,
  
  vue Der Kern konzentriert sich nur auf die Ansichtsebene,
  
  Kernidee:
  
  Datengesteuert (der Inhalt der Ansicht ändert sich, wenn sich die Daten ändern)
  
  Komponentisierung (kann die Wiederverwendbarkeit, Wartbarkeit und Testbarkeit des Codes erhöhen, die Entwicklungseffizienz verbessern, die Wiederverwendung erleichtern und eine hohe Kohäsion und geringe Kopplung widerspiegeln)
  
  2. Bitte beschreiben Sie kurz Ihr Verständnis von Vue. Verstehen Sie, dass
  
  Vue ist eine Reihe progressiver inkrementeller Bottom-up-Entwicklungen zum Erstellen von Benutzeroberflächen MVVM Framework. Der Kern besteht darin, sich auf die Ansichtsebene zu konzentrieren, vue Der Kern von ist in Um das Datenbindungsproblem zu lösen und groß angelegte Einzelseitenanwendungen und Komponentisierung zu entwickeln, vue ist die datengesteuerte Komponentisierung auch über die MVVM-Idee Hier ist die Idee von MVVM model view vm ist die Brücke zwischen v und m, wenn die Modellebenendaten geändert werden, VM Die Ebene wird in der Ansichtsebene erkannt und benachrichtigt die Ansichtsebene, um entsprechende Änderungen vorzunehmen fließt nach unten zur untergeordneten Komponente, jedes Mal, wenn die übergeordnete Komponente aktualisiert wird, werden alle
  
  prop der untergeordneten Komponente auf den neuesten Wert aktualisiert.
  
  Die Daten werden von der übergeordneten Komponente übergeben Es kann nur auf eine Art und Weise an die untergeordnete Komponente gebunden werden. Die von der übergeordneten Komponente übergebenen Daten können nicht direkt innerhalb der untergeordneten Komponente geändert werden 4. Was sind die häufig verwendeten Modifikatoren in Vue? Wird nach einer Änderung ausgelöst, der Wert ändert sich, wenn der Cursor das Eingabefeld verlässt.
  Den Anfang und das Ende des Benutzers automatisch filtern Eingaberaum
  Ereignismodifikator: .stop
  verhindert das Sprudeln von Klickereignissen, äquivalent zu
  event.stopPropagation()
  
  .prevent in nativen js Vorbeugen Die Ausführung voreingestellter Verhaltensweisen entspricht event.preventDefault().capture in nativem
  js
  . Verwenden Sie den Ereigniserfassungsmodus, wenn Sie einen Ereignis-Listener hinzufügen, d. h. wer auch immer über den Ereignismodifikator verfügt Trigger whoever .self löst nur Ereignisse innerhalb seines eigenen Bereichs aus, ausgenommen untergeordnete Elemente
  
  .once Nur einmal ausgeführt
  
  Tastaturmodifikator:
  
  .enter Enter-Taste .tab Tab-Taste .escReturn-Taste .space Leertaste
  
  .upUp-Taste linksBauen Sie links .rechtsrechte TasteSystemmodifikatoren:
  
  .ctrl .alt .shift .meta 5.v-Text mit Der Unterschied zwischen {
  
  { }} und v-html{{}}
  
  parst die Daten in einfachen Text und kann die Ausgabe nicht anzeigenhtmlv-html
  kann die Ausgabe rendern
  html V-Text
  parst die Daten in Klartext und kann kein echtes
  HTML ausgeben. Der Unterschied zu geschweiften Klammern besteht darin, dass die doppelten geschweiften Klammern beim Laden der Seite nicht angezeigt werden V-Text
  Befehl:
  Funktion: Bearbeiten Sie den Klartextinhalt in Webseitenelementen.
  {
  {}} ist eine andere Art, ihn zu schreiben V-Text
  und
  {{}}Unterschied: V-Text
  und
  { {}} ist äquivalent, {{}} wird als Vorlageninterpolation bezeichnet und v-text wird als Anweisung bezeichnet. Ein Unterschied besteht darin, dass beim Rendern großer Datenmengen möglicherweise die geschweiften Klammern angezeigt werden, die allgemein als Bildschirmblinken bezeichnet werden:
  
  6. Kann mehrere Methoden v-on binden
  
  Ja
  Wenn Sie Wenn Sie mehrere Ereignisse binden, können Sie Schlüssel-Wert-Paare verwenden
  Ereignistyp: Ereignisname Die Schlüsselfunktion der Schleife
  
  Schlüssel
  
  Die Existenz des Wertes gewährleistet Einzigartigkeit,
  Vue
  Bei der Ausführung wird der Knoten überprüft. Wenn kein key-Wert vorhanden ist, überprüft vue, ob hier ein dom-Knoten vorhanden ist. Dieser wird gelöscht Geben Sie den Inhalt ein und weisen Sie einen neuen Wert zu. Positionen tauschen oder löschen 8. Was ist ein berechnetes Attribut
  
  Berechnete Eigenschaften werden verwendet, um deklarativ zu beschreiben, dass ein Wert von anderen Werten abhängt. Wenn sich der Wert, von dem er abhängt, ändert, wird er aktualisiert. DOM
  
  Wenn Daten an eine berechnete Eigenschaft in einer Vorlage gebunden werden vue wird aktualisiert, wenn ein Wert, von dem es abhängt, dazu führt, dass sich die berechnete Eigenschaft ändert. ausgelöst bei ÄnderungSetter
  9. Vor- und Nachteile von Vue Single Page
  Single PagespaVorteile: Front-End- und Back-End-Trennung Gute Benutzererfahrung One Word Schnell
  Inhaltsänderungen erfordern kein Neuladen der gesamten Seite
  Nachteile: Nicht förderlich für
  SEO,
  Lange anfängliche Ladezeit (der Browser muss zu Beginn geladen werden
  HTML, CSS, JS , der gesamte Seiteninhalt ist in der Hauptseite enthalten) , die Seitenkomplexität hat zugenommen und die Navigation ist nicht verfügbar10 Was ist Vuex? Wie benutzt man? In diesem Szenario wird
  
  Vuex verwendet, ein Zustandsverwaltungsmuster, das speziell für vue.js-Anwendungen entwickelt wurde und durch die Erstellung eines zentralen Datenspeichers für alle Komponenten im Programm einfach zugänglich ist. vuex ist das Zustandsverwaltungstool von vue
  
  Vuex
  hat fünf Attribute Zustandsgetter Mutationen Aktionsmodule Staat Hier wird die Datenquelle gespeichert . Die data, die dem allgemeinen
  vue
  -Objekt entsprechen, reagieren auf die in state gespeicherten Daten. Wenn sich die
  state
  data ändern, ändern sich auch die diesen Daten entsprechenden Komponenten Verwenden Sie this.$store.state.xxx Aufrufe Getters , was den berechneten Eigenschaften von store entspricht, hauptsächlich zum Filtern von Daten in state , Verwenden von this .$store.getters.xxx Aufrufe
  
  Mutations Alle Methoden zur Verarbeitung der Datenlogik sind in mutations platziert. Verwenden Sie es, wenn ein Ereignis ausgelöst wird und Sie dies möchten Ändern Sie den StatusDaten Mutationen, rufen Sie mit this.$store.commit
  
  auf, fügen Sie einen Parameter zu dieser Methode hinzu, der die Nutzlast von Mutation ( ist Nutzlast)
  
  Aktionen Asynchrone Datenverarbeitung, aber durch Mutation Verwenden Sie this.$store.dispatch zum Auslösen, Aktionen unterstützt auch Nutzlast
  
  Szenarien verwenden: Status zwischen Komponenten, Anmeldestatus, zum Warenkorb hinzufügen, Musikwiedergabe
  
  VuexNutzungsprozess:
  
  Downloadvuex
  
  Erstellen Store unter src und index.js
  
  führt vue und vuex ein, verwendet vuex , um Instanzobjekte zu exportieren
  
  In main.js Einführung, Verwendung in der
  .vue
  -Datei
  
  11. Routensprungmethode in Vue (deklarativ/programmatisch)
  Es gibt zwei Arten von Routensprung in Vue
  , nämlich deklarativ und programmatisch verwendet js zum Springen, wird als programmatische Navigation bezeichnet
  this.$router.push
  () verwendet router-link zum Springen. Wird als deklarative
  Router-Ansicht
  - Routing-Ausgang , der Ort, an dem die Routing-Vorlage angezeigt wird
    Welche Rolle spielt das Attribut
    Name
  - in der Route?
    Verwenden Sie Name in
    Router-Link
  - , um zur entsprechenden Route zu navigieren Unterroute 12. Vue Cross-Domain-Lösung p
  verwenden http-proxy-middleware
  
  (Middleware zum Konfigurieren von Proxy-Servern)
  
  13. Bitte beschreiben Sie kurz den Lebenszyklus von VuevueDer Lebenszyklus istvue Instanzerstellung bis Instanzzerstörung. In diesem Zeitraum werden
  
  8 Hook-Funktionen aufgerufen. beforeCreate(Instanz erstellen)created
  
  (Erstellung abgeschlossen),
  
  beforeMount(Vorlage erstellen beginnen)
  
  montiert (Erstellung abgeschlossen),
  
  beforeUpdate (Update gestartet)
  
  updated (Update abgeschlossen),
  
  beforeDestroy ( Zerstörung begann)
  
  zerstört (Zerstörung abgeschlossen)
  
  14. Die Rolle des Vue-Lebenszyklus
  
  gibt Benutzern die Möglichkeit, ihren eigenen Code in verschiedenen Phasen hinzuzufügen
  
  15. Das DOM-Rendering wird innerhalb dieser Lebenszyklusphase abgeschlossen
  
  DOM-Rendering wurde im montierten Zyklus abgeschlossen Ankerpunkte, um den Wechsel abzuschließen. Die Seite wird nicht aktualisiert. Die offizielle Website empfiehlt die Verwendung von vue-router.js, um das Routing-Modul einzuführen, und zwar zur Definition von Routing-Komponenten um das Routing zu definieren, verwenden Sie component Route Ordnen Sie die Komponente zu, verwenden Sie
  name
  , um zur entsprechenden Route zu navigieren
  
  , um eine
  router
  -Instanz zu erstellen, übergeben Sie sie.
  route s Konfiguration
  - zum Erstellen und Mounten der Root-Instanz
  - Verwenden Sie
    Router-Link, um den Routensprung festzulegen17 Hash und Geschichte, kurz reden über
  - Hash
    Es gibt # in der Adressleiste des Modus , Verlauf existiert nicht, das Aktualisieren im
    Verlauf
  - -Modus führt zu
    404
    Situation, die Hintergrundwissen erfordert Konfiguration
  - Verwenden Sie JavaScript , um die
    -Hash-Zuweisung
  zu korrigieren und den
  -Hash-Wert
  der
  -URL zu ändern Hashchange Event zum Anhören für Änderungen im Hash-Wert Die wichtigsten APIs sind die folgenden beiden: history.pushState() und history.repalceState()
  . Diese beiden
  APIs können den Browserverlauf ohne Aktualisierung verwalten. Der einzige Unterschied besteht darin, dass Ersteres einen neuen historischen Datensatz hinzufügt, während Letzteres den aktuellen historischen Datensatz direkt ersetzt. 18. Es gibt zwei Möglichkeiten, Parameter im Vue-Routing zu übergeben: Parameter und Abfragemethoden und ihre Unterschiede
  Dynamisches Routing kann auch als Routenparameterübergabe bezeichnet werden. besteht darin, unterschiedliche Inhalte in derselben Komponente entsprechend unterschiedlicher Auswahl zu rendern.
  
  Verwendung: Abfrage Verwenden Sie Pfad zur Einführung, params wird mit name eingeleitet, und die von empfangenen Parameter sind ähnlich, nämlich this.$route.query.name und this.$route.params.name
  
  URL Display :params ähnelt post, query ähnelt get, was ein Sicherheitsproblem darstellt, params Die Übergabe von Werten ist relativ sicherer, Abfrage übergibt Parameter über URL, die Aktualisierungsseite ist immer noch da, paramsAktualisierungsseite ist weg
  
  19. Mehrere Möglichkeiten der Vue-Datenbindung
  
  1. Einseitige Bindung Doppelte Klammern {{}} htmlInnere Zeichenfolgenbindung
  
  2.v-bindbindinghtmlAttributbindung
  
  3. Zwei-Wege-Bindung m V-Modell4.
  
  Entsorgungsbindung v-ONCE hängt vom v-Modell20.vue hat eine globale Komponente registriert
  
  Vue.componnet
  
  ("Komponentenname"{Objekt Vorlage
  
  Inhalt der Komposition
  })21.Vue Routing Was sind die Haken Funktionen/Routenwächter?
  
  globale Wächter:
  
  beforeEach(to, from, next) und afterEach (bis , von)Route exklusiver Schutz:
  
  beforeEnterSchutz innerhalb der Komponente: Router betritt
  
  /Update/Vor dem Verlassen Eintreten/Aktualisieren/Verlassen 22. Wie richte ich dynamisches Routing in Vue ein? Welche Möglichkeiten gibt es? Wie erhalte ich die übergebenen Daten?
  
  Dynamisches Routing kann auch als Routenparameterübergabe bezeichnet werden:
  
  Dynamisches Routing bietet zwei Möglichkeiten zur Übergabe von Parametern: Abfrage (Query) und Prarams (Prrams).
  
  query wird mit path eingeleitet, params wird mit name eingeleitet, query wird mit this.$route.query eingeleitet. Name Parameter empfangen
  
  paramsVerwenden Sie this.$route.params.name, um Parameter zu erhalten
  
  23. Was sind die gemeinsamen Komponenten in Elementui? Bitte beschreiben Sie kurz, welche Sie häufig verwenden und welche Eigenschaften sie haben.
  
  ContainerLayout-Container
  
  Außencontainer
  
  Top-Bar-Container
  
  Sidebar-Container
  
  Hauptinhaltscontainer
  
  Bottom-Bar-Container
  
  Dropdown Dropdown-Menü
  
  Drop-Down-Button
  
  Tabelle Formular
  
  Tabs Tab-Seite
  
  Formular Formular
  
  Paginierung Paginierung
  
  Nachricht Nachricht
  
  24. So passen Sie Anweisungen in Vue an. cli
  25. Was sind die Anweisungen in Vue? bind
  : Eine oder mehrere Eigenschaften dynamisch binden
  v-model
  : Zwei-Wege-Bindung für Formularsteuerelemente oder Komponenten erstellen
  
  v-if v-else v-else-if
  Bedingtes Rendering
  v-show
  Wechseln Sie die
  Anzeige
  v-html des Elements.
  aktualisieren Sie den innerhtml
  
  v-text des Elements je nach dem wahren oder falschen Ausdruck. textcontent
  
  v-pre Den Kompilierungsprozess dieses Elements und seiner Unterelemente überspringen
  
  v-clock Diese Direktive bleibt auf dem Element, bis die zugehörige Instanz die Kompilierung beendet
  v-once
  Nur einmal rendern 26. Wie definiert Vue einen Filter
  
  过滤器本质就是一个有参数有返回值的方法
```
new Vue({
　　　　filters:{
　　　　　　myCurrency:function(myInput){
　　　　　　　　return 处理后的数据
　　　　　　}
　　　　}
})
```
  使用方法：
  {{表达式 | 过滤器}}
  
  过滤器高级用法：可以指定参数，告诉过滤器按照参数进行数据的过滤
  
  27.对vue 中keep-alive的理解
  
  概念：keep-alive是vue的内置组件，当它动态包裹组件时，会缓存不活动的组件实例，它自身不会渲染成一个DOM元素也不会出现在父组件链中
  
  作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间以及性能消耗，提高用户体验。
  
  生命周期函数：Activated在keep-alive组件激活时调用，deactivated在keep-alive组件停用时调用
  
  28.如何让组件中的css在当前组件生效
  
  在styled中加上scoped
  
  29.Vue生命周期一共几个阶段
  
  创建加载   更新   销毁
  
  Beforecreate创建前
  
  Created   创建后
  
  Beforemount   加载前
  
  Mounted 加载后
  
  Beforeupdate 更新前
  
  Updated 更新后
  
  Beforedestroy 销毁前
  
  Destroyed 销毁后
  
  页面第一次加载会触发 beforecreate created   beforemount   mounted
  
  DOM渲染在mounted周期中就已经完成
  
  30.Mvvm与mvc的区别
  
  Mvc模型视图控制器，视图是可以直接访问模型，所以，视图里面会包含模型信息，mvc关注的是模型不变，所以，在mvc中，模型不依赖视图，但是视图依赖模型
  
  Mvvm 模型视图和vm vm是作为模型和视图的桥梁，当模型层数据改变，vm会检测到并通知视图层进行相应的修改
  
  31.Warum sind die Daten in der Vue-Komponente eine Funktion? other
  
  Wenn es sich um einen Referenztyp (Objekt) handelt und mehrere Komponenten eine Datenquelle gemeinsam nutzen, ändern sich bei einer Datenänderung alle Komponentendaten. Verwenden Sie daher die Funktion, um über return eine Kopie des Objekts zurückzugeben , (neue Daten zurückgeben), sodass jede Instanz ihren eigenen Bereich hat und sich nicht gegenseitig beeinflusst.
  
  32. Das Prinzip der bidirektionalen Bindung von VueVuebidirektionale Bindung ist: Datenänderungen aktualisieren die Ansicht und Ansichtsänderungen aktualisieren die Daten
  
  Vue
  
  Daten bidirektional Die Bindung erfolgt durch Datenentführung Implementiert mit dem Observer-Muster,
  
  Datenentführung, object.definepropertyDer Zweck besteht darin: Wenn einer Eigenschaft ein Wert zugewiesen wird, kann das Programm diesen erkennen und die Änderung steuern des Eigenschaftswerts
  
  Beobachtermuster Wenn sich die Eigenschaften ändern, ändert sich auch der Ort, an dem die Daten verwendet werden33 So übergeben Sie Werte von Komponenten in Vue
  
  Weiterleiten: Weitergabe vom Elternteil an den Sohn Die übergeordnete Komponente wird an das Attribut gebunden und die Unterkomponente erhält sie über
  
  props
  
  Umgekehrt: vom Sohn an den Elternteil Daten). Die übergeordnete Komponente richtet ein zu empfangendes Listening-Ereignis ein und ruft dann die Daten ab Das Implementierungsprinzip des Rastersystems besteht darin, die Größe des Behälters zu definieren, ihn gleichmäßig in 12
  
  Teile aufzuteilen (24 Teile oder 32 Teile) und dann die Innen- und Außenseite anzupassen In Kombination mit Medienabfragen wird daraus ein leistungsstarkes, reaktionsfähiges Rastersystem.
  
  Zum Beispiel Zeile col-xs-4
  
  36 Was ist zu tun, wenn eine Komponente in mehreren Projekten verwendet wird? 37. Bitte beschreiben Sie kurz den Steckplatz. Er kann geteilt werden In diesen Punkten: Welche Inhalte können in der Kerbe (Slot) platziert werden? Wohin damit? Was macht es? Sie können beliebige Inhalte einfügen und in untergeordneten Komponenten verwenden, um die Vorlagendaten der untergeordneten Komponente normal in der übergeordneten Komponente anzuzeigen.
  
  Benannte Slots und anonyme Slots, Scope-Slots sind, um es klar auszudrücken, Attribute der Komponente, die innerhalb von Komponentenelementen verwendet werden können,
  
  Kann in übergeordneten Komponenten verwendet werdenSlot-Scope Get Daten von untergeordneten Komponenten 38. Bitte beschreiben Sie kurz WatchWatch
  
  dient dazu, die Änderung eines Werts zu überwachen und die Methode aufzurufen, die aufgrund der Änderung ausgeführt werden muss 39 Beschreiben Sie Vant Ui Download
  
  Leichtes und zuverlässiges mobiles Terminal
  
  Vue Komponentenbibliothek
  
  40. Der Unterschied zwischen berechneten Eigenschaften und Uhren
  
  Computed watch Die Differenz wird durch die Caching-Funktion berechnet. Wenn sich irrelevante Daten ändern, werden diese nicht neu berechnet und der Wert im Cache wird direkt verwendet. Berechnete Attribute werden verwendet, um deklarativ zu beschreiben, dass ein Wert von anderen Werten abhängt. Wenn sich der abhängige Wert oder die Variable ändert, ändern sich auch die berechneten Attribute.
  Watch
  wird überwacht, wenn die Variable in Daten definiert ist ändert sich, die Methode in watch wird ausgelöst41 Was ist das mvvm
  
  -Framework? Was ist der Unterschied zu anderen Frameworks (jquery)? Welche Szenarien sind geeignet? Der Unterschied zwischen Mvvm
  und anderen Frameworks besteht darin, dass
  vuedatengesteuert Ansichten über Daten anstelle von Knotenoperationen anzeigtfür Szenarien mit vielen Datenoperationen geeignet ist
  
  42. Der Grund, warum der erste Bildschirm von Vue langsam lädt, wie man es löst, wie man die Zeit des weißen Bildschirms erkennt, wie man das Problem des weißen Bildschirms löst
  
  Der Grund, warum der erste Bildschirm langsam lädt:
  
  Beim ersten Laden der Seite müssen viele Komponentendaten gerendert werden ;import("
  Routing-Adresse
  ")
  
  2.ui
  Bei Bedarf geladene Frames
  3.gzipKomprimierungZeit des weißen Bildschirms. Erkennung: ? ? ? ?
  
  Lösung für das Problem mit dem weißen Bildschirm:
  ①Verwenden Sie
  V-Text, um Daten zu rendern.
  
  ②Verwenden Sie die
  {
  {}}-Syntax zum Rendern Daten, sondern auch
  
  v verwenden - Die Cloak-Direktive (die früher auf dem Element verbleibt, bis das Ende der zugehörigen Instanz kompiliert ist), wo soll v-cloak
  
  platziert werden? v-cloak muss nicht hinzugefügt werden jedes Tag. Fügen Sie es einfach dem von el
  
  43 hinzugefügten Tag hinzu. Wenn sich die Daten auf einer Seite ändern, wie benachrichtigen Sie die andere Seite über die Änderung? Datenhijacking und Beobachtermodus VueDie bidirektionale Datenbindung wird durch Datenhijacking und Beobachtermuster, Datenhijacking, object.define implementiert Eigentum
  
  sein Zweck ist : Beim Zuweisen von Werten zu Eigenschaften Wenn das Programm dies erkennen kann, kann es den effektiven Bereich des Attributwerts steuern und die Werte anderer Attribute ändern
  
  Der Zweck des Beobachtermodus besteht darin, dass sich das Attribut ändert , ändert sich auch der Ort, an dem die Daten verwendet werden
  
  44.Vuex-Prozess
  
  Lösen Sie in der vue-Komponente Aktionen aus, um den Vorgang der Datenänderung über dispatch einzureichen, und lösen Sie dann über actionscommit aus Mutationenkommen Ändern Sie die Daten, mutations empfängt die Anfrage von commit und ändert automatisch den state durch mutate und löst schließlich jede Komponente, die ihn aufruft, durch store aus Update
  45. Wie fordert Vuex asynchrone Daten an? Eingerufen
  und abgekapselt axios
  
  anfordern, Daten asynchron empfangen, commit an mutations
  
  Mutations übergeben, um den Status in state zu ändern, wird von action geändert Erhalten von The Der Wert wird state46 zugewiesen. Wie unterwirft sich die Aktion in Vuex der Mutation? Instanz: Sie können
  
  context.commit aufrufen, um eine mutation einzureichen, oder state und getter über context.state
  
  und abrufen. context.getters
  
  47. Der Unterschied zwischen Route und Router und VueRouter Konstruktoren ter Instanzobjekt, dieses Objekt ist ein globales Objekt, das alle Routen und viele Schlüsselobjekte und Attribute enthält. 2.route ist ein Jump-Routing-Objekt. Jede Route verfügt über ein route-Objekt, das ein lokales Objekt ist und den entsprechenden Name, Pfad, Parameter, Abfrage Warten abrufen kann 49. Was ist die Statusfunktion von vuex? State ist der Ort, an dem die Datenquelle gespeichert ist
  Die Daten in State
  reagieren, wenn sich die Daten in
  state
  ändern, ändern sich auch die diesen Daten entsprechenden Komponenten
  State ordnet den globalen state und die Getter den berechneten Eigenschaften der aktuellen Komponente über mapstate
  
  50 zu. Was ist die Getter-Funktion von vuex?
  
  Getter kann Berechnungsoperationen für state durchführen, das ist die berechnete Eigenschaft von store
  
  Getter kann zwischen mehreren Komponenten wiederverwendet werden
  
  Nur wenn ein Staat Wird innerhalb einer Komponente verwendet, es ist nicht erforderlich, Getter
  
  51 zu verwenden. Was ist die Mutationsfunktion von vuex?
  
  Die einzige Möglichkeit, den Status im vuex Store zu ändern, besteht darin, Mutation einzureichen. Sie können den Status im store in der Rückruffunktion ändern
  
  52 Merkmal von Vuex ist?
  
  Action ähnelt mutation, der Unterschied besteht darin, dass action mutation übermittelt, was keine direkte Zustandsänderung ist und jede asynchrone Operation
  
  enthalten kann 54.vuex Vorteile
  
  Vorteile: Lösen Sie die Kommunikation von Nicht-Eltern-Kind-Komponenten, reduzieren Sie die Anzahl der ajax-Anfragen, einige können direkt vom state
  
  abgerufen werden. Nachteile: Aktualisieren Der Browser vuex Der Zustand in kehrt in den Ausgangszustand zurück. Die Lösung ist vuex-along, die mit berechneten Eigenschaften und sessionstorage kombiniert werden muss, um
  zu erreichen
  55. Vue Routing Lazy Loading (Routing muss geladen werden)
  
  56 v-for und v-if Priorität
  
  Verwenden Sie zunächst nicht v-if v-for auf demselben Element: v-for hat Vorrang vor v-if Wenn Sie jedes Mal das gesamte Array durchlaufen müssen, wirkt sich dies insbesondere dann aus, wenn Es muss ein kleiner Teil gerendert werden.
  
  v-for hat eine höhere Priorität als v-if
  Bitte notieren Sie 5 Komponenten von Ele.me
  
  Popup-Fenster el -alert> Konversation
  Kalender
  Fortschrittsartikel
  Traditionelles Ajax bezieht sich auf XMLHttpRequest (XHR), Die früheste Technologie zum Senden von Back-End-Anfragen, die zu den ursprünglichen js gehört im Kern XMLHttpRequest Objekt: Wenn zwischen mehreren Anforderungen eine Sequenzbeziehung besteht, kommt es zur Rückrufhölle. JQuery Ajax ist eine Kapselung des nativen XHR Kapselung, außer dass es so ist
  Die Implementierungsversion von
  Promise entspricht der neuesten ES-Spezifikation. fetch ist keine weitere Kapselung von ajax, sondern native js , ohne
  zu verwenden
  XMLHttpRequest Object. Ereignisverarbeitung reagieren --- Ändern Sie dies so, dass es auf Weg 1
  zeigt: Binden Sie es durch die Methode
  bind
  
  an Ort und Stelle und ändern Sie dadurch das zeigt auf Weg 2: durch Erstellen einer Pfeilfunktion
  
  Weg : in konstruieren oder zum Binden Ereignisse im Voraus definiert
  
  Methode4: Ändern Sie die Schreibweise von Ereignisaufrufen in die Form von PfeilfunktionenBitte beschreiben Sie kurz Ihr Verständnis von ReactReact
  
  origin Yu facebook, react ist eine js
  
  Bibliothek zum Erstellen von Benutzeroberflächen
  
  Features: Deklaratives Design : reagierenangenommen Paradigm -Erklärung, Entwickler müssen nur den Anzeigeinhalt deklarieren. , virtuelles dom
  
  ), minimieren Sie die Interaktion mit dom
  - Flexibel: reagieren kann gut mit bekannten Bibliotheken oder Frameworks zusammenarbeiten
  - Komponenten: Erstellen Sie Komponenten durch Reagieren, um die Wiederverwendung von Code zu erleichtern und Seitenfunktionen in kleine Module aufzuteilen. Jedes kleine Modul sind Komponenten
  - Einweg-Datenfluss : React ist ein Einweg-Datenfluss. Daten werden vom übergeordneten Knoten zum untergeordneten Knoten über props weitergeleitet das übergeordnete Element Wenn jedes props geändert wird, rendert react alle untergeordneten Knoten
  react-Komponenten neu. Für die Datenübertragung zwischen
  
  forward value transfer werden props verwendet
  
  Die umgekehrte Wertübertragung verwendet Funktionen zum Übertragen von Werten. Durchläuft Ereignisaufruffunktionen Daten werfen
  
  Verwenden Sie pubsub.subscribe
  (listened event, ()
  =){}
  ), um Daten zu empfangen
  über Komponenten übertragen U se Kontext Um context zu verwenden, müssen Sie die Methode
  createContext()
  verwenden. Diese Methode verfügt über zwei Objekte: Provider Producer Consumer Consumer Der Unterschied zwischen Vue und React. Gleiche Punkte: Beide unterstützen Server-Rendering Requisiten Parameter für übergeordnete und untergeordnete Komponentendaten übergeben, beide implementieren die Webkomponente-Spezifikation
  
  sind alle datengesteuerte Ansichten
  
  alle verfügen über Statusverwaltung,
  reagieren
  - hat
    redux
    ,
  - vue
    Ja vuex alle unterstützen native' Lösungen
    reagieren
  - hat
    react native vue
    hat
  - weex
    Unterschiede: reactNur für die
    view
  - -Schicht von
    mvc, vue ist mvvm Modus
  - virtualdom ist anders, vue verfolgt die Abhängigkeiten jeder Komponente und muss nicht den gesamten domKomponentenbaum neu rendern, und react ist es anders, wenn die Anwendung Wenn der Status geändert wird, werden alle Komponenten neu gerendert, sodass die Lebenszyklus-Hook-Funktion von shouldcomponentupdate in react zur Steuerung verwendet wird
  - Das Schreiben von Komponenten ist anders , react ist jsx und Inline-Stil , das heißt, html und css sind alle geschrieben. js, vue ist html, css , js in derselben Datei
  - Datenbindung ist unterschiedlich, vue bidirektionale Datenbindung, reagieren Der Datenfluss erfolgt in eine Richtung. Der
  - In react muss das state-Objekt den Status mit der setstate-Methode aktualisieren , state Das Objekt ist nicht erforderlich. Die Daten werden im vue-Objekt durch das Attribut data verwaltet. Bitte beschreiben Sie kurz den virtuellen Dom- und Diff-Algorithmus. Virtuell DOM, auch allgemein als virtueller Knoten bekannt, dient dazu, die Knoten in
  über das object
  
  -Objekt von js zu simulieren und sie dann in einen realen zu rendern DOM Knoten durch eine bestimmte Rendering-Methode. Häufige VorgängeDOM oder eine große Anzahl von Seitenneuzeichnungen und -umbrüchenDiffAlgorithmus: Zerlegen Sie die Baumstruktur nach Ebenen, vergleichen Sie nur Elemente derselben Ebene und geben Sie jedes Element an der Listenstruktur Fügen Sie für einen einfachen Vergleich einen eindeutigen
  
  Schlüssel-Wert zu jeder Einheit hinzu. React
  
  Nach dem Aufruf von setstate führt react das eingehende
  Parameterobjekt
  und den aktuellen Zustand der Komponente zusammen und löst so den
  Abgleichsprozess
  aus
  
  Während des Abstimmungsprozesses erstellt react den react-Elementbaum entsprechend dem neuen Status und rendert die gesamte UI-Schnittstelle neu. Nachdem Sie den Elementbaum erhalten haben, react berechnet automatisch die neuen Unterschiede zwischen alten Knoten, minimiert und rendert die Schnittstelle basierend auf den Unterschieden neu.
  
  reagieren DidMount Nach dem ersten Rendern wird
  
  componentWillReceiveProps Call
  
  shouldComponentUpdate aufgerufen, wenn die Komponente ein neues props entWillupdate
  
  component erhält html Angerufen, wenn ComponentDidupdate
  Wird sofort aufgerufen, nachdem die Aktualisierung der Komponente abgeschlossen ist.
  ComponentWillUnmount Wird aufgerufen, bevor die Komponente entfernt wird
  !
  dom Der Diff-Algorithmus vermeidet Unnötiges dom Operationen, wodurch die Leistung
  (
  Komponenten )
  Zustand
  (Zustand) und Eigenschaften
  (Requisiten)
  Was ist Unterschied zwischen Der Unterschied zwischen State und Props Props ist ein Parameter, der von außen an die Komponente übergeben wird. Seine Hauptfunktion besteht darin, Daten von der übergeordneten Komponente an die untergeordnete Komponente zu übergeben, aber props ist für seine Verwendung sehr nützlich Es ist für Komponenten schreibgeschützt und kann nicht mehr geändert werden. Neue Requisiten
  können nur aktiv über externe Komponenten übergeben werden, um die Unterkomponente neu zu rendern
  State Die Anzeigeform einer Komponente kann durch den Datenstatus und externe Parameter bestimmt werden. Die externen Parameter sind props, und der Datenstatus ist state. use this.stateLegt einen anfänglichen state für die Komponente fest, wenn sie zum ersten Mal gerendert wird. state unterscheidet sich von props ein wenig, Zustand kann über die this.setState()-Methode geändert werden Diese react Die Lebenszyklus-Hook-Funktion soll dieses Problem lösen:
  
  Verwenden Sie beim Aktualisieren der Daten setState, um die gesamten Daten zu ändern. Es ist gut, eine kleine Datenmenge und eine große Datenmenge zu haben wird die Leistung ernsthaft beeinträchtigen
  
  Lösung:1.shouldcomponentupdate
  
  Bestimmen Sie, ob die Komponente vor dem Rendern aktualisiert wurde, und rendern Sie sie dann nach der Aktualisierung2.purecomponent(Reine Komponente) Eliminiert den Prozess des Erzeugens und Vergleichens virtueller
  
  dom
  
  Verwendet in Klassenkomponenten3.react.memo()
  
  Ähnlich wie reine Komponenten Verwendet in zustandslosen Komponenten react diff. Prinzip Es basiert auf drei Strategien: Tree Diff Web UI diff
  
  Zwei Komponenten mit derselben Klasse erzeugen ähnliche Baumstrukturen, und zwei Komponenten mit unterschiedlichen Klassen erzeugen unterschiedliche Baumstrukturenelement diff
  
  Für eine Gruppe untergeordneter Knoten auf derselben Ebene können sie sein zeichnet sich durch eine eindeutige id
  
  Was ist eine kontrollierte Komponente aus? Elemente werden kontrollierte Komponenten genannt
  - Was ist der Zweck des Aufrufs von super(props)
    
    Super()? Nur mit super kann eine Komponente ihr eigenes haben this kann in der globalen Komponente this verwendet werden, wenn es nur constructor ist, ohne super auszuführen, dann ist this falsch, super erbt die übergeordnete Komponente. Die Art und Weise, Komponenten in diesem
    
    React
    
    Benutzerdefinierte Komponenten zu erstellen: Funktionskomponenten oder zustandslose Komponenten Der erste Buchstabe der Komponente wird groß geschrieben
    
    Klassenkomponente : Eine Klassenkomponente muss eine render-Methode implementieren. Diese Methode muss ein jsx-Element zurückgeben und ein äußeres Element verwenden, um den gesamten Inhalt zu umschließen.
    
    Bezogen auf Miniprogramme
    
    Vorteile von Miniprogrammen
    
    Kein Herunterladen und Installieren erforderlich, direkte Verwendung, hohe Laufgeschwindigkeit, schnelle Projekterstellung, kurz und prägnant, jeder AppQuellcode überschreitet nicht 2 MB
    
    The Seitenzusammensetzung des Applets (4 Dateien)
    
    Index.js index.json index.wxml index.wxss
    
    Der Lebenszyklus des Applets
    
    Onload onready onshow onhide onunload
    
    Onpulldown-Aktualisierung onreachbottom onshareappmessage
    
    Wie das Applet Daten anfordert
    
    Anfrage verwenden
    
    So verbessern Sie die Ladezeit des ersten Bildschirms des Miniprogramms
    
    Vorab anfordern: Bei der asynchronen Datenanforderung muss nicht auf die Datenanforderung gewartet werden Das Rendern der Seite ist abgeschlossen
    
    Cache nutzen: Verwenden Sie die Speicher-API für asynchrone Anforderungen. Beim zweiten Start werden die zwischengespeicherten Daten zuerst zum Rendern der Seite verwendet und dann der Hintergrund aktualisiert. Vermeiden Sie weiße Bildschirme: Zeigen Sie zuerst das Seitengerüst und den grundlegenden Inhalt an. Geben Sie rechtzeitig Feedback für interaktive Vorgänge, bei denen der Benutzer warten muss, um zu vermeiden, dass Benutzer denken, dass das Miniprogramm nicht reagiert. Leistungsoptimierung: Vermeiden Sie unsachgemäße Verwendung von
    setdata
    und
    onpagescroll
    Bitte beschreiben Sie kurz die Komponenten des Miniprogramms, die Sie häufig verwenden zwischen Wxss und CSS
    selector id'-Klasse Elemente usw.So implementieren Sie Reaktionsfähigkeit in Miniprogrammen Ihr eigener Server
    
    So zeigen Sie den Benutzer-Avatar und den Benutzernamen im Miniprogramm an
    
    Traditionelle Schnittstelle
    
    wx.getuserinfo Es ist derzeit verfügbar und erfordert eine Benutzerautorisierung. Bei der Verwendung dieser Methode werden offizielle Eingabeaufforderungen angezeigt muss aktualisiert werden
    
    Die neueste Methode:
    
    open-data
    
    Tag, verwenden Sie dieses Tag, um den Avatar und den Benutzernamen ohne Benutzerautorisierung direkt abzurufen
    
    Sie können
    
    opendata als schreiben Attribut im Button und schreibe ein Klickereignis. Ich habe es direkt bekommen
    
    Bitte sprechen Sie über die Gemeinsamkeiten und Unterschiede zwischen der bidirektionalen Bindung des Miniprogramms und vue
    ?
    Vue Die bidirektionale Bindung erfolgt durch Datenabfangen und Beobachtermodus, und der Wert wird durch this.value erhalten. Das Applet erfolgt durch Auslösen der Formularelementbindungsmethode mithilfe von
    
    this in die Methode .setData({key:value}), um den Wert zu erhalten
    
    So übergeben Sie Parameter im Applet und vueAnalogie-Einführung Lass uns reden über WeChat-Anpassungsprobleme von Miniprogrammen
    Welche Methoden gibt es zum Übertragen von Daten zwischen Miniprogrammseiten?
    
    Wie kapseln Sie die Datenanforderung des WeChat-Applets?Erzählen Sie mir etwas über das Anpassungsproblem des WeChat-Applets Springe? Zu anderen Miniprogrammen
    
    Wie löst man das langsame Laden von Miniprogrammen
    
    Was ist Typescript? Was sind die Vorteile von Typescript und Javascript? Der Unterschied zwischen Webpack und Gulp
    Bitte beschreiben Sie kurz den Unterschied zwischen Loadern und Plugins im Webpack.
    Was sind
    Loader
    ?
    Loader
    sind Dateilader, die Ressourcendateien laden und diese Dateien verarbeiten können, z. und schließlich in eine angegebene Datei gepackt. Was ist das Plugin?
    Unterschied: Der Loader wird zum Laden von Dateien verwendet. Webpack selbst kann nur js-Dateien laden (eingebauter babel-Loader) Sie müssen andere Dateien installieren. Der Loader, wie zum Beispiel: css-loader file-loader
    
    Plugin ist eine Erweiterung der Webpack-Funktion über das Plugin , Web Packkann erreicht werden Loader kann komplexe Funktionen nicht ausführen
    
    Wie kann die Seitenleistung verbessert werden? Welche Leistungsoptimierungen gibt es?
    
    Wofür wird Node verwendet? Kann es auf der Serverseite ausgeführt werden? Das Prinzip
    
    Webpack besteht darin, das Projekt als Ganzes zu behandeln abhängige Dateien im Projekt, beginnend mit dieser Hauptdatei, und verwenden Sie die
    loaders
    -Klasse zur Verarbeitung. Schließlich wird es in eine oder mehrere browsererkennbare js
    -Dateien
    Commonjs ES6-Modul gepackt Unterschied?
    
    commonDas Modul ist eine Kopie, der Wert kann geändert werden, es6Das Modul ist eine Referenz, schreibgeschützter Status, der Wert kann nicht geändert werdencommonjs
    Das Modul wird zur Laufzeit geladen.
    Das es6-Modul ist eine Ausgabeschnittstelle zur Kompilierungszeit Warum verwenden Sie immer noch den Vue Family Bucket für Ihr Projekt?
    Bitte beschreiben Sie sich kurz. Das im Projekt verwendete UI-Framework.
    - Je mehr Möglichkeiten zur Optimierung der Front-End-Leistung vorhanden sind, desto besser.
      Was ist CORS Ihr Verständnis von websockedWebsocked
      ist ein bidirektionales Kommunikationsprotokoll. Nach dem Verbindungsaufbau können sowohl der
    - websocked
      -Server aktiv Daten aneinander senden oder empfangen websocked erfordert einen Client und einen Server, die tcp ähneln, um eine Verbindung über einen Handshake herzustellen. Die Verbindung kann erst dann hergestellt werden, wenn die Verbindung erfolgreich ist.
    Die im Hintergrund übergebenen Daten sind
    
    Sprechen Sie über die Unterschiede zwischen
    
    Ajax
    
    ,
    
    fetch
    
    ,
    
    axios Projektprozess im Unternehmen
    
    1 .WEB-Frontend-Projekt Prozess ProjektbedarfsanalyseDieser Link wird vom Projektmanager vervollständigt. Der Projektmanager kommuniziert zunächst mit dem Kunden, um die Bedürfnisse des Kunden zu verstehen, und analysiert dann die Machbarkeit des Projekts erstellt ein Projektanforderungsdokument und übergibt es dem Designer zur Vervollständigung der weiteren Entwicklung. Seitengestaltung/Projektauswahl
    
    Dieser Link beinhaltet hauptsächlich die Beteiligung von UI-Designern. Die UI-Designer analysieren Dokumente basierend auf den Produktanforderungen und entwerfen den gesamten Kunststil, das Interaktionsdesign, die Schnittstellenstruktur, den Betriebsprozess usw. des Produkts. Verantwortlich für das Design und die Produktion verschiedener interaktiver Schnittstellen, Symbole, Logos, Schaltflächen und anderer verwandter Elemente im Projekt. Und stellen Sie sicher, dass Sie die Technologie
    
    Codierung
    
    verwenden. Dieser Teil wird von Programmierern implementiert. (Programmierer werden in WEB-Front-End-Entwicklungsingenieure und Back-End-Entwicklungsingenieure unterteilt. Front-End-Entwickler erledigen hauptsächlich die Seiten, die wir auf der Webseite sehen können, während das Back-End einige Verwaltungssysteme und Funktionsimplementierungen durchführt, die wir nicht ausführen können siehe.) Programmierer arbeiten an der Benutzeroberfläche gemäß dem Entwurf des Designers, der Codierung verwendet, um verschiedene Funktionen des gesamten Projekts abzuschließen.
    
    Testen
    
    Dieser Teil wird vom Programmtester durchgeführt. Programmtester testen hauptsächlich, um Fehler zu finden, die noch im Programm vorhanden sind. Tester müssen wiederholt Tests durchführen und die problematischen Testergebnisse an die Programmierer weitergeben. Wenn fast alle Fehlerbehebungen abgeschlossen sind, ist das Projekt fast bereit, online zu gehen.
    
    Wartung
    
    Die Programmwartung ist die letzte Phase des gesamten Projekts, aber auch die zeitaufwändigste und kostspieligste. Die Programmwartung umfasst nachfolgende Fehlerbehebungen und Programmversionsaktualisierungen nach dem Start des Programms.
    
    2. Ändern Sie den Schnittstellendomänennamen
    
    Das heißt, die während der Entwicklung aufgerufene Schnittstelle ist die Schnittstelle für Hintergrundtests. Nachdem das Projekt online geschaltet wurde, muss die angeforderte Schnittstelle durch den häufig verwendeten Online-Domänennamen ersetzt werden Tools
    
    Codeverwaltungsplattform: Github Code Cloud
    
    Anforderungsfreigabeplattform: DingTalk, ZenTao
    
    UI-Interaktionsplattform: Blue Lake
    
    Produktprototyp-Tool: axure
    
    Unternehmens-E-Mail: Alibaba Tencent Enterprise-E-Mail
    
    Backend-Sprache: Java PHP Python (Xi'an nicht viele)
    
    4. Der Unterschied zwischen der Entwicklung in großen Unternehmen und kleinen Unternehmen
    
    Große Outsourcing-Unternehmen sind prozessorientierter, haben mehr Personal, weniger Kommunikation und müssen das Projekt nach der Lieferung nicht selbst warten , und übernehmen Sie das Wasserfall-Entwicklungsmodell (hauptsächlich Dokument)
    
    Kleines Unternehmen: Es gibt wenige Leute, häufige Änderungen, einfache Kommunikation und agile Entwicklung (schnelle Version v1 starten und dann iterieren)
    
    5 Front- und Backend?
    
    Seltsame Frage
    Was verwenden Sie für die Backend-Entwicklung?
    
    Wie aktualisiere ich die Seite auf dem Handy?
    
    Projektinitialisierung und Bauprozess
    
    Auf was sind Sie bei dem Projekt stolz?
    
    Erzählen Sie mir von Ihren Mängeln
    
    Was ist Hot Deployment?
    
    Wie viele Benutzer gibt es?
    
    Wie rufe ich die Schnittstelle auf (wie kommuniziere ich mit dem Backend)? Online-Umgebung während der Entwicklung? Wie gehe ich damit um
    Weitere Kenntnisse zum Thema Programmierung finden Sie unter:
    Programmiervideo
    ! !

Das obige ist der detaillierte Inhalt vonEine vollständige Sammlung ausgewählter Fragen und Antworten zu Web-Frontend-Interviews im Jahr 2023 (Sammlung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So verwenden Sie Javascript, um Bilder automatisch umzuwandelnNächster Artikel：So verwenden Sie Javascript, um Bilder automatisch umzuwandeln

In Verbindung stehende Artikel

Mehr sehen

Eine vollständige Sammlung ausgewählter Fragen und Antworten zu Web-Frontend-Interviews im Jahr 2023 (Sammlung)

HTML, CSS-bezogen

css Präprozessoren, die eine Abstraktionsschicht auf

{{表达式 | 过滤器}}

Verwenden Sie beim Aktualisieren der Daten setState, um die gesamten Daten zu ändern. Es ist gut, eine kleine Datenmenge und eine große Datenmenge zu haben wird die Leistung ernsthaft beeinträchtigen

Für eine Gruppe untergeordneter Knoten auf derselben Ebene können sie sein zeichnet sich durch eine eindeutige id

Was ist der Zweck des Aufrufs von super(props)

React

Bezogen auf Miniprogramme

In Verbindung stehende Artikel