Une collection complète de questions et réponses d'entretien Web front-end sélectionnées en 2023 (Collection)

Cet article résume certaines questions d'entretien Web frontales sélectionnées qui méritent d'être collectées (avec réponses). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

HTML, CSS liés

---

1. Quels sont les formats d'image les plus couramment utilisés sur Internet

JPEG, GIF, PNG, Le plus populaire est le format jpeg, qui permet de compresser le fichier au minimum Fournit 11 niveaux de compression2 Veuillez décrire brièvement le modèle de boîte CSS

acss

La boîte peut être divisée en quatre parties de l'extérieur vers l'intérieur :

marge

(marge extérieure), bordure (bordure), padding (remplissage), contenu (contenu). Par défaut, les propriétés largeur et hauteur de la boîte sont simplement définies sur contenu (Contenu) largeur et hauteur, La largeur réelle de la boîte doit être : largeur du contenu+remplissage gauche et droit

+

Marges gauche et droite+Bordures gauche et droiteLa hauteur réelle de la boîte doit être : hauteur du contenu+Remplissage supérieur et inférieur

+

Marges supérieure et inférieure+Bordures supérieure et inférieure 3. Utilisation de balises vidéo/audioVidéo :

Attributs de la balise vidéo :

src

L'adresse de la vidéo à lire

largeur/hauteur

Définissez la largeur et la hauteur de la vidéo à lire, qui sont les mêmes que les attributs de largeur et de hauteur du img

tag

lecture automatique S'il faut jouer automatiquement

contrôles

S'il faut afficher la barre de contrôle

affiche

avant de jouer Image du stand affichée

boucle

S'il faut mettre en boucle le

perload

Le préchargement de la vidéo (cache) est en conflit avec la lecture automatique

Si le

autoplay est défini, l'attribut perload sera invalide. muet Mode silencieux

Audio : Les attributs audio sont similaires aux attributs vidéo, mais les attributs largeur et hauteur et affiche ne peut pas être utilisé

4. Quels sont les nouveaux contenus du HTML5 ?

Nouvelles balises sémantiques

Nouveaux types de formulaires

Éléments de formulaire

Attributs de formulaire

Événements de formulaire

Balises multimédias

5.Nouvelle sémantique Html5 tags Quels sont les avantages des

balises sémantiques : 1.Améliorer l'accessibilité 2.seo 3.Structure claire, facile à entretenir

En-têteEn-tête de page principalContenu principal de la page pied de pageBas de page

NavBarre de navigation à côtéBarre latérale articlecharge un morceau de contenu indépendant sur la page

Section équivaut à p figureCharger le contenu indépendant (texte au dessus de l'image) figcaption figuretitre de

Hgroup balise de combinaison de titre marque Mettre en surbrillance la boîte de dialogue l'étiquette de la boîte de dialogue de chargement (doit correspondre à ouvrir attribut)

IntégrerCharger la balise du plug-in vidéoCharger la vidéo audioCharger l'audio (formats pris en charge ogg, mp3, wav )

6. Nouvelles fonctionnalités de Css3

Bordure :

• border -radios Ajouter une bordure arrondie 

• border-shadow : Ajouter une ombre à la boîte (déplacement horizontal, déplacement vertical, rayon de flou, taille de l'ombre, couleur de l'ombre, insert(intérieur/ombre extérieure))

• border-image : Définir l'image de bordure

• border-image -source chemin vers l'image de bordure

• border-image-slice image bordure décalée vers l'intérieur

• border-image-width La largeur de la bordure de l'image

• border- image-outset La quantité de zone d'image de bordure au-delà de la frontière

• border-image-repeat Si la bordure de l'image est en mosaïque (répéteren mosaïque rondcouvert stretch stretch)

Fond :

• Taille de l'arrière-plan Taille de l'image d'arrière-plan

• Origine de l'arrière-plan Spécifie où l'attribut background-position est positionné par rapport à

• Background-clip Spécifie la zone de dessin de l'arrière-plan (padding-box, border-box, content- box)

Dégradé :

• Dégradé linéaire() Dégradé linéaire

• Dégradé radial() Dégradé radial

Effets de texte :

• Saut de mots : Définir comment couper les lignes

• Word-wrap : Autoriser le retour automatique à la ligne du contenu long

• Débordement de texte : Précisez ce qu'il faut faire lorsque le texte déborde de l'élément le contenant

• Text-shadow : Ombre du texte ( déplacement horizontal, déplacement vertical, rayon de flou, couleur de l'ombre)

Transformation :

• Transformer Appliquer à la transformation 2D3D, vous pouvez faire pivoter, redimensionner, déplacer, incliner les éléments

• Transform- origin peut changer la position de la transformation de l'élément, (changer l'axe xyz)

• Transform -style Spécifie comment les éléments imbriqués sont rendus dans l'espace tridimensionnel

2DMéthode de conversion :

• rotationrotation traduire( x, y) précise le déplacement de l'élément dans l'espace bidimensionnel échelle ( n) Définir la transformation de mise à l'échelle

3DMéthode de conversion :

• Perspective (n) est 3Dconverti traduire l'échelle de rotation

Transition :

• Transition-propriété Nom de la propriété de transition

• Transition-durée Le temps nécessaire pour terminer l'effet de transition

• Transition- fonction de synchronisation Spécifiez la vitesse de l'effet de transition

• Transition-délai Spécifiez quand démarrer l'effet de transition

Animation : animation

• Animation-nom est @keyframesNom de l'animation

• animation-durée Timer l'animation prend

• animation-timing-function Comment l'animation termine un cycle

• animation-delay Intervalle de délai avant le début de l'animation

• animation-iteration-count Nombre d'animation playbacks

• animation-direction S'il faut lire l'animation à l'envers à tour de rôle

7. Quels sont les moyens de dégager les flotteurs ? Veuillez nous indiquer les avantages de chaque

Réduction de la hauteur : Lorsque tous les éléments enfants flottent et que l'élément parent n'a pas de hauteur définie, l'élément parent apparaîtra .Effondrement élevé.

Effacer le mode flottant1 : Définir la hauteur de l'élément parent séparément

• Avantages : Rapide et simple, moins de code

• Inconvénients : Impossible de faire une mise en page réactive

Effacer le mode flottant2 : définition du parent débordement : caché ;zoom : 1 (compatible avec ie6)

• Avantages : simple et rapide, moins de code, haute compatibilité

• Inconvénients : les pièces excédentaires sont cachées , faites attention à

Effacer la méthode flottante 3 : Ajoutez une étiquette vide après l'élément flottant, clair:les deux;hauteur:0 ; Moins, compatibilité plus élevéeInconvénients : L'ajout de balises vides n'est pas propice à l'optimisation des pages

• Effacer le mode flottant

  4
•  : définition parent

  débordement

   :

auto

Avantages : Simple, moins de code, bonne compatibilitéInconvénients : La largeur et la hauteur internes dépassent le niveau parent Quand

p

• , une barre de défilement

  apparaîtra

Méthode flottante d'effacement5 : Méthode d'effacement universelle :

• Ajouter des pseudo-objets aux éléments réduits

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

• Avantages : Méthode d'écriture fixe, Haute compatibilité

• Inconvénients : beaucoup de code

8. Les valeurs des attributs de positionnement ​​sont : Quelle est la différence ?

Position a quatre valeurs d'attribut : relative absolue fixe statique

• RelatifPositionnement relatif Ne se détache pas du flux documentaire, positionné par rapport à lui-même

• Absolu Positionnement absolu, hors du flux documentaire Positionnement relatif au parent

• Fixe Positionnement fixe, hors du flux de documents Flux de documents, positionné par rapport à la fenêtre du navigateur

• Statique Par défaut, l'élément apparaît dans le flux normal

9. Comment centrer l'élément enfant dans l'élément parent

Horizontal centrage :

1 . La largeur des éléments enfants et parents est fixe et les éléments enfants sont définis sur marge  : auto, et les éléments enfants ne peuvent pas être définis pour flotter , sinon le centrage échouera

2.La largeur des éléments enfant et parent est fixe et l'élément parent est défini text-align:center , les éléments enfants définissent affichage : inline-block, et les éléments enfants ne peuvent pas définir le flottement, sinon le centrage échouera

Centrage horizontal et vertical :

• L'élément enfant est positionné de manière absolue par rapport à l'élément parent, et l'élément enfant est positionné de manière absolue par rapport à l'élément parent. Éléments haut, gauche défini 50%, éléments enfants marge-haut et marge-gauche moins la moitié de leur largeur et hauteur respectives

• L'élément enfant est positionné de manière absolue par rapport à l'élément parent. Le haut, le bas, la gauche et la droite de l'élément enfant sont tous 0, et puis définissez l'élément enfant marge:auto

• Paramètres de l'élément parent affichage :alignement vertical des cellules du tableau : milieu, réglage des sous-éléments marge : auto

• les éléments enfants sont relativement positionnés, les éléments enfants haut, gauche Les valeurs sont 50%, transformer : traduire ( >-50%, -50%)

• L'élément enfant est positionné de manière absolue par rapport à l'élément parent, l'élément enfant haut, gauche valeur Pour 50%, transformer : traduire( -50%,-50%)

• Le l'élément parent définit la boîte flexible,

affichage : flex ; justfy-content : centre align-item : centre ; justfy-content：center

10. et content-box

Content-box Modèle de boîte standardlargeurhors rembourrage etbordure

Bordure-boîte modèle de boîte bizarrelargeur comprend rembourrage et bordure

Élément centré verticalement

1.Définissez la hauteur de ligne de l'élément enfant pour qu'elle soit la même que celle de l'élément parent

2.Définissez l'élément enfant comme un bloc en ligne, ajoutez alignement vertical  : milieu

3. hauteur de l'élément, positionnement relatif de l'élément enfant, via transform:translateY(-50%)4.

Je ne connais pas la hauteur de l'élément parent, l'enfant a la même hauteur que l'élément parent, l'élément enfant haut : 50%, transformer : traduireY (-50%)5.

Créez un nœud caché pour que son la hauteur est la moitié de la hauteur restante6.

à l'élément parent afficher : table, élément enfant affichage : table-cell , alignement vertical : milieu7.

Ajouter un pseudo-élément à l'élément parent

8.boîte flexible, élément parentaffichage : flex, élément enfantalign-self:center

12. Comment faire en sorte que le navigateur Chrome affiche un texte inférieur à 12 pixels

Attribut privé Google initialement ajouté -webkit-text-size-adjust : aucun, maintenant -webkit-transform：scale()

13. sélecteurs ? , quels attributs peuvent être hérités et comment calculer la priorité ? Quelles sont les nouvelles pseudo-classes en Css3 ? 🎜>id

sélecteur de groupe, sélecteur de classe,

* sélecteur de caractères génériques, sélecteur de descendant

Css2 Sélecteur de pseudo-classe : a:link/visited/hover/activeCss3

sélectionnez Outil :

Espace > +

Sélecteur de frères et sœurs adjacents

~Universel sélection (Trouver tout ce qui suit)

Sélecteur de pseudo-classe de structure : Trouver le nombre de énième enfant（

n

)

Trouver le nième de typenième de type Rechercher uniquement de type uniquement de type

Sélecteur d'attribut : Rechercher [attr=value]

 : root Trouver l'élément racinehtml

tag : vide

Vérifiez la balise videSélecteur de pseudo-classe cible : (formulaire)

 : activé Rechercher des balises pouvant être utilisées

 :

• désactivé Rechercher les balises désactivées

 :

• coché Rechercher coché tags

Sélecteur de pseudo-éléments

• ::sélectionDéfinit la mise en surbrillance du contenu du texte sélectionné (ne peut être utilisé que pour la couleur d'arrière-plan et la couleur du texte)

Sélecteur de pseudo-classe négatif

non() Sélecteur de pseudo-classe de langue lang

(valeur)Priorité (poids) :

Sélecteur d'éléments1

sélecteur de pseudo-éléments1

classe sélecteur 10

Sélecteur de pseudo-classe10

Sélecteur d'attribut10

IdSélecteur100

Poids de style en ligne1000

Contient le poids du sélecteur est la somme des poids

. Le poids de style hérité est 0

Ces propriétés peuvent être hérité :

• CssLes propriétés héritées sont principalement des aspects textuels

• Tous les éléments héritent : visibilité et curseur

• bloc Les éléments de niveau peuvent hériter : text-indent et text-align

• éléments de liste Héritable : style-liste, type-style-liste, position-style-liste, list-style-image

• Les éléments en ligne sont héritables : espacement des lettres, espacement des mots, hauteur de la ligne, couleur, police, font-family, font-size

• Style de police, variante de police, poids de police , décoration de texte, transformation de texte, direction

• Espacement des lettres Espacement des paragraphes Hauteur de la ligne Couleur de la police Type de police Taille de la police Police Style Poids de la police Texte en petites majuscules Modification du texte Convertir le texte en différents éléments Direction du texte

14. Il y a beaucoup d'images dans la page Web qui se chargent très lentement. Comment pouvez-vous les optimiser ?

1.L'image est chargée paresseusement et un événement de barre de défilement est ajouté à la zone invisible de l'image pour déterminer la distance entre la position de l'image et le haut du navigateur et la page. Si le premier Le second, Xiaoyu, se charge en premier

2. En utilisant la technologie de préchargement d'image, les images précédentes et suivantes de l'image actuellement affichée sont téléchargés en premier

3.Utilisez csssprite ou svgsprite

15. Que sont les éléments en ligne/éléments de niveau bloc ?

Éléments en ligne : les éléments en ligne adjacents seront disposés sur la même ligne et n'occuperont pas de ligne exclusive Le réglage de la largeur et de la hauteur n'est pas valide span

Éléments au niveau du bloc : occuperont une ligne exclusive Vous pouvez définir des attributs tels que la largeur et la hauteurp

Éléments variables : déterminez si l'élément est un élément de bloc ou un élément en ligne en fonction de l'avertissement contextuel

Élément de niveau bloc : p h1-h6 hr p ul ol table adresse blockquote dir from menu

Éléments en ligne : a br I em img input select span sub sup u textarea

Éléments variables : bouton del iframe ins

16. Quelle est la différence entre le mode standard du navigateur et le mode bizarre ?

Mode standard : Le navigateur analyse et exécute le code selon la norme W3C

Mode étrange : le navigateur analyse et exécute le code selon sa propre manière. Étant donné que différents navigateurs analysent et exécutent le code différemment, cela est appelé mode étrange

Différence :

• En mode bizarre, le modèle de boîte est le modèle de boîte bizarre et en mode standard c'est le modèle de boîte standard

• Alignement vertical des éléments de l'image

  Pour les éléments en ligne et les éléments table-cell, en mode standard vertical- La valeur par défaut de l'attribut align est baseline, et en mode bizarre, la valeur de l'image dans le table cellule La valeur par défaut de la propriété vertical-align est bottom, donc là il y aura quelques pixels d'espace en bas de l'image

• police dans l'élément

  css dans fontLes attributs de peuvent être hérités en mode bizarre, pour l'élément table. , certains éléments de la police ne peuvent pas être hérités d'autres éléments encapsulés, notamment font-sizeAttribut

• Le taille de l'élément en ligne

  Standard En mode, les éléments en ligne non remplacés ne peuvent pas être personnalisés avec des majuscules. En mode bizarre, définition de la. la largeur et la hauteur de l'élément affecteront la taille de l'élément

• Pourcentage de hauteur de l'élément

  Lorsqu'un élément utilise le pourcentage de hauteur, en mode standard, la hauteur change en fonction du contenu, dans Weird Lost, le pourcentage est corrigé Appliquer

• Gestion des débordements d'éléments

  En mode standard, débordementLa valeur par défaut est visible En mode bizarre, ce débordement. sera traité comme une boîte étendue, qui est l'élément. La taille est déterminée par le contenu, le débordement ne sera pas recadré et le cadre de l'élément est automatiquement ajusté pour inclure le débordement. content

17. Quand la marge et le remplissage sont-ils utilisés

MargeMarge La distance entre une bordure et une autre bordure

Padding Padding La distance entre sa propre marge et son propre contenu

Utilisez marge lorsque vous devez ajouter de l'espace à l'extérieur de la bordure, et lorsque vous devez ajouter de l'espace à l'extérieur 🎜>Lors de l'ajout d'un espace à l'intérieur de la bordure, utilisez padding

18. Quels sont les attributs de mise en page de la boîte flexible ? les décrire brièvement ?

Flex-direction : Disposition des sous-éléments dans un conteneur flexible (disposition de l'axe principal)

Flex-wrap :Définissez s'il faut envelopper lorsque les éléments enfants de la boîte flexible dépassent le conteneur parent

Flex-flow : Ouiflex-direction et flex-wrap forme courte

Align-item : définissez l'élément de boîte flexible dans Align-content sur l'axe transversal

Align-content : définissez l'alignement des lignes

Justify-content : Définir l'alignement de l'élément de boîte flexible sur l'axe principal

19. Comment désactiver les étiquettes

Ajouter désactivé attribut

20.Principe de mise en page flexible

consiste à ajouter à l'attribut flex de la boîte parent pour contrôler la position et la disposition des sous-boîtes

21. La différence entre Px, rem et em

Px, unité de longueur absolue, pixelpx est par rapport à la résolution de l'écran du moniteur

em Unité de longueur relative, par rapport à la taille de la police du texte dans l'objet actuel

emLa valeur n'est pas fixe

em héritera de la taille de police de l'élément parent (la référence est celle de l'élément parent font-size)

Toutes les polices en em sont déterminées par rapport à la taille de l'élément parent

rem par rapport à html la font-size

1em=1rem=16px dans Ajouter font-size au corps : 62,5% De cette façon, c'est l'original pxLa valeur est divisée par 10 plus em pour obtenir le

22. Quelles sont les structures à trois couches des pages Web 🎜>Langage de balisage) Performances (

cssFeuille de style) Comportement (js)Veuillez décrire brièvement le enquête médiatique

La requête Media étend l'attribut media , consiste à définir différents style css pour atteindre des objectifs adaptatifs.

24.Inconvénients de Rem

Par exemple : nouveau site Web, plus l'écran d'un appareil mobile est petit, plus le texte sera petit si rem est utilisé. Cela rendra la lecture de l'article très difficile

25. N'oubliez pas quelques contenus de compatibilité courants dans la première étape

26. Méthode centrée verticale et horizontale

27. Méthode de disposition à trois colonnes avec milieu fixe adaptatif des deux côtés

1. marginMéthode des valeurs négatives : les colonnes de gauche et de droite flottent vers la gauche, et les colonnes de gauche et de droite utilisent des valeurs de marge négatives. La colonne du milieu est enveloppée par un élément flottant d'une largeur de 100%

2. auto-flottant méthode : colonne de gauche Flottez à gauche, faites flotter la colonne de droite et placez la colonne du milieu en dernier

3 Méthode de positionnement absolu : Les colonnes de gauche et de droite adoptent un positionnement absolu et sont fixés respectivement sur les côtés gauche et droit de la page. Sur le côté, utilisez les valeurs de marge gauche et droite pour répartir la distance entre la colonne du corps principal au milieu.

4.flex Largeur fixe gauche et droite Milieuflex : 1

5.Disposition en grille

6.tableau Mise en page

28. Fonction Doctype

Déclarer le type de document

Javascript

---

1. Quels sont les types de données de base de Js

StringString NuméroNombre Booléenbooléen null non défini Objet Tableau

2. Comment utiliser Ajax

Une requête AJAX complète comprend cinq étapes :

• Créer un objet XMLHTTPRequest

• en utilisant open crée une requête http et définit l'adresse de la requête

xhr.open

(get/post, url, async , true (asynchrone), false (synchrone)) utilisent souvent les trois premiers paramètres

• Définissez les données à envoyer, utilisez

  envoyer pour envoyer la demande

• pour enregistrer l'événement (donner

  ajaxDéfinir l'événement)

• Obtenir la réponse et mettre à jour la page

3. Comment juger si une donnée est NaN

NaN Pas un numéro Mais avec type de la détection est numéro Type

• Utilisez la définition de NaN Utilisez typeof détermine s'il est de type number et détermine s'il satisfait à isnan

• Utiliser NaN est la seule caractéristique qui n'est égale à aucune des siennes n ! ==n

• Profitez du fourni dans ES6 Object.is()méthode (déterminant si deux valeurs sont égales) n==nan

4. La différence entre null et indéfini dans Js est la même que

 : lors du jugement avec if, les deux seront convertis. à faux

Différences :

nombreLes valeurs converties sont différentes numéro (null) est 0 numéro (non défini) est NaN

Null signifie qu'une valeur est définie, mais cette valeur est nulle

Indéfini Variable déclarée mais non affectée

5. Qu'est-ce qu'une fermeture ? Quelles sont les caractéristiques ? Quel impact cela aura-t-il sur la page ?

La fermeture peut être simplement comprise comme : une fonction définie à l'intérieur d'une fonction. Une fermeture est formée lorsqu'une des fonctions internes est appelée en dehors de la fonction externe qui les contient.

Caractéristiques :

• Fonction fonction imbriquée.

• Les paramètres et variables externes peuvent être référencés à l'intérieur de la fonction.

• Les paramètres et variables ne seront pas recyclés par le mécanisme de collecte des ordures.

Utilisez :

• pour lire les variables à l'intérieur de la fonction

• Les valeurs de ces variables sont toujours conservées en mémoire et ne seront pas automatiquement effacées après l'appel de la fonction externe.

Avantages :

• Les variables résident longtemps en mémoire

• Éviter la pollution des variables globales;

• L'existence de membres privés ;

Inconvénients : Provoquera des fuites de mémoire

Fuites de mémoire courantes dans Js :

• Variable globale inattendue

• Minuteur ou fonction de rappel oublié

• Dissocier la référence du DOM

• Fermeture

7. Qu'est-ce que la délégation événementielle ? Comment déterminer la source de l'événement (Event.target Celui qui l'appelle est la source de l'événement)

JSÀ haut niveau : la délégation d'événement consiste à utiliser le bouillonnement d'événements et définir uniquement une heure. Les gestionnaires peuvent gérer tous les événements d'un certain type.

La délégation d'événements, appelée proxy d'événement, est une technique très courante pour lier des événements dans js. La délégation d'événements consiste à lier des événements à l'origine. doivent être liés. L'événement de réponse défini dans l'élément enfant est délégué à l'élément parent, permettant à l'élément parent d'assumer le rôle de surveillance des événements. Le principe de la délégation d'événements est que l'événement bouillonne du Élément DOM

8. Qu'est-ce que le bouillonnement d'événement ?

Après le déclenchement d'un événement, il sera propagé entre l'élément enfant et l'élément parent. Cette propagation est divisée en trois étapes,

Étape de capture (effectuée depuis l'objet

fenêtre vers le nœud cible (de l'extérieur vers l'intérieur), cette étape ne répondra à aucun événement), étape cible, (déclenchée sur le nœud cible ), l'étape de bouillonnement (effectuée du nœud cible vers l'objet fenêtre (de l'intérieur vers l'extérieur)), la délégation de l'événement / Le proxy d'événement consiste à utiliser le risque d'événement. Le mécanisme de bulle lie les événements auxquels la couche interne doit répondre à la couche externe

9 La différence entre le stockage local et les cookies

<.>Cookie

Cela signifie cookie. Comme son nom l'indique, le cookie est en effet très petit, et sa taille est limitée à environ 4 Ko. Son objectif principal est d'enregistrer les informations de connexion. Par exemple, lorsque vous vous connectez à un certain marché de sites Web, vous pouvez voir "Mémoriser le mot de passe". , ceci est généralement réalisé en stockant une donnée identifiant l'identité de l'utilisateur dans le Cookie .

localStorage

localStorage

est HTML5 La technologie nouvellement ajoutée à la norme n’est pas une nouveauté historique. À l'époque de IE 6 , il existait quelque chose appelé userData qui était utilisé pour le stockage local, et la compatibilité du navigateur était prise en compte lors de cette fois-là, une solution plus générale consiste à utiliser Flash. De nos jours, localStorage est pris en charge par la plupart des navigateurs. Si votre site Web doit prendre en charge IE6+, utilisez userData. est un bon choix comme solution.

sessionStorage

sessionStorage

et localStorage est similaire, mais le cycle de vie de la sauvegarde des données est différent de localStorage . Les étudiants qui ont fait du développement back-end doivent connaître la signification du mot Session La traduction littérale est " Session . " . Et sessionStorage est un concept frontal. Il ne peut enregistrer qu'une partie des données de la session en cours, et les données existeront toujours lorsque la page sera actualisée. Mais lorsque la page est fermée, les données de sessionStorage seront effacées. Les similitudes et les différences entre les trois

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

Nouvelles fonctionnalités de 10.ES6

const et let, chaînes de modèles, fonctions fléchées, valeurs par défaut des paramètres de fonction, déstructuration d'objets et de tableaux, pour...de et pour ...in, classes en ES6

11. La différence entre Let, var et const

VarLe les variables déclarées seront montées sur window, tandis que let et constIl y aura il n'y aura pas de promotion de variable pour les variables déclarées par

Var, let et constIl n'y a pas de promotion de variable

var peut être déclaré dans le même scope Les variables avec le même nom, let et const, ne peut pas être

Let Les déclarations et const formeront une portée au niveau du bloc

Letzone morte temporaire

Const doit se voir attribuer une valeur une fois déclaré. Vous ne pouvez pas utiliser null comme espace réservé. Il ne peut pas être modifié après la déclaration. Si la déclaration est une donnée de type composite, les attributs peuvent être modifiés

12 Veuillez décrire brièvement les méthodes de tableau

push() Ajouter depuis l'élément arrière, la valeur de retour est la longueur du tableau après avoir ajouté

arr.pop() Supprimer les éléments depuis l'arrière, il ne peut y en avoir qu'un, la valeur de retour est supprimée. L'élément

arr.shift() supprime l'élément du devant, et ne peut supprimer qu'un seul élément dont le retour la valeur est supprimée

arr.unshift() Ajouter des éléments depuis l'avant, la valeur de retour est la longueur du tableau ajouté

arr.splice(i,n) Supprimez l'élément à partir de i (valeur d'index). La valeur de retour est l'élément supprimé

arr.concat() La valeur de retour est le nouveau tableau après concaténation

str.split() Convertir la chaîne en tableau

arr.sort() Trier le tableau et renvoyer la valeur C'est un tableau trié. La valeur par défaut est de trier par le nombre le plus à gauche, et non par la taille du nombre

arr.reverse() Inverser le tableau, La valeur de retour est la tableau inversé

arr.slice(start,end) Coupez le tableau du début de la valeur d'index à la fin de la valeur d'index, à l'exclusion de la fin de l'index La valeur de Et il affectera le tableau d'origine

arr.map(callback) Map array (parcourir le tableau), return renvoie un nouveau tableau.

arr.filter(callback) Filtrer le tableau et renvoyer un tableau qui répond aux exigences

13. pour mettre à jour Json Ajouter/supprimer des paires clé-valeur 14. Veuillez décrire brièvement ce qu'est l'orientation objet

L'orientation objet est une idée basée sur l'orientation processus, c'est-à-dire que l'orientation objet consiste à réaliser des fonctions à travers des objets, à encapsuler des fonctions dans des objets et à laisser les objets réaliser des détails spécifiques. donner la priorité aux données. Il s'agit d'une optimisation des données, ce qui rend l'opération plus pratique et simplifie le processus.

Js lui-même n'a pas de type class, mais chaque fonction a un attribut prototype, prototype pointe vers un objet lorsque la fonction est utilisée comme constructeur, prototype est joué. le rôle Semblable au rôle de la classe

Orienté objet a trois caractéristiques : l'encapsulation (masquage des propriétés et des détails d'implémentation de l'objet , et fournir un accès public au monde extérieur) ),

Héritage (pour améliorer la réutilisabilité du code, l'héritage est une condition préalable au polymorphisme), polymorphisme (les variables de référence définies par les classes parentes ou les interfaces peuvent pointer vers des sous-classes ou des classes d'implémentation spécifiques Objet d'instance)

15. La différence entre les fonctions ordinaires et les constructeurs

• Le Le constructeur est aussi une fonction ordinaire, La méthode de création est la même que celle des fonctions ordinaires, mais il est d'usage que les constructeurs mettent en majuscule la première lettre

• . La méthode d'appel est différente. Les fonctions ordinaires sont appelées directement et les constructeurs utilisent le mot-clé new pour appeler

• Quand appelé, un nouvel objet sera créé à l'intérieur du constructeur, qui est une instance. Les fonctions ordinaires ne le font pas. Un nouvel objet sera créé

• this à l'intérieur du constructeur pointe vers l'instance, et this pointe vers l'objet appelant la fonction (si aucun objet n'est appelé, la valeur par défaut est window)

• La valeur de retour par défaut du constructeur est l'objet créé (c'est-à-dire l'instance ). La valeur de retour de la fonction ordinaire est déterminée par l'instruction

  return

• Le nom de la fonction. Le constructeur est le même que le nom de la classe

*****16 Veuillez décrire brièvement l'héritage prototype/chaîne de prototypes/(Prototype)****.

Qu'est-ce qu'un prototype :

Toute instance d'objet a un prototype, également appelé objet prototype. Ce prototype L'attribut intégré _proto_ de l'objet pointe vers. l'objet pointé par le prototype de son constructeur, c'est-à-dire que tout objet est créé par un constructeur, mais tous les objets n'ont pas de prototype, seules les méthodes ont des prototypes.

Qu'est-ce qu'une chaîne prototype ?

L'idée de base de la chaîne de prototypes est d'utiliser des prototypes pour permettre à un type de référence d'hériter des propriétés et des méthodes d'un autre type de référence.

Nous savons que chaque constructeur a un objet prototype, chaque objet prototype a un pointeur vers le constructeur et l'instance contient un pointeur interne vers l'objet prototype.

Le cœur de la chaîne de prototypes est le pointeur de

_proto_ de l'objet dépendant Lorsque l'attribut n'existe pas, l'objet est créé en couche par. layer constructeur, jusqu'à ce qu'il atteigne Object, il n'y a pas de _proto_ pointant vers lui.

Parce que

_proto_ recherche essentiellement un prototype, il suffit donc de chercher pour cette chaîne prototype sur le constructeur. Parmi eux, Object.prototype n'a pas d'attribut _proto_, il == null.

Chaque constructeur a un objet prototype, l'objet prototype contient un pointeur vers le constructeur et l'instance contient un pointeur vers l'objet prototype. Nous rendons l'objet prototype (1) égal à l'instance d'un autre objet prototype (2),

A ce moment, l'objet prototype (2) contiendra un pointeur vers l'objet prototype (1),

puis Laissez l'instance de l'objet prototype (2) égale l'objet prototype (3). Cette progression couche par couche forme une chaîne d'instances et de prototypes. C'est le concept de la chaîne prototype

Chaque constructeur a un objet prototype, l'objet prototype contient un pointeur vers le constructeur (constructeur) et l'objet instance contient un pointeur interne vers l'objet prototype (__proto__). Si un objet prototype est égal à une instance d'un autre objet prototype, l'objet prototype contiendra un pointeur vers un autre prototype (__proto__), et l'autre prototype contiendra également un pointeur vers un autre constructeur (constructeur). Si un autre prototype est une instance d'un autre type... cela forme une chaîne d'instances et de prototypes. Également appelé chaîne de prototypes

L'héritage prototype est un moyen d'héritage en js La chaîne de prototypes est la principale méthode pour implémenter l'héritage , L'idée de base est d'utiliser des prototypes pour laisser un type référence hériter des propriétés et méthodes d'un autre type référence , Héritage prototypique :

L'utilisation de membres dans le prototype peut être combiné avec d'autres objets associés partagent la fonctionnalité

et peuvent réaliser l'héritage. Cette façon d'implémenter l'héritage est appelée héritage prototypique

17. 1.

Qu'est-ce que la Promesse

 ? Quel problème utilisons-nous Promise pour résoudre ? Nous savons tous que Promesse signifie promesse, une promesse qu'elle vous donnera un résultat après un certain temps. Promise

est une solution de programmation asynchrone, qui est plus raisonnable et puissante que la

fonction de rappel

et événement. Syntaxiquement parlant, promise est un objet à partir duquel des messages d'opérations asynchrones peuvent être obtenus

2. promise ; a trois états

 : l'état initial en attente est également appelé

état d'attente, rempliétat de réussite, rejetéétat d'échec une fois l'état modifié, Cela ne changera plus. Une fois l'instance promise créée, elle sera exécutée immédiatement. 3. Deux caractéristiques de la Promesse1 Promesse

L'état de l'objet n'est pas affecté par le monde extérieur

2. Une fois le statut de la Promesse modifié, il ne changera plus. Vous pouvez obtenir ce résultat à tout moment. Le statut est irréversible ,

4. Trois des inconvénients de la promesse

1) Ne peut pas être annuléPromesse,

Une fois créée, elle sera exécutée immédiatement et ne pourra pas être annulée à mi-chemin

2) Si la fonction de rappel n'est pas définie, l'erreur générée en interne par Promesse ne sera pas reflétée à l'extérieur

3) lorsqu'il est en statut en attente (en attente), il est impossible de savoir à quelle étape en est la progression actuelle, si elle vient de commencer ou si elle est sur le point d'être terminé

la promesse est utilisée pour résoudre deux problèmes :
1
. Bon sang de rappel, le code est difficile à maintenir, souvent la première fonction La sortie est l'entrée de la deuxième fonction

2

.promise peut prendre en charge plusieurs requêtes simultanées et obtenir des données dans des requêtes simultanées

Cette promesse peut résoudre le problème asynchrone. On ne peut pas dire que la promesse est asynchrone

.

19. Veuillez décrire brièvement l'utilisation de la

Async est la génération et promise est du sucre syntaxique, async est le de générateur * est remplacé par async, et yiled est remplacé par attendre

Vous devez ajouter un async avant la fonction, et ajouter un mot-clé await avant la méthode de fonctionnement asynchrone, c'est-à-dire Attendez un instant puis continuez après l'exécution. Remarque : await ne peut être exécuté qu'en async. fonction, sinon une erreur sera signalée

PromesseSi un résultat incorrect est renvoyé et qu'aucune gestion d'exception n'est effectuée, une erreur sera signalée, utilisez donc try..catchAttrapez simplement l'exception

20.. Que se passe-t-il dans le processus depuis la saisie de l'URL jusqu'à la fin du chargement et de l'affichage de la page d'une page ?

est divisé en 4 étapes :

1 Lors de l'envoi d'une demande d'URL, que l'URL soit ou non l'URL d'une page Web. ou une page Web Pour chaque URL de ressource, le navigateur ouvrira un fil de discussion pour gérer la requête et lancera une requête DNS sur le serveur DNS distant. Cela permet au navigateur d'obtenir l'adresse IP correspondant à la requête.

2. Le navigateur et le serveur Web distant négocient via la négociation à trois voies TCP pour établir un TCP/IP connexion . La poignée de main comprend un message de synchronisation, un message de réponse de synchronisation et un message de réponse, ces trois messages sont transmis entre le navigateur et le serveur. Dans cette poignée de main, le client tente d'abord d'établir la communication, puis le serveur répond et accepte la demande du client, et enfin le client envoie un message indiquant que la demande a été acceptée.

3. Une fois la connexion TCP/IP établie, le navigateur enverra une requête HTTP GET au serveur distant via la connexion. Le serveur distant trouve la ressource et la renvoie avec une réponse HTTP

4 À ce stade, le serveur Web sert la ressource et le client commence à télécharger la ressource. .

jQueryConnaissances connexes

---

Qu'est-ce que le prétraitement CSS sans sass ? Pourquoi les utiliser

Sass et moins les deux sont cssLe préprocesseur est une couche d'abstraction sur css C'est une syntaxe spéciale qui sera éventuellement compilée en css , <.>less est un langage de style dynamique qui donne au css les caractéristiques d'un langage dynamique, telles que : variables, héritage, imbriqué. Less peut être exécuté à la fois sur le client et sur le serveur (nécessite l'aide de node)

La différence entre .call() et .apply() dans Js

apply : Appelez une méthode d'un objet et remplacez celle actuelle par un autre objet objet.

call : Appelez une méthode d'un objet, en remplaçant l'objet actuel par un autre objet.

Comme le montre la définition, call et apply sont deux méthodes pour appeler un objet, en remplaçant l'objet actuel par un autre objet. La différence réside dans les paramètres passés. apply ne peut avoir que deux paramètres au maximum - un nouvel objet this et un tableau argArray. Si arg n'est pas un tableau, une erreur sera signalée

. Identique aux Points : Les deux méthodes ont exactement le même effet. La fonction d'appeler et de postuler est d'emprunter les méthodes d'autres personnes pour appeler, tout comme appeler la vôtre

La différence : Paramètres transmis. par la méthode Différent

Pourquoi cela pose-t-il un problème inter-domaines/Veuillez décrire brièvement la politique de même origine

La raison pour laquelle cross- un problème de domaine se produit :

En mode de séparation front-end et back-end, les noms de domaine des front-end et back-end sont incohérents et des problèmes d'accès entre domaines se produiront. Pendant le processus de demande, si nous voulons récupérer les données, il s'agit généralement d'une requête post/get, donc... des problèmes inter-domaines surviennent

Les problèmes inter-domaines proviennent La politique de même origine de JavaScript, c'est-à-dire uniquement si le protocole + le nom d'hôte + le numéro de port (le cas échéant) sont identiques, l'accès mutuel est autorisé. En d’autres termes, JavaScript peut uniquement accéder aux ressources de son propre domaine et les exploiter, mais ne peut pas accéder aux ressources d’autres domaines et les exploiter.

La même politique d'origine est une politique de sécurité bien connue proposée par NetScape. La soi-disant même origine fait référence au même protocole, nom de domaine et port. Pour des raisons de sécurité, le navigateur autorise uniquement l'interaction d'interface sous ce nom de domaine. Les scripts clients provenant de différentes sources ne peuvent pas lire ou écrire les ressources de l'autre partie sans autorisation explicite.

Veuillez proposer trois façons de réduire le temps de chargement des pages

1 Optimiser les images

<.>

2. Sélection du format d'image (GIF : fournit moins de couleurs et peut être utilisé dans des endroits où les exigences de couleur ne sont pas élevées)

3. Optimiser le CSS (compresser et fusionner les CSS, tels que margin-top, margin-left...)

Ajouter après le URL Slash (comme www.campr.com/directory, il déterminera le type de fichier ou le répertoire de ce répertoire.) hébergement cdn

indique le. hauteur et largeur (si le navigateur ne trouve pas ces deux paramètres, il doit calculer la taille lors du téléchargement de l'image. S'il y a beaucoup d'images, le navigateur doit constamment ajuster la page. Cela affecte non seulement la vitesse, mais également l'expérience de navigation.

Lorsque le navigateur connaît les paramètres de hauteur et de largeur, même si l'image ne peut pas être affichée temporairement, il fera de la place à l'image sur la page et continuera à charger l'image. contenu ultérieur. Cela accélérera le temps de chargement et offrira une meilleure expérience de navigation. OK)

6 Réduire les requêtes http (fusionner des fichiers, fusionner des images) <.>

Cela pointe vers

En JavaScript, cela pointe généralement vers la fonction que nous exécutons, ou vers l'objet auquel appartient la fonction.

Global ceci → pointe vers la Fenêtre

ceci dans l'objet → pointe vers lui-même

Ceci dans l'événement → pointe vers l'objet événement

Qu'est-ce que jsonp et comment ça marche ? Pourquoi n'est-ce pas vrai ajax

Jsonp

est en fait une solution inter-domaines.

JsLa demande de données inter-domaines n'est pas autorisée, mais la demande inter-domaine js pour le script js est possible .

Vous pouvez ainsi encapsuler les données

demandées dans une instruction js et effectuer un appel de méthode.

Vous pouvez obtenir ce script en demandant un script js sur plusieurs domaines. Le script js sera exécuté immédiatement après l'avoir obtenu.

Vous pouvez transmettre des données en tant que paramètres à la méthode. Vous pouvez obtenir les données. Cela résout les problèmes inter-domaines.

jsonpPrincipe : (Création dynamique de balises de script, Fonction de rappel)

Le navigateur autorise les requêtes inter-domaines via src de la balise de script dans la requête js. Vous pouvez ajouter le nom de la méthode de rappel au résultat de la requête et définir la méthode dans la page de requête pour obtenir. il. Données demandées dans tous les domaines.

Pourquoi ce n'est pas du vrai ajax ?

1, ajax et jsonp dans la méthode d'appel" Ça a l'air très similaire et a le même objectif, qui est de demander une URL puis de traiter les données renvoyées par le serveur. Par conséquent, des frameworks tels que jquery et ext encapsulent jsonp comme une forme d'ajax

2, Mais ajax et jsonp sont des choses essentiellement différentes. Le cœur d'ajax est d'obtenir le contenu de cette page via XmlHttpRequest, tandis que le cœur de jsonp est d'ajouter dynamiquement la balise <script> pour appeler le script js fourni par le serveur. <span style="color:#FF0000;"></script>

3 Donc, en fait, la différence entre ajax et jsonp n'est pas de savoir s'il s'agit d'un inter-domaine. côté proxy, et jsonp lui-même n'exclut pas l'acquisition de données dans le même domaine.

4 De plus, jsonp est une méthode ou un protocole non obligatoire comme ajax, il ne nécessite pas nécessairement le format json pour transmettre des données, si vous le souhaitez. , vous pouvez modifier les caractères, mais cela n'est pas propice à ce que jsonp fournisse des services publics.

Veuillez maîtriser 2 façons ou plus de supprimer les doublons des tableaux

• Utilisez indexof()

• Utilisez la méthode

  lastindexof() et indexofLa même méthodeindexofmatch de la têtelastindexofmatch de la tail

• ES6

  ensembleensemblestructureensembleN'accepte pas les données en double

• Utilisez la méthode de tri pour trier d'abord le tableau d'origine, puis comparez-le avec celui adjacent, et s'il est différent , stockez-le dans le nouveau tableau

• Utilisez le

  filiter et l'indexof méthodes

• Utiliser l'

  ensemble

ES6 et l'opérateur de propagation

utilisent

set et Array.from La méthode () array.from peut convertir la structure set en un tableau

en utilisant

épissure et double boucle

utilisez le

comprend la méthode

Qu'est-ce qu'une copie profonde et superficielle et comment y parvenir ?

Copie approfondie : affectation de pointeur et copie de contenu,

Copie superficielle : affectation simple de pointeur

Copie superficielle du tableau : S'il s'agit d'un tableau, vous pouvez utiliser certaines méthodes du tableau pour l'implémenter : slice(), concat() renvoie une copie des caractéristiques du nouveau tableau. Utilisez l'opérateur spread spread pour implémenter la copie profonde du tableau

 : JSON.parse(JSON.stringify()) n'est pas seulement applicable à tableaux mais aussi à l'objet. Les fonctions, non définies et les symboles ne peuvent pas être copiés.

Pourquoi js est un langage faiblement typé

L'implémentation d'un langage faiblement typé est comparée à un langage fortement typé. Dans un langage fortement typé, il existe des variables. de nombreux types, tels que int char float Boolean Parfois, une conversion forcée est nécessaire pour convertir différents types entre eux, tandis que jacascript n'a que un typevar, lors de l'attribution d'une valeur à une variable, le type sera automatiquement déterminé et converti, c'est donc un langage faiblement typé.

Comment convertir moins en CSS

• Utilisez node pour convertir moins les fichiers sont générés sous forme de fichiers css

• en utilisant webstorm Généré automatiquement

Quels sont les echarts les plus couramment utilisés

Graphiques et combinaisons de graphiques

Quelle est la différence entre une boucle For et une boucle de carte ?

ForItère sur l'objet lui-même et hérite de propriétés énumérables, et aussi C'est-à-dire quels attributs de la chaîne prototype seront inclus

Map la méthode ne détectera pas les tableaux vides, mapUn nouveau tableau sera renvoyé et n'affectera pas le tableau d'origine

Veuillez écrire une classe simple et un héritage

Il y a trois étapes pour créer un Type de classe :

• en utilisant la fonction et ce mots-clés

• Méthode du prototype Utiliser prototype et ceMots clés

• Utilisez le object.create() méthode pour construire

Il existe six types d'héritage :

• Héritage prototypique

• Héritage de constructeur emprunté

• Héritage combiné

• Héritage prototypique

• Héritage parasitaire

• Héritage combiné parasite

La différence entre synchrone et asynchrone/la différence entre bloquant et non bloquant

Synchrone (bloquant)

Asynchrone (non bloquant)

Pour exemple : synchronisation, on travaille ensemble, c'est l'heure de manger, j'y vais je t'ai demandé de manger ensemble, alors je vais m'asseoir et attendre que tu termines ton travail avant d'aller manger ensemble

Au travail, c'est l'heure de manger, je t'appellerai pour manger ensemble. Tu es très occupé, donc je mangerai seul d'abord. tu as fini

Synchrone (bloquant) et asynchrone (non bloquant) ces deux-là se concentrent sur L'état du programme en attendant le résultat de l'appel

Que sont le redessinage et la refusion

Redistribution : Quandarbre de rendu Une partie ou la totalité de doit être reconstruite en raison de changements dans la taille, la disposition, le masquage, etc. des éléments . La redistribution doit être effectuée au moins une fois sur chaque page. La redistribution se produit lorsque la page est chargée pour la première fois. La redistribution se produira certainement à ce moment-là car il est nécessaire de créer un arbre de rendu

Pendant la redistribution, le navigateur invalidera la partie affectée de l'arbre de rendu et reconstruira cette partie de l'arbre de rendu. Après avoir terminé la redistribution, le navigateur redessinera la partie affectée à l'écran.

Quand arbre de rendu doit mettre à jour les attributs, et ces attributs n'affecte que l'apparence des éléments, pas Cela affectera la mise en page et s'appelle redessiner

Qu'est-ce que http ? Quelles sont les caractéristiques

http est appelé Hypertext Transfer Protocol, qui est le protocole réseau le plus utilisé sur Internet

Caractéristiques : basé sur les requêtes - mode de réponse Économie sans état Aucune connexion

HTTP La différence entre le protocole et HTTPS

• http est un protocole de transfert hypertexte, et les informations sont transmises en texte clair, https est sécurisé sslprotocole de transfert de décryptage

• http et httpsLa méthode de connexion est complètement différente, et le port est également différent, http est 80, https est 443

• http La connexion est très simple, est apatride. Le protocole https est un protocole réseau construit par le ssl+http protocole qui peut effectuer une transmission cryptée et une authentification d'identité, plus sûr que le http protocole

La différence entre le prototype. et héritage, prototype, appel et application d'héritage (premier Les deux paramètres sont les mêmes, quelle est la différence avec le second)

apply()

reçoit deux paramètres, l'un est la portée dans laquelle la fonction s'exécute (this), l'autre est le tableau de paramètres. Le premier paramètre de la méthode

call()

est le même que la méthode apply(), mais les paramètres passés à la fonction doivent être listés.

La différence entre les fonctions fléchées et les fonctions ordinaires

• Les fonctions fléchées sont des fonctions anonymes et ne peuvent pas être utilisées comme constructeurs.

  nouveau

• La fonction flèche ne peut pas lier les

  arguments, utilisez resteSolution de paramètre

• La fonction flèche n'a pas d'attribut de prototype

• Le

  this de la fonction flèche pointe toujours vers le this de son contexte,

• La fonction flèche ne peut pas lier ceci, et capturera le ceci du contexte dans lequel il se trouve. >Valeur, comme siennecettevaleur

Qu'est-ce qu'une mémoire js fuir?

La fuite de mémoire fait référence à un morceau de mémoire alloué qui ne peut pas être utilisé ou recyclé jusqu'à la fin du processus du navigateur

Méthodes pour libérer de la mémoire : attribuer la valeur à null

Comment optimiser les fichiers et les ressources de votre site internet ?

1, fusion de fichiers (le but est de réduire les requêtes http)

2, Compression de fichiers (le but est de réduire directement la taille des téléchargements de fichiers)

3, utilisez les ressources d'hébergement cdn

4, utilisez le cache

5, gizp compressez vos fichiers js et css

6, optimisation des balises méta (titre, description, mots-clés), optimisation des balises de titre, optimisation alt 7. Backlinks, optimisation des liens externes du site Web

Veuillez décrire brièvement l'exécution d'ajax processus et codes d'état HTTP courants

100 : Ce code d'état indique au client qu'il doit continuer à envoyer des requêtes. Cette réponse temporaire est utilisée pour informer le client. Une partie de la demande a été acceptée par le serveur, mais le client doit continuer à envoyer la partie restante de la demande. Si la demande est terminée, la réponse est ignorée et le serveur enverra un résultat final au client après l'envoi. la demande est terminée

200 : Il s'agit du code d'état http le plus courant, indiquant que le serveur a accepté avec succès la demande et renverra le résultat final demandé par le client

202 : Indique que le serveur a accepté la demande, mais ne l'a pas encore traitée, et il est toujours incertain si la demande sera finalement traitée

204 : Le serveur a traité avec succès la demande, mais n'a renvoyé aucun contenu d'entité et peut renvoyer de nouvelles méta-informations d'en-tête

301 : La page Web demandée par le client a été déplacée définitivement vers un nouvel emplacement. Lorsque le lien change, un code 301 est renvoyé pour informer le client du changement de lien. Le client enregistre le nouveau. lien et fait une requête vers le nouveau lien. Le résultat de la requête a été renvoyé

404 : La requête a échoué, la ressource demandée par le client n'a pas été trouvée ou n'existe pas

500 : Le serveur a rencontré une erreur inconnue, entraînant l'impossibilité de terminer la demande actuelle du client.

503 : Le serveur ne parvient pas à résoudre la requête en cours en raison d'une surcharge temporaire du serveur ou d'une maintenance

Préchargement et La différence entre le chargement paresseux et quel est le moment approprié pour le préchargement ?

Le préchargement signifie télécharger les ressources requises à l'avance avant le chargement de la page, puis l'appeler depuis le cache lors de son utilisation. ; Le chargement paresseux est un chargement retardé, qui attend que certaines conditions ou exigences soient remplies avant de charger les ressources correspondantes

La principale différence entre les deux est que l'un se charge à l'avance et l'autre se charge lentement. voire pas du tout. Le chargement paresseux peut soulager dans une certaine mesure la pression sur le front-end du serveur, tandis que le préchargement augmentera la pression sur le front-end du serveur .

JqueryQuels sont les sélecteurs

1. >

Le sélecteur de base est le sélecteur le plus couramment utilisé et le plus simple dans jQuery. Il recherche les éléments DOM via l'identifiant, la classe et le nom de la balise de l'élément.

1, sélecteur d'ID #id
Description : fait correspondre un élément en fonction de l'identifiant donné, renvoie un seul élément (Remarque : Dans la page web, le nom de l'identifiant ne peut pas être répété)
Exemple : $("#test") sélectionne l'élément avec l'identifiant de test

2 , class selector.class
Description : faire correspondre les éléments en fonction du nom de classe donné et renvoyer la collection d'éléments
Exemple : $( ".test") Sélectionnez tous les éléments avec le test de classe

3, élément de sélection d'élément
Description : Faites correspondre les éléments en fonction du étant donné le nom de l'élément, renvoie l'ensemble d'éléments
Exemple : $("p") sélectionne tous les éléments

4, *
Description : Faire correspondre tous les éléments et renvoyer l'ensemble d'éléments
Exemple : $("*") sélectionne tous les éléments

5, selector1, selector2,...,selectorN
Description : Fusionner les éléments correspondant à chaque sélecteur et les renvoyer ensemble, et renvoyer l'élément fusionné set
Exemple : $("p,span,p.myClass") sélectionne l'ensemble d'éléments , avec la classe myClass 🎜>

2. Sélecteur hiérarchique

Le sélecteur hiérarchique obtient des éléments spécifiques basés sur des relations hiérarchiques.

1, sélecteur descendant
Exemple : $("p span") sélectionne tous les éléments dans

;span> (remarque : le sélecteur descendant sélectionne tous les éléments sélectionnés spécifiés de l'élément parent, qu'il s'agisse d'un enfant ou d'un petit-enfant)

2, Enfant selector $("parent>child")
Exemple : $("p>span") sélectionne tous les éléments sous l'élément

éléments appartenant directement à l'élément parent)
3, sélecteur frère $("prev+next")
Description : Sélectionnez l'élément suivant immédiatement après que l'élément précédent renvoie l'ensemble d'éléments
Exemple : $(".one+p") sélectionne l'ensemble d'éléments frères

suivant avec la classe un
4, sélecteur de frères et sœurs $("prev~siblings")
Description : Sélectionnez tous les éléments frères et sœurs après l'élément précédent et renvoyez l'ensemble d'éléments
Exemple : $("#two~p") sélectionne l'ensemble de tous les éléments frères et sœurs après l'élément portant l'identifiant deux

3. >

1>Sélecteur de filtre de base
1, :first
Description : Sélectionnez le premier Un élément renvoie un seul élément
Exemple : $("p:first") sélectionne le premier élément

, :last
Description : Sélectionnez le dernier élément et renvoie un seul élément
Exemple : sélection $("p:last") Le dernier élément

parmi tous les éléments

3, :not(selector)
Description : Supprimez tous les éléments avec Étant donné les éléments correspondants par le sélecteur, renvoie l'ensemble d'éléments
Exemple : $("input:not(.myClass)") sélectionne l'élément dont la classe is not myClass
4, :even
Description : Sélectionnez tous les éléments dont l'index est un nombre pair. L'index commence à 0 et renvoie l'ensemble d'éléments .
5 , :odd
Description : Sélectionnez tous les éléments dont l'index est un nombre impair L'index commence à 0 et renvoie l'ensemble d'éléments .
6, :eq(index)
Description : Sélectionnez l'élément dont l'index est égal à index L'index commence à 0 et renvoie un seul élément.
7 , :gt(index)
Description : Sélectionnez les éléments dont l'index est supérieur à index L'index part de 0 et renvoie le. element set
8, : lt(index)
Description : Sélectionnez les éléments dont l'index est inférieur à index L'index commence à partir de 0 et. renvoie l'ensemble d'éléments
9, :focus
Description : Sélectionnez l'élément actuellement ciblé

2>Sélecteur de filtre de contenu
1, :contains(text)
Description : Sélectionnez des éléments avec un contenu textuel sous forme de texte et renvoie la collection d'éléments
Exemple : $(" p:contains('I')") Sélectionnez les éléments contenant le texte "I"
2, :empty
Description : Sélectionnez les éléments non vides qui contiennent des éléments enfants ou des éléments de texte, renvoyez la collection d'éléments
Exemple : $("p :empty") sélectionne les éléments

vides qui ne contiennent pas d'éléments enfants ou d'éléments de texte (

)
3, :has (sélecteur)
Description : Sélectionnez les éléments contenant les éléments correspondant à l'élément sélecteur, renvoie la collection d'éléments
Exemple : $("p:has(p)" ) sélectionne l'élément

contenant l'élément

(

)
4, : parent
Description : Sélectionnez des éléments contenant des éléments enfants ou du texte et renvoyez une collection d'éléments
Exemple : $("p:parent") sélectionne des éléments

contenant des éléments enfants ou des éléments de texte (

ou text

)

3> Sélecteur de filtre de visibilité
1 , :hidden
Description : Sélectionnez tous les éléments invisibles et renvoyez l'ensemble d'éléments
2, :visible
Description : Sélectionnez tous les éléments visibles et renvoyez la collection d'éléments

4>Sélecteur de filtre d'attribut (renvoie une collection d'éléments)
1, [attribut]
Exemple : $("p[id]") sélectionne l'élément p avec l'attribut id
2, [attribute=value]
Exemple : $("input[name=text]") sélectionne l'élément d'entrée avec l'attribut name égal à text
3, [attribute!=value]
Exemple : $("input[name!=text]") Sélectionnez les éléments d'entrée dont l'attribut name n'est pas égal au texte
4, [attribut ^= value]
Exemple : $("input[name^=text]") Sélectionnez l'élément d'entrée dont l'attribut name commence par text
5 , [attribute$=value]
Exemple : $("input[name$=text]") sélectionne l'élément d'entrée dont l'attribut name se termine par text
6, [attribute*=value]
Exemple : $("input[name*=text]") Sélectionnez l'élément d'entrée
7, [attribute~=value]
Exemple : $("input[class~=text]") sélectionne l'attribut de classe séparé par espaces Éléments d'entrée avec du texte dans la valeur
8, [attribute1][attribute2][attributeN]
Description : Combinez plusieurs attributs pour filtrer sélections Appareil

5>Sélecteur de filtre d'attribut d'objet de formulaire (renvoie la collection d'éléments)
1, : activé
Description : Sélectionnez tous les éléments disponibles
2, :disabled
Description : Sélectionnez tous les éléments indisponibles Éléments
3, :checked
Description : Sélectionnez tous les éléments sélectionnés (cases radio, cases à cocher)
Exemple : $("input:checked") sélectionne tous les éléments sélectionnés
4, :selected
Description : Sélectionner tous les éléments d'option sélectionnés (liste déroulante)
Exemple : $("select option:selected") Sélectionnez tous les éléments d'option sélectionnés

Méthode Jquery de insertion de nœuds

append() Ajouter du contenu à chaque élément correspondant

appendTo() Ajoute tous les éléments correspondants à l'élément spécifié. En fait, l'utilisation de cette méthode inverse l'opération $(A).append(B) normale pour ajouter A à B

prepend() Préparer le contenu à l'intérieur de chaque élément correspondant

prependTo() Préparer tous les éléments correspondants dans l'élément spécifié. En fait, l'utilisation de cette méthode inverse l'opération conventionnelle $(A).prepend(B), c'est-à-dire qu'au lieu d'ajouter B à A, A est ajouté à B

after() Insérer du contenu après chaque élément correspondant

insertAfter() Insérer tous les éléments correspondants derrière l'élément spécifié. En fait, l'utilisation de cette méthode inverse l'opération conventionnelle $(A).after(B), c'est-à-dire qu'au lieu d'insérer B après A, A est inséré après B

before() Insérer du contenu avant chaque élément correspondant

insertBefore() Insère tous les éléments correspondants devant l'élément spécifié. En fait, utiliser cette méthode inverse l'opération conventionnelle $(A).before(B), c'est-à-dire qu'au lieu d'insérer B devant A, insérez A devant B

La différence entre la limitation de fonction et l'anti-shake de fonction dans Js

La limitation de fonction signifie que la méthode js n'est exécutée qu'une seule fois dans un certain délai. période de temps.

La fonction anti-shake signifie que lorsqu'elle est déclenchée fréquemment, le code ne sera exécuté qu'une seule fois s'il y a suffisamment de temps d'inactivité

La fonction de limitation est la instruction Une variable est utilisée comme indicateur pour enregistrer si le code actuel est en cours d'exécution, s'il est en cours d'exécution, annulez l'exécution de la méthode et retournez s'il est inactif. exécution de la méthode normalement

La fonction anti-shake est qui nécessite un retardateur pour aider à la mise en œuvre et retarde l'exécution du code qui doit être exécuté. Si la méthode est déclenchée plusieurs fois, utilisez. le dernier code d'exécution retardé enregistré avec cleartimeoutEffacer et recommencer. Si le minuteur est terminé et qu'il n'y a aucun moyen d'accéder au déclencheur, exécutez le code

<.>

Get est différent de post

Get consiste à obtenir des données du serveur, post consiste à envoyer des données au serveur

sur le client, get soumet les données via url, les données peuvent être vues dans la méthode url, post, les données sont soumises dans en-tête HTML

Problèmes de sécurité

ObtenirLes données soumises ne peuvent avoir que jusqu'à 1024 octets, post Aucune restriction

Qu'est-ce qu'une attaque CSRF

Csrf (falsification de requêtes intersites) Une fois que l'utilisateur s'est connecté au site Web cible, l'attaquant incite l'utilisateur à visiter une page d'attaque, utilise la cible la confiance du site Web dans l'utilisateur et utilise l'identité de l'utilisateur pour attaquer la page afin de lancer une demande de fausse opération d'utilisateur vers le site Web cible afin d'atteindre l'objectif de l'attaque

Écrire une profonde copier en Js

Quand utiliser la copie profonde/copie superficielle

Peu importe sa profondeur, c'est nécessaire. Lorsqu'une copie profonde se produit, cela indique généralement qu'il existe une relation d'agrégation. Lorsqu'une copie superficielle se produit, cela indique généralement qu'il existe une relation de connaissance

Par exemple Exemple simple : lorsque. implémentant un modèle de combinaison Modèle composite , la copie profonde

est généralement implémentée lors de l'implémentation d'un modèle d'observateur Modèle d'observateur. , vous devez implémenter une copie superficielle

Lié à Vue

---

1.Vue Quel est le cœur de

Vue est un ensemble de développement incrémentiel ascendant progressif pour la création d'interfaces utilisateur MVVM framework, vue Le noyau se concentre uniquement sur le couche de vue,

Idée de base :

Basé sur les données (le contenu de la vue change à mesure que les données changent)

Componentisation (peut augmenter la réutilisabilité, la maintenabilité, la testabilité du code, améliorer l'efficacité du développement, faciliter la réutilisation et refléter une cohésion élevée et un faible couplage)

2. compréhension de vue

Vue est un ensemble de méthodes progressives pour créer des interfaces utilisateur Le MVVM framework est développé progressivement de bas en haut. Le noyau est de se concentrer sur la couche de vue, Le noyau de vue<.> est afin de résoudre le problème de la liaison de données, afin de développer de grandes applications d'une seule page et la composantisation, donc le cœur de vue L'idée est basée sur les données et composée de composants. Ici, nous parlons également de l'idée MVVM. L'idée MVVM est . Modèle Vue vm est le pont reliant v et m , lorsque les données de la couche modèle sont modifiées, la couche VM la détectera et notifiera la couche de vue pour apporter les modifications correspondantes

3. Veuillez décrire brièvement le flux de données unidirectionnel de Vue

La mise à jour du parent prop descendra vers l'enfant composant, chaque fois que le composant parent est mis à jour, tous les prop du composant enfant seront actualisés à la dernière valeur

les données sont transmis du composant parent au composant enfant, et ne peut être lié que dans une seule direction. Il est déterminé que les données transmises par le composant parent ne peuvent pas être directement modifiées à l'intérieur du composant enfant (vous pouvez utiliser data et calculés pour résoudre ce problème)

4 Quels sont les modificateurs couramment utilisés dans Vue

Modificateurs  : .lazy Déclenché après changements, la valeur ne changera que lorsque le curseur quittera le entrée zone de saisie

.number Convertissez la chaîne de sortie en numéro tapez

.trim Filtre automatiquement les entrées de l'utilisateur Les espaces de début et de fin

modificateur d'événement :

.stop empêche les événements de clic de bouillonner, équivalent à event.stopPropagation().prevent en natif

js Empêcher l'exécution de comportements prédéfinis équivaut à event.preventDefault().capture

js

🎜>Utilisez le mode de capture d'événement lors de l'ajout d'un écouteur d'événement, c'est-à-dire celui qui a le le modificateur d'événement le déclenchera en premier

.self

ne déclenchera que les événements dans sa propre portée, à l'exclusion des éléments enfants

.once

Exécuter une seule fois

Modificateur de clavier :

.enter Touche Entrée .tab Touche Tab .escTouche Retour .space Barre d'espace

.upTouche Haut .down Flèche vers le bas .leftConstruire à gauche .rightFlèche droite

Système modificateurs : .ctrl .alt .shift .meta

5.v-text et { {}} et v-html

{{}} analyse les données en texte brut et ne peut pas afficher le résultathtml

v-html peut restituer la sortiehtml

v-text Analyse les données en texte brut et ne peut pas afficher le vrai html La différence avec les accolades est que les doubles accolades ne sont pas affichées lorsque la page. est chargé.

v-text Commande :

Fonction : Manipuler le contenu du texte brut dans les éléments de la page Web. {{}} est une autre façon d'écrire

v-text et {{}}Différence :

v-text et {{ }} est équivalent, {{}} est appelé interpolation de modèle, v-text Instructions d'appel.

Une différence est que lors du rendu d'un grand nombre de données, des accolades peuvent s'afficher, communément appelées écran clignotant :

6. V-on peut-il lier plusieurs méthodes

Oui Si vous liez plusieurs événements, vous pouvez utiliser des paires clé-valeur Type d'événement : nom de l'événement

Si la liaison est composée de plusieurs événements identiques, séparez-les simplement par des virgules

7. Fonction clé de boucle Vue

CléL'existence de la valeur garantit l'unicité, VueUne fois exécuté , le nœud sera vérifié. S'il n'y a pas de valeur key, alors vue<.> Vérifiez qu'il y a un nœud dom ici, le contenu sera effacé et une nouvelle valeur sera attribuée, s'il y a un key existe, alors les nouveaux et anciens nœuds seront comparés, en comparant les deux key Qu'elles soient identiques, échangez les positions ou supprimez-les

8 Qu'est-ce qu'un attribut calculé

.

Les attributs calculés sont utilisés pour décrire de manière déclarative qu'une valeur dépend d'autres valeurs. Lorsque la valeur dont elle dépend change, le DOM est mis à jour

Lors de la liaison de données à une propriété calculée dans un modèle, vue sera mise à jour lorsque l'une des valeurs dont elle dépend entraîne une modification de la propriété calculéeDOM

Chaque propriété calculée comprend un getter et un setter, getter est déclenché lors de la lecture, et setter est déclenché lors de la modification

9. Avantages et inconvénients de Vue monopage

Page uniquespa

Avantages : séparation front-end et back-end Bonne expérience utilisateur Un mot Rapide Les modifications de contenu ne nécessitent pas de recharger la page entière

Inconvénients : Pas bon pour seo , Le temps de chargement initial est long (le navigateur doit charger html css js au début, et tout le contenu de la page est inclus dans la page principale) , la complexité de la page a augmenté et la navigation n'est pas disponible

10. Qu'est-ce que Vuex ? Comment utiliser ? Utiliser dans ce scénario

Vuex est un outil de gestion d'état développé spécifiquement pour le mode des applications vue.js, par la création d'un stockage de données centralisé facilite l'accès à tous les composants du programme. En termes simples, vuex est vue L'outil de gestion d'état vue

. 🎜>Vuex possède cinq propriétés

modules d'actions de mutations getters d'état

État est l'emplacement de stockage de la source de données, correspondant aux données générales de l'objet vue, état est réactif. Lorsque les données dans état changent, les composants correspondant à ces données changent également Appelez les

Getters

avec this.$store.state.xxx Équivalent au propriétés calculées de store, en filtrant principalement les données dans state, en utilisant this.$ store.getters. xxxAppel

Mutations Les méthodes de traitement de la logique des données sont toutes placées dans mutations , lorsque l'événement déclencheur veut modifier les données état, utilisez mutations, utilisez this.$store.commit est appelé, ajoutez un paramètre à cette méthode, qui est la charge utile de mutation ( charge utile)

Actions Exploiter les données de manière asynchrone, mais par mutation Utiliser this.$store.dispatch pour déclencher des actions prend également en charge la charge utile

scénarios d'utilisation : Statut entre les composants , statut de connexion, ajouter au panier, lecture de musique

VuexProcessus d'utilisation :

Télécharger vuex

crée un store et index.js présente

vue

et vuex, Utiliser vuex pour exporter l'objet instance dans

main.js

Introduit dans le fichier .vue et utilisé dans 11. Mode saut d'itinéraire dans Vue (déclaratif/programmatique)

Il existe deux types de sauts d'itinéraire dans Vue

, qui sont déclaratives et programmatiques

Utiliser

js

la méthode de saut est appelée navigation programmatique ceci .$router.push() L'utilisation de

router-link

pour sauter est appelée déclarative router-view sortie de routage, l'emplacement où le modèle de routage est affiché

Quel est le rôle du

• name

  attribut dans le routage ?

  Naviguez en utilisant
• nom

  dans routeur-lien Naviguez à l'itinéraire correspondant en utilisant

nom
• tout en passant des paramètres au sous-itinéraire 12. Solution multidomaine Vue

1.

Modifications en arrière-plan

en-tête 2.

Utilisez

jq pour fournir jsonp3.

Utiliser

http-proxy-middleware (Configurer le middleware du serveur proxy) 13. Veuillez décrire brièvement le cycle de vie de Vue

vue

Le cycle de vie de vue

vue Le processus depuis la création d'une instance jusqu'à sa destruction. Pendant cette période, il y aura 8 fonctions hook appelées. beforeCreate

(créer une instance)

créé

(création terminée),

beforeMount

(Commencer à créer un modèle)

monté (création terminée),

beforeUpdate (mise à jour démarrée)

mis à jour (mise à jour terminée),

beforeDestroy (destruction commencée)

détruit(destroy terminé)

14 Le rôle du cycle de vie de Vue

donne aux utilisateurs la possibilité de s'ajouter eux-mêmes. à différentes étapes Opportunités pour le code

15 Le rendu DOM est terminé dans cette étape du cycle de vie

Le rendu DOM. se fait en montéIl a été complété dans le cycle

Mise en œuvre du routage Vue

Le routage front-end est mis à jour Afficher mais ne demande pas la page,

utilise le point d'ancrage pour terminer le changement, la page ne sera pas actualisée

Le site officiel recommande d'utiliser vue -router.js pour introduire le module de routage

• définir composants de routage

• Définir des itinéraires, utiliser composant pour les composants de mappage d'itinéraire, utiliser nom pour accéder à l'itinéraire correspondant

• Créez une instance de routeur et passez dans le routes configuration

• Créer et monter l'instance racine

• en utilisant router-linkDéfinir le saut d'itinéraire

17. historique, parlez-en brièvement

Hash La barre d'adresse du mode a #, historique ne l'est pas, historique Actualiser en mode, 404 apparaîtra et une configuration en arrière-plan est requise

en utilisant JavaScript Pour attribuer une valeur à loaction.hash , modifiez le Le hash de l'URL

Vous pouvez utiliser le hashchange événement pour surveiller les changements dans la valeur de hachage

HTML5 fournit API d'historique pour implémenter les modifications apportées à l' URL . Les API les plus importantes sont les deux suivantes : history.pushState() et history.repalceState( ) . Ces deux API peuvent exploiter l'historique du navigateur sans rafraîchir. La seule différence est que le premier ajoute un nouveau document historique, tandis que le second remplace directement le document historique actuel.

18. Deux façons de transmettre des paramètres dans le routage Vue, les paramètres et les méthodes de requête et leurs différences

Le routage dynamique peut également être appelé paramètres de routage signifie rendre différents contenus dans le même composant selon différents choix

Utilisation : query est introduit avec path, et params est introduit avec name introduit , et les paramètres reçus par sont similaires, à savoir this.$route.query.name et this.$route.params.name

url s'affiche sur :params similaire à post, query est similaire à get, qui est une sécurité problème, params est relativement plus sûr à transmettre par valeur query transmet le paramètre via url. et actualisez la page. Toujours là, paramsActualisez la page et c'est parti

19. 🎜>

1.

Reliure unidirectionnelle Doubles bretelles {{}} html Liaison de chaîne interne

2.v-bind

bind htmlliaison d'attribut

3.

Reliure bidirectionnellev-model

4.

Reliure unique v-once dépend du v-model

20.Vue enregistre un composant global

Vue.componnet

("Nom du composant"{Objet modèle

Contenu de la construction

})

21. Quelles sont les fonctions de crochet de routage/gardes de routage de Vue

Garde globale :

avantChaque(à,de, suivant) et aprèsEach (à,de)

Garde exclusive d'itinéraire :

avantEntrée

composant Garde inside: RouterEnter/update/leave

/update/ 🎜>Comment configurer le routage dynamique dans Vue ? Quels sont les moyens ? Comment récupérer les données transmises ?

Le routage dynamique peut également être appelé paramètres de routage

Le routage dynamique comprend la

requête

et

prramsDeux façons de transmettre des paramètres

query est introduit avec path, et params est introduit avec name est introduit, query utilise this.$route.query.name pour recevoir les paramètres

paramsUtilisez this.$route.params.name pour recevoir des paramètres

23. Quels sont les composants communs dans Elementui ? Veuillez décrire brièvement ceux que vous utilisez souvent et quels sont leurs attributs ?

ConteneurConteneur de mise en page

Conteneur extérieur

Conteneur de la barre supérieure

Barre latérale latérale conteneur

Conteneur de contenu principal

Conteneur de la barre inférieure

Dropdown Menu déroulant

Bouton déroulant

Menu déroulant

Éléments déroulants

Tableau Tableau

Onglets Onglet

Formulaire Formulaire

Pagination Pagination

Message Invite de message

24. Comment personnaliser les instructions dans Vue-cli

25 .Quelles sont les instructions dans Vue

v-for : tableaux de boucles, objets, chaînes, nombres

v -on : Lier l'écouteur d'événement

v-bind : Lier dynamiquement un ou plusieurs attributs

v-model : Créez une liaison bidirectionnelle sur des contrôles ou des composants de formulaire

v-if v-else v-else-if Rendu conditionnel

v-show Changer l'affichage

v de l'élément -html Mettre à jour le innerhtml

v-text Mettre à jour le textcontent de l'élément

v-pre Ignorer le processus de compilation de cet élément et sous-éléments

v-clock Cette directive reste sur l'élément jusqu'à ce que l'instance associée termine la compilation

v-once Rend une seule fois

26. Comment Vue définit un filtre

过滤器本质就是一个有参数有返回值的方法

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. Pourquoi les données du composant Vue sont-elles une fonction

Data est une fonction ? Chaque instance de composant a sa propre portée. Chaque instance est indépendante les unes des autres et ne s'affectera pas

S'il s'agit d'un type de référence (objet), lorsque plusieurs composants partagent les mêmes données Lors de la source, si une donnée change, toutes les données du composant changeront, utilisez donc la fonction pour renvoyer une copie de l'objet via return (renvoie une nouvelle donnée), donc que chaque instance Ils ont leur propre portée et ne s'affectent pas les uns les autres.

32. Le principe de la liaison bidirectionnelle Vue

VueLa liaison bidirectionnelle est la suivante : mise à jour des modifications des données. la vue, la vue Modifier les données de mise à jour

Vuela liaison bidirectionnelle des données est obtenue grâce au détournement de données et au mode observateur.

Détournement de données, object.defineproperty Son objectif est le suivant : lors de l'attribution d'une valeur à une propriété, le programme peut la détecter. et contrôlez-le Changer la valeur de l'attribut

Mode observateur Lorsque l'attribut change, l'endroit où les données sont utilisées change également

33. Comment transmettre les valeurs des composants dans Vue

Forward : Passer du parent à l'enfant Le composant parent lie les données à transmettre l'attribut et l'envoie au composant enfant Via PROPS Recevoir

Inverse : Zi Chuanfu émettre (nom de l'événement personnalisé, données à envoyer), le composant parent définit un événement d'écoute à recevoir, puis obtient les données Brother :

eventbus Bus événementiel centralvia

Vuex 34. Le principe du Bootstrap

Le principe de mise en œuvre du système de grille est de définir la taille du conteneur et de le diviser également en

12 parties, (24 parties ou 32 parties), puis ajustez les marges intérieures et extérieures, combinées aux requêtes multimédias, il devient un puissant système de grille réactif. Par exemple

row col-xs-436. projets

37. Veuillez décrire brièvement le créneau

Il peut être grossièrement divisé en ces points. Tout d'abord, quel contenu peut être placé dans le. emplacement (emplacement) ? Où le mettre ? Qu'est-ce que ça fait ? Vous pouvez placer n'importe quel contenu et l'utiliser dans des composants enfants pour afficher normalement les données du modèle de composant enfant dans le composant parent.

Les emplacements nommés et les emplacements anonymes, les emplacements de portée, pour parler franchement, sont des attributs du composant, qui peuvent être utilisés dans les éléments du composant,

Vous pouvez utiliser

slot-scope pour obtenir des données des composants enfants dans le composant parent38. Regardez, veuillez donner une brève description

Watch

est utilisé pour surveiller le changement d'une valeur et appeler la méthode qui doit être exécutée en raison du changement 39.Vant Ui Veuillez décrire brièvement

Terminal mobile léger et fiable

Vue Bibliothèque de composants40 .La différence entre les propriétés calculées et les montres

Montre calculée La différence est calculée par la fonction de cache Lorsque des données non pertinentes changent, elles ne seront pas recalculées et la valeur dans le cache sera utilisée directement. Les attributs calculés sont utilisés pour décrire de manière déclarative qu'une valeur dépend d'autres valeurs. Lorsque la valeur dépendante ou la variable change, l'attribut calculé change également,

. Watch surveille les variables définies dans data Lorsque la variable change, watch.

41. Qu'est-ce que le framework mvvm ? Quelle est la différence entre celui-ci et les autres frameworks (jquery) ? Quels scénarios sont adaptés ?

La différence entre Mvvm et les autres frameworks est que vuepilotée par les données pass Data est utilisé pour afficher des vues au lieu d'opérations de nœuds

Convient aux scénarios avec de nombreuses opérations de données

42. La raison pourquoi le premier écran de Vue se charge lentement, comment le résoudre, comment détecter le temps d'écran blanc, comment résoudre le problème de l'écran blanc

La raison pour laquelle le premier écran se charge lentement :

Premier chargement La page contient de nombreuses données de composants qui doivent être rendues

Solution :

1.Chargement paresseux de l'itinéraire composant : ()=>import("adresse de routage")

2.uiLe framework est chargé à la demande

3.gzipCompression

Écran blanc Détection du temps :

? ? ? ?

Résoudre le problème de l'écran blanc :

①Utilisez v-textdonnées de rendu

②Utilisez la syntaxe {{}} pour restituer les données, mais utilisez également v-cloak Directive (utilisée pour rester sur l'élément jusqu'à la fin de l'instance associée pour compilation), où doit être placé v-cloak, v - la cape n'a pas besoin d'être ajoutée à chaque tag, il suffit de l'ajouter sur le tag monté par el

43. Dans le processus de double liaison de données Vue, comment informer l'autre côté du changement lorsque les données changent ?

Détournement de données et mode observateur

Vuela liaison bidirectionnelle des données est mise en œuvre via le détournement de données et le mode observateur,

data Hijack, object.defineproperty Son objectif est le suivant : lors de l'attribution d'une valeur à une propriété, le programme peut la détecter, contrôler la plage effective de la valeur de la propriété et modifier les valeurs ​​d'autres propriétés

Le but du modèle d'observateur est que lorsque les propriétés changent, l'endroit où les données sont utilisées change également

44.Processus Vuex

Dans le composant vue, déclenchez des actions

dispatch 🎜 > Soumettre l'opération de modification des données, puis déclencher des mutations pour modifier les données, mutations reçoit la demande de commit, et il passera automatiquement mutate pour modifier état, et enfin store déclenche la mise à jour de chaque composant qui l'appelle 45 Comment Vuex demande-t-il des données asynchrones1.Créez d'abord les variables dans

état

2.Appelez ensuite l'encapsulé axios en action

Demande, réception de données de manière asynchrone, commit soumis à mutationsMutations Changer l'état dans état et attribuer la valeur obtenue à partir de

action

à état46. Comment soumettre une action à une mutation dans VuexAction reçoit une fonction avec des instances store

qui ont les mêmes méthodes et propriétés que les objets context

. Vous pouvez appeler context.commit pour soumettre une mutation, ou obtenircontext .state et context.getters >state et getters47. La différence entre Route et routeur1. Routeur est un objet de VueRouter

.

Vue.use(VueRouter)

et

VueRouter Le constructeur obtient un objet instance de router. Cet objet est un objet global. Il contient toutes les routes et de nombreux objets et attributs clés. 2.route est un objet de routage de saut. Chaque itinéraire aura un objet route. objet local qui peut obtenir le nom, chemin, paramètres, requête

correspondants.

Quelle est la propriété d'État de vuex. ? État est l'endroit où la source de données est stockée

Les données dans l'État

sont réactives Oui, si les données en

état

changent, le composant correspondant à ces données changera également L'

État transmet le mapstate à l'état global et les getters sont mappés aux propriétés calculées du composant actuel

50. Quelle est la propriété Getter de vuex ?

Getter peut effectuer des opérations de calcul sur état, qui est le magasin Les propriétés calculées de

Getter peuvent être réutilisées entre plusieurs composants

Si un état est uniquement dans Lorsqu'ils sont utilisés dans un composant, les getters

51. Quelle est la fonctionnalité Mutation de vuex ?

La seule façon de changer le statut dans la magasin vuex est de soumettre une mutation , oui Modifier le statut dans store dans la fonction de rappel

52 Quelles sont les fonctionnalités d'actions de vuex ? L'

Action est similaire à la mutation, sauf que action Ce qui est soumis est une mutation, qui n'est pas un changement d'état direct. Elle peut inclure toute opération asynchrone

Avantages de. vuex

Avantages : Résoudre la communication des composants non parent-enfant, réduire le nombre de requêtes ajax, certaines peuvent être obtenues directement de état

dans 🎜> Inconvénients : Actualisez le navigateur, état dans vuex Il reviendra à l'état initial. La solution est vuex-along, qui doit être implémentée avec des attributs calculés et sessionstorage

55.Vue Routage Lazy Load (chargement des itinéraires à la demande)

56.v-pour et priorité v-if

Tout d'abord, n'utilisez pas v-if et v-for sur le même élément. Raison : v-for a priorité sur v-if Si vous en avez besoin. Parcourez l'ensemble du tableau à chaque fois, cela affectera la vitesse, surtout lorsque cela est nécessaire lors du rendu d'une petite partie.

v-for a une priorité plus élevée que v-if

S'il vous plaît notez les 5 composants d'Ele.me

Fenêtre pop-up Dialogue
Calendrier
Barre de progression

React lié

---

récupérer VS ajax VS axios

Traditionnel Ajax fait référence à XMLHttpRequest (XHR ) , est la première technologie d'envoi de requêtes backend, appartenant au js d'origine, et le noyau utilise XMLHttpRequest Objet, s'il existe une relation de séquence entre plusieurs requêtes, un enfer de rappel se produira. JQuery ajax est une encapsulation de XHR

axios est un package basé sur Promise , qui est essentiellement un package du XHR natif, sauf qu'il s'agit d'un Promesse La version d'implémentation de est conforme à la dernière spécification ES,

fetch n'est pas Encapsulation supplémentaire d'ajax, mais natif js, sans utiliser le XMLHttpRequest objet.

Traitement des événements React --- modifiez-le pour pointer vers la

méthode1  : Lier sur place via la méthode bind, modifiant ainsi ce pointe vers la

voie 2 : En créant un fonction flèche

manière 3 : dans constructeur

méthode4  : Changez l'écriture des appels d'événements sous la forme de fonctions fléchées

Veuillez décrire brièvement votre compréhension de réagir

React

provient de facebook, react est un utilisé pour créer des interfaces utilisateur jsbibliothèque

Caractéristiques :

• Conception déclarative : react adopte la déclaration de paradigme. Les développeurs n'ont qu'à déclarer le contenu d'affichage, et react le complétera automatiquement<.>

• Efficace

   : réagissez par association Simulation du dom (c'est-à-dire du dom virtuel), minimisant l'interaction avec le dom

• Flexible

   : réagir peut fonctionner avec des bibliothèques connues ou le le cadre fonctionne bien

• Composants : Construire des composants via react, laissez Le code est plus facile à réutiliser et peut être bien appliqué dans le développement de projets à grande échelle. Les fonctions de la page sont divisées en petits modules Chaque petit module est un composant

• Flux de données unidirectionnel : réagir est un flux de données unidirectionnel, les données transitent par props est transmis du nœud parent au nœud enfant. Si l'un des props change, réagit sera restitué à tous les nœuds enfants

Transfert de données entre les composants de réaction

Transfert de valeur en avant se fait à l'aide de props

Transfert de valeur inversé à l'aide de fonctions pour transmettre des valeurs Passer des fonctions via des appels d'événements

Transfert de valeur fraternelle Utilisez pubsub-js

Utilisez pubsub.publish(nom de l'événement, données) lancer des données

Utilisez pubsub.subscribe(événement écouté, ()= ){}) Recevoir des données

transmettre à travers les composants Utiliser contexte utiliser context Pour transmettre des valeurs entre les composants, vous devez utiliser la méthode createContext(). a deux objets fournisseur Producteur Consommateur Consommateur

La différence entre Vue et réagir

Mêmes points :

• Les deux prennent en charge le rendu du serveur

• Les deux ont un dom virtuel, le développement de composants, le transfert de données de composants parent-enfant via accessoires paramètres, tous implémentés webcomponentSpécification

• sont toutes des vues basées sur les données

• Les deux ont une gestion d'état, react aredux, vue avuex

• prend en charge toutes les solutions natives'réagirOuiréagir native vueOuiweex

Différences :

• react est strictement réservé à mvccouche vue, vue est mvvmmode

• virtueldom est différent, vue suivra les dépendances de chaque composant, il n'est pas nécessaire de restituer l'intégralité de l'arborescence des composants dom, contrairement à react, lorsque l'état de l'application est modifié, tous les composants seront restitués. Rendu, donc react utilise la fonction de hook de cycle de vie shouldcomponentupdate pour contrôler

• Les composants sont écrits différemment , react est jsx et le style en ligne consiste à écrire tout le html et css dans js , vue est html, css , js dans le même fichier

• la liaison des données est différente, vue réalise une liaison de données bidirectionnelle, reactle flux de données est unidirectionnel

• dans Dans react, l'objet state doit utiliser la méthode setstate pour mettre à jour l'état, en vue, l'objet state n'est pas nécessaire, les données sont fournies par le dataattribut dans vueGestion dans l'objet

Veuillez décrire brièvement l'attribut virtuel algorithme dom et diff

VirtuelDOM est également communément appelé nœud virtuel, qui est objetjs 🎜> les objets simulent des nœuds dans DOM, puis les restituent en réel DOM via le nœud de méthodes de rendu spécifiques.

Opérations fréquentes

DOM, ou un grand nombre de redessins et redistributions de pages

Diff

algorithme : décomposez l'arborescence selon les niveaux, comparez uniquement les éléments du même niveau et ajoutez une valeur clé unique à chaque unité de la structure de liste pour faciliter la comparaison

Votre compréhension des composants

Composable, réutilisable, maintenable, testable

Quoi se passe-t-il après avoir appelé setState ?

React

Après avoir appelé setstate, react fusionnera l'objet paramètre entrant et l'état actuel du composant pour déclencher le processus de réconciliation,

Pendant le processus de réconciliation, react construira l'arborescence des éléments react pour restituer l'intégralité du basé sur la nouvelle interface d'état >UI, après avoir obtenu l'arborescence des éléments, react calculera automatiquement la différence entre l'ancien et le nouveau nœuds, et minimiser et restituer l'interface en fonction de la différence

réagir Fonction de cycle de vie

<.>componentWillMount Avant le rendu du composant, appelez

componentDidMount Après le premier rendu, appelez

composantWillReceiveProps Après la réception du composant Un nouveau props est appelé lors de l'appel de

shouldComponentUpdate à déterminer si le composant est mis à jour html

componentWillupdate Le composant est sur le point d'être mis à jourhtml Appelé lorsque >Appel immédiatement après la fin de la mise à jour du composant

componentWillUnmount Appel avant la suppression du composant

******Pourquoi le virtuel

dom améliore-t-il les performances ?( Test obligatoire )virtuel dom

est équivalent à

js et Un cache est ajouté au milieu du vrai dom , et l'algorithme dom diff est utilisé pour éviter opérations dom inutiles, améliorant ainsi les performances( composants

) statut Quelle est la différence entre (état) et les propriétés (accessoires)Quelle est la différence entre State et props Props

est un paramètre transmis au composant depuis l'extérieur. Sa fonction principale est de transmettre les données du parent. composant au composant enfant, mais

props

Il est en lecture seule pour les composants qui l'utilisent. Une fois attribué, il ne peut pas être modifié. Nouveau props ne peut être activement transmis que via des composants externes pour restituer le sous-composant

État La forme d'affichage d'un composant peut être déterminée par l'état des données et les paramètres externes. Les paramètres externes sont les props, et les paramètres externes. l'état des données est state, tout d'abord, lors de l'initialisation du composant, utilisez this.state pour définir un state, ces données seront utilisées pour restituer le composant lors du premier rendu. state est différent de <.>props À un moment donné, state peut être modifié via this.setState() Méthode pour modifier l'état

shouldComponentUpdate

Qu'est-ce que Cette fonction de hook de cycle de vie

react est destinée à résoudre ce problème : Utilisez

setState

Modifiez l'intégralité des données. Après les modifications des données, tout le contenu sera restitué pendant la traversée. Une petite quantité de données est acceptable, mais une grande quantité. les données affecteront sérieusement les performancesSolution :

1.shouldcomponentupdate

Déterminez si le composant a été mis à jour avant le rendu, puis rendu après la mise à jour

2.purecomponent

(composant pur) élimine le processus de génération et de comparaison de

dom dans les composants de classe Utilisation 3.react.memo() est similaire au composant pur

utilisation dans les apatrides composant react diff

Principe

Il repose sur trois stratégies :

interface utilisateur Web de comparaison d'arbres

Dans

• dom il y a très peu d'opérations de mouvement de nœuds à plusieurs niveaux et peut être ignorédiff des composants

Deux composants avec la même classe généreront des arborescences similaires, et deux composants avec des classes différentes généreront différentes structures arborescentes

• élément diff

Pour un groupe de nœuds enfants de même niveau, ils peuvent passer l'unique

• idDifférencier

  Que sont les composants contrôlés

Réagir Le composant responsable du rendu du formulaire. La valeur est contrôlée par

state L'élément du formulaire d'entrée est appelé un composant contrôlé .

Quel est le but d'appeler super(accessoires)

Super () appelle la méthode constructeur de la classe parent. Il y a des super Seul le composant a son propre this, qui est global dans le composant Vous pouvez utiliser this, s'il s'agit simplement d'un constructeur sans exécuter super. , alors this sont tous faux, super hérite de this

Comment créer des composants dans React

Composants personnalisés : composants de fonction ou composants sans état La première lettre du composant est en majuscule

Composant de classe : Un composant de classe doit implémenter une méthode render, qui doit renvoyer un élément jsx, envelopper tout le contenu avec un élément externe

Mini programme lié

---

Avantages des mini programmes

Pas besoin de télécharger et d'installer, utilisez-le directement, exécutez-le rapidement, construisez des projets rapidement, courts et concis, chacun applicationLe code source ne dépasse pas 2 Mo

Composition des pages du mini programme (4 fichiers)

Index .js index.json index.wxml index.wxss

Cycle de vie du mini programme

Onload onready onshow onhide onunload

Onpulldownrefresh onreachbottom onshareappmessage

Comment l'applet demande des données

Utiliser la demande

Comment améliorer l'applet Le temps de chargement du premier écran du programme

Demande à l'avance : la demande de données asynchrones n'a pas besoin d'attendre la fin du rendu de la page

Utiliser le cache : Utiliser API de stockage met en cache les données de requête asynchrone Lors du deuxième démarrage, les données mises en cache sont d'abord utilisées pour afficher la page. , puis la mise à jour en arrière-plan est effectuée

Pour éviter un écran blanc : affichez d'abord le squelette de la page et le contenu de base

Commentaires en temps opportun : donnez en temps opportun retour sur les opérations interactives qui obligent les utilisateurs à attendre, pour éviter aux utilisateurs de penser que le mini programme ne répond pas

Optimisation des performances : évitez une utilisation inappropriée de setdata et onpagescroll

Veuillez décrire brièvement les petits fichiers que vous utilisez souvent. Composants du programme

Afficher le texte de l'icône Carte des boutons de saisie du navigateur d'image swiper

Veuillez décrire brièvement la différence entre Wxss et CSS

WxssNouvelle unité de taille rpx

Fournit un style global et un style local

WxssPrend uniquement en charge certains csssélecteur id' classe éléments, etc.

Comment mettre en œuvre un mini programme réactif

Rpx

Comment optimiser le mini programme

Améliorer la vitesse de chargement des pages

Prédiction du comportement des utilisateurs

Réduire la taille des données par défaut

Solution composée

Apprenez indépendamment votre propre serveur

Comment afficher les avatars des utilisateurs dans les mini-programmes L'interface traditionnelle

wx.getuserinfo avec le nom d'utilisateur est actuellement disponible et nécessite l'autorisation de l'utilisateur. Il y aura une invite officielle lors de son utilisation. Cette méthode doit être mise à niveau

La dernière méthode : balise open-data, utilisez cette balise pour obtenir directement l'avatar et le nom d'utilisateur sans autorisation de l'utilisateur,

Vous pouvez écrire opendata comme attribut dans bouton et obtenez-le directement en écrivant un événement de clic

Veuillez parler des similitudes et des différences entre la liaison bidirectionnelle des mini-programmes et vue ?

VueLa liaison bidirectionnelle s'effectue via l'interception de données et le mode observateur, via this.value Pour obtenir la valeur, l'applet déclenche la liaison des éléments du formulaire. Dans la méthode, utilisez this.setData({key:value}) pour obtenir la valeur

Comment passer les paramètres dans le mini programme

et vue Une introduction par analogie

Parlons des problèmes d'adaptation des mini-programmes WeChat

Comment transférer des données entre mini-programmes méthode des pages ?

Comment encapsuler la demande de données de l'applet WeChat ?

Parlez-moi du problème d'adaptation de l'applet WeChat

Comment accéder à une page dans un mini programme

Comment accéder à un autre mini programme dans un mini programme WeChat

Solutions pour ralentir le chargement des mini-programmes

Autres

---

Qu'est-ce que Typescript ? Veuillez le décrire brièvement ?

Quels sont les avantages de Typescript et javascript ?

La différence entre Webpack et gulp

Gulp est un outil qui peut optimiser le processus de développement front-end, webpack est une solution modulaire (grunt)

Veuillez décrire brièvement Quelle est la différence entre les chargeurs et les plugins dans webpack ? Le chargeur de fichiers peut charger des fichiers de ressources et traiter ces fichiers, comme la compilation, la compression, etc., et enfin les regrouper dans des fichiers spécifiés.

Qu'est-ce que le plugin, il y a de nombreux événements dans le cycle de vie du webpack en cours d'exécution, le

plugin

peut surveiller ces événements

Différence : Le chargeur est utilisé pour charger des fichiers, webpack lui-même ne peut charger que des fichiers js (Intégrébabel-loader), pour charger d'autres fichiers, vous devez installer un autre chargeur , par exemple : css-loader file-loader

Plugin est une extension du webpack fonction Oui, grâce au plugin , webpack peut réaliser des fonctions complexes qui ne peuvent pas être complétées par loader

Comment améliorer les performances des pages ? Quelles sont les optimisations de performances ?

A quoi sert Node ? >Webpack

: entrée, sortie, chargeur, plug-in

Parlez-moi du packaging principe de

webpack

Webpack

traite le projet dans son ensemble En donnant un fichier principal, webpack démarrera à partir de ce fichier principal. Tous les fichiers dépendants du projet sont traités à l'aide de la classe

loaders

, et finalement empaquetés dans un ou plusieurs navigateurs. -fichiers js reconnaissables Commonjs ES6 différence de module ?

common

Le module est une copie et la valeur peut être modifiée. Le es6 le module est une référence. Statut en lecture seule, la valeur ne peut pas être modifiée

• commonjs le module est chargé au moment de l'exécution, es6Les modules sont des interfaces de sortie au moment de la compilation

• Comment utiliser Git/quelles sont les commandes courantesQue fait la technologie que vous utilisez dans le backendVous Pourquoi utilisez-vous toujours Vue Family Bucket pour un projet relativement petit Veuillez décrire brièvement le framework d'interface utilisateur que vous utilisez dans le projet

  Le plus il y a de façons d'optimiser les performances front-end, mieux c'est

Qu'est-ce que cors

Parlez de votre compréhension de

websocked

Websocked

est un protocole de communication bidirectionnel, après avoir établi une connexion, websocked le serveur et le navigateur peuvent activement s'envoyer ou recevoir des données, websocked

requis Les clients et serveurs similaires à tcp sont connectés via une poignée de main seulement après la connexion. est réussi, peuvent-ils communiquer entre eux. Les données transmises en arrière-plan sont cellesParlez des différences entre Ajax , fetch

,

axios Processus de projet dans l'entreprise1. Processus de développement de projet WEB front-endAnalyse des exigences du projet

Ce lien est complété par le projet Le chef de projet communique d'abord avec le client pour comprendre ses besoins, puis analyse la faisabilité du projet. Si le projet peut être réalisé, le chef de projet rédige les exigences du projet. Le document est remis au concepteur. compléter le développement ultérieur.

---

Conception des pages/

Sélection des projets

Ce lien implique principalement les concepteurs d'interface utilisateur. Les concepteurs d'interface utilisateur analysent les documents en fonction des exigences du produit et conçoivent le style artistique global, la conception de l'interaction, la structure de l'interface, le processus de fonctionnement, etc. Responsable de la conception et de la production de diverses interfaces interactives, icônes, LOGOs, boutons et autres éléments connexes dans le projet. Et assurez-vous d'utiliser la technologie

codage

Cette partie est implémentée par les programmeurs. (Les programmeurs sont divisés en ingénieurs de développement WEB front-end et ingénieurs de développement back-end. Les développeurs front-end font principalement les pages que nous pouvons voir sur la page Web, tandis que le back-end fait certains systèmes de gestion et implémentations de fonctions que nous ne pouvons pas voir.) Les programmeurs travaillent sur l'interface utilisateur selon la conception du concepteur utilise le codage pour remplir diverses fonctions de l'ensemble du projet.

Tests

Cette partie est complétée par le testeur du programme. Les testeurs de programmes testent principalement pour trouver les bogues qui existent encore dans le programme. De manière générale, il existe des problèmes avec les programmes qui viennent d'être codés. Les testeurs doivent tester à plusieurs reprises et transmettre les résultats des tests problématiques aux codeurs pour corriger les bogues. Lorsque presque toutes les corrections de bugs sont terminées, le projet est presque prêt à être mis en ligne.

Maintenance

La maintenance du programme est la dernière étape de l'ensemble du projet, mais c'est aussi l'étape la plus longue et la plus coûteuse. La maintenance du programme comprend les corrections de bogues ultérieures et les mises à jour de la version du programme après le lancement du programme.

2. Changer le nom de domaine de l'interface

signifie que l'interface d'arrière-plan appelée lors du développement est l'interface pour les tests en arrière-plan. Une fois le projet mis en ligne, l'interface demandée doit être remplacée par le domaine en ligne. nom

3. Outils fréquemment utilisés

Plateforme de gestion de code : nuage de code github

Plateforme de publication des exigences : tâche DingTalk, ZenTao

Plateforme d'interaction Ui : Bleu Lake

Outil de prototype de produit : axure

E-mail d'entreprise : e-mail d'entreprise d'Alibaba Tencent

Langage backend : java php python (pas beaucoup à Xi'an)

4. Grandes entreprises et petites entreprises Différences dans le développement de l'entreprise

Les grandes entreprises d'externalisation sont plus axées sur les processus, disposent de plus de personnel et ont moins de communication. Elles n'ont pas besoin de maintenir elles-mêmes le projet après la livraison et de l'adopter. le modèle de développement en cascade (basé sur des documents)

Petites entreprises : peu de personnes, changements fréquents, communication facile et développement agile (lancer rapidement la version v1, puis itérer)

5. la séparation du front et du backend ?

Question étrange

---

Qu'utilisez-vous pour le développement back-end ?

Comment rafraîchir la page sur mobile ?

Initialisation du projet et processus de construction

De quoi êtes-vous fier dans le projet ?

Parlez-moi de vos lacunes

Qu'est-ce qu'un déploiement à chaud ?

Combien d'utilisateurs y a-t-il

Comment appeler l'interface (comment communiquer avec le backend)

Comment faire des tests cellulaires

Comment gérez-vous les variables d'environnement de l'environnement de développement, de l'environnement de test et de l'environnement en ligne pendant le développement ?

Pour plus de connaissances liées à la programmation, veuillez visite : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!