Maison interface Web tutoriel HTML qu'est-ce que le front-end

qu'est-ce que le front-end

Feb 26, 2018 am 09:58 AM
Quoi 前端


Cette fois, je vais vous expliquer ce qu'est le front-end et une explication détaillée du concept du front-end. Jetons un coup d'œil.

Je discutais avec mon cousin pendant le Nouvel An chinois. Il m'a dit qu'il avait déjà écrit des pages Web en HTML, JS et CSS, alors quelle était la différence entre le front-end d'aujourd'hui et de cette époque ? Je lui ai présenté le front-end à ce moment-là.

Mais ma compréhension du front-end n'était pas très approfondie à cette époque, donc j'avais l'impression de ne pas l'expliquer clairement.

Au fur et à mesure que mon propre apprentissage s'approfondit, je pense qu'il est nécessaire de résumer un article de blog sur les différences entre le front-end et l'écriture de pages Web. En même temps, je souhaite également enregistrer mes opinions et mes compréhensions actuelles. Lorsque j'y reviendrai après un certain temps, j'obtiendrai certainement de nombreuses informations sur ma propre amélioration.

En raison de mon niveau de connaissances limité, s'il y a des erreurs, merci de les signaler dans la zone commentaire, merci !

L'ère du développement Web

À cette époque, les gens écrivaient des pages Web en HTML et ajustaient les styles avec js et css.

Ce que nous avons appris de divers livres classiques "Head First HTML and CSS", "Mastering CSS: Advanced Web Standard Solutions" et "JavaScriptAdvanced Programming" sont essentiellement ces aspects des choses. La plupart des vidéos sur MOOC se limitent à cet aspect.

L'ère des modèles Web

À mesure que la complexité des pages Web augmente, les programmeurs développent divers langages de modèles Web pour faciliter le développement.

Par exemple, moins le langage simplifie l'écriture du CSS, coffeejs simplifie l'écriture du js, et il existe de nombreux modèles différents qui sont mélangés avec du HTML et du js.

L'ère Ajax

Avec le développement de js, l'invention de XHR permet aux programmeurs de traiter les données sur le front-end et de partager une partie du travail back-end.

Un bon exemple est la Validation du formulaireAh, le curseur du navigateur glisse vers le bas avant de commencer à charger les images, etc.

Ère SPA

SPA=Application à page unique.

Avec le développement d'ajax, les gens peuvent effectuer le traitement des données côté navigateur, ce qui signifie que le front-end peut écrire une application entière, c'est-à-dire SPA.

À l'ère du SPA, les programmeurs utilisaient js pour gérer toute la partie front-end. Les utilisateurs téléchargeaient tous les js lorsqu'ils ouvraient le site Web, lors d'interactions ultérieures telles que l'ouverture de pages, ils utilisaient js directement du côté du navigateur. Traitement, pas besoin d'envoyer une requête http au serveur.

Un concept très important en ce moment est le routage Puisque la requête http n'est pas envoyée à l'ouverture de la page, le navigateur ne sait pas quoi faire avec une URL. À l’heure actuelle, il doit y avoir un mécanisme pour guider le navigateur afin qu’il ouvre quel contenu sur quelle URL il est acheminé.

Ère MVC

Avec le développement de l'ère SPA, les gens divisent souvent les projets en différents modules pour faciliter le développement. Le plus typique est MVC, c'est-à-dire modèle, vue et contrôle.

Divers frameworks ont émergé à cette époque, tels que le framework backbone, etc.

MVVM Era

Étant donné que le module de contrôle de MVC est généralement traité par le serveur, cela n'appartient pas au contenu front-end. Afin de résoudre ce problème, des personnes ont proposé une solution consistant à utiliser un modèle de vue au lieu du contrôle. C'est l'origine du framework MVVM. La technologie mise en œuvre est appelée liaison bidirectionnelle.

Des frameworks front-end modernes sont apparus à cette époque : reactjs, angularjs, etc. À l'heure actuelle, les ingénieurs front-end peuvent déjà développer des logiciels qui s'exécutent sur le navigateur et qui sont identiques aux logiciels d'application, y compris sur les navigateurs mobiles.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Deux méthodes pour implémenter la disposition du flux en cascade

Explication détaillée du processus de rendu du navigateur

Quelle est l'importance du défilement par débordement

Quelles sont les solutions de mise en page pour les terminaux mobiles en HTML

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment configurer la fonction de démarrage du clavier sur une carte mère GIGABYTE (activer le mode de démarrage du clavier sur la carte mère GIGABYTE) Comment configurer la fonction de démarrage du clavier sur une carte mère GIGABYTE (activer le mode de démarrage du clavier sur la carte mère GIGABYTE) Dec 31, 2023 pm 05:15 PM

Comment configurer le démarrage du clavier sur la carte mère de Gigabyte Tout d'abord, s'il doit prendre en charge le démarrage du clavier, il doit s'agir d'un clavier PS2 ! ! Les étapes de configuration sont les suivantes : Étape 1 : appuyez sur Suppr ou F2 pour entrer dans le BIOS après le démarrage, et entrez dans le mode avancé (avancé) du BIOS. Les cartes mères ordinaires entrent dans le mode EZ (facile) de la carte mère par défaut. pour appuyer sur F7 pour passer au mode avancé. Les cartes mères de la série ROG entrent dans le BIOS par défaut (nous utilisons le chinois simplifié pour démontrer) Étape 2 : Sélectionnez - [Avancé] - [Gestion avancée de l'alimentation (APM)] Étape 3 : Recherchez l'option [Réveil par le clavier PS2] Étape 4 : Cette option est désactivée par défaut. Après avoir tiré vers le bas, vous pouvez voir trois options de configuration différentes, à savoir appuyer sur [barre d'espace] pour allumer l'ordinateur, appuyer sur groupe.

Quelle est la meilleure carte graphique pour i7 3770 ? Quelle est la meilleure carte graphique pour i7 3770 ? Dec 29, 2023 am 09:12 AM

Quelle carte graphique est bonne pour le Core i73770 ? La RTX3070 est une carte graphique très puissante avec d'excellentes performances et une technologie avancée. Que vous jouiez à des jeux, rendiez des graphiques ou effectuiez du machine learning, le RTX3070 peut le gérer facilement. Il utilise l'architecture Ampere de NVIDIA, dispose de 5888 cœurs CUDA et de 8 Go de mémoire GDDR6, ce qui peut offrir une expérience de jeu fluide et des effets graphiques de haute qualité. Le RTX3070 prend également en charge la technologie de lancer de rayons, qui peut présenter des effets de lumière et d'ombre réalistes. Dans l’ensemble, la RTX3070 est une carte graphique puissante et avancée adaptée à ceux qui recherchent des performances et une qualité élevées. RTX3070 est une carte graphique de la série NVIDIA. Utilisation de NVIDIA de 2e génération

Choisir la bonne tablette pour les étudiants en musique Choisir la bonne tablette pour les étudiants en musique Jan 10, 2024 pm 10:09 PM

Quelle tablette convient aux musiciens ? Le haut-parleur de 12,9 pouces de l’iPad de Huawei est un très bon produit. Il est livré avec quatre haut-parleurs et le son est excellent. De plus, il appartient à la série pro, qui est légèrement meilleure que les autres styles. Dans l’ensemble, l’iPad Pro est un très bon produit. Le haut-parleur de ce téléphone mobile mini4 est petit et l'effet est moyen. Il ne peut pas être utilisé pour écouter de la musique en externe, vous devez quand même compter sur des écouteurs pour profiter de la musique. Des écouteurs avec une bonne qualité sonore auront un effet légèrement meilleur, mais des écouteurs bon marché d'une valeur de trente ou quarante yuans ne peuvent pas répondre aux exigences. Quelle tablette dois-je utiliser pour écouter de la musique de piano électronique ? Si vous souhaitez acheter un iPad de plus de 10 pouces, je vous recommande d'utiliser deux applications, à savoir Henle et Piascore. Fourni par Henle

PHP et Vue : une combinaison parfaite d'outils de développement front-end PHP et Vue : une combinaison parfaite d'outils de développement front-end Mar 16, 2024 pm 12:09 PM

PHP et Vue : une combinaison parfaite d'outils de développement front-end À l'ère actuelle de développement rapide d'Internet, le développement front-end est devenu de plus en plus important. Alors que les utilisateurs ont des exigences de plus en plus élevées en matière d’expérience des sites Web et des applications, les développeurs front-end doivent utiliser des outils plus efficaces et plus flexibles pour créer des interfaces réactives et interactives. En tant que deux technologies importantes dans le domaine du développement front-end, PHP et Vue.js peuvent être considérés comme une arme parfaite lorsqu'ils sont associés. Cet article explorera la combinaison de PHP et Vue, ainsi que des exemples de code détaillés pour aider les lecteurs à mieux comprendre et appliquer ces deux éléments.

Choisissez la version du pilote qui convient à votre RX580 Choisissez la version du pilote qui convient à votre RX580 Dec 29, 2023 pm 05:34 PM

Quel pilote est bon à installer sur le rx5808g ? 20.5.1 et 20.4.2WHQL font référence au numéro de version du logiciel ou du pilote. Ces numéros de version sont généralement utilisés pour identifier les mises à jour ou les correctifs des logiciels ou des pilotes. Dans le monde informatique, WHQL signifie Windows Hardware Quality Labs, qui est une institution utilisée par Microsoft pour tester et vérifier la conformité et la stabilité du matériel et des pilotes. Par conséquent, 20.5.1 et 20.4.2WHQL indiquent que ces logiciels ou pilotes ont réussi les tests et la vérification de Microsoft et peuvent être utilisés en toute sécurité dans le système d'exploitation Windows. Les pilotes relativement stables de la carte graphique AMDrx580 20.5.1 et 20.4.2WHQL font référence au numéro de version du logiciel ou du pilote. Ces numéros de version sont transmis

Quels jeux conviennent pour jouer avec des graphiques indépendants i34150 et 1G (quels jeux conviennent pour i34150) Quels jeux conviennent pour jouer avec des graphiques indépendants i34150 et 1G (quels jeux conviennent pour i34150) Jan 05, 2024 pm 08:24 PM

À quels jeux peut-on jouer avec le i34150 avec des graphiques indépendants 1G ? Peut-il jouer à de petits jeux tels que LoL ? GTX750 et GTX750TI sont des choix de cartes graphiques très adaptés. Si vous jouez simplement à quelques petits jeux ou ne jouez pas à des jeux, il est recommandé d'utiliser la carte graphique intégrée i34150. D’une manière générale, la différence de prix entre les cartes graphiques et les processeurs n’est pas très grande, il est donc important de choisir une combinaison raisonnable. Si vous avez besoin de 2 Go de mémoire vidéo, il est recommandé de choisir GTX750TI ; si vous n'avez besoin que de 1 Go de mémoire vidéo, choisissez simplement GTX750. La GTX750TI peut être considérée comme une version améliorée de la GTX750, avec des capacités d'overclocking. La carte graphique pouvant être associée au i34150 dépend de vos besoins. Si vous envisagez de jouer à des jeux autonomes, il est recommandé d'envisager de changer de carte graphique. tu peux choisir

Questions fréquemment posées par les enquêteurs front-end Questions fréquemment posées par les enquêteurs front-end Mar 19, 2024 pm 02:24 PM

Lors des entretiens de développement front-end, les questions courantes couvrent un large éventail de sujets, notamment les bases HTML/CSS, les bases JavaScript, les frameworks et les bibliothèques, l'expérience du projet, les algorithmes et les structures de données, l'optimisation des performances, les requêtes inter-domaines, l'ingénierie front-end, les modèles de conception et les nouvelles technologies et tendances. Les questions de l'intervieweur sont conçues pour évaluer les compétences techniques du candidat, son expérience en matière de projet et sa compréhension des tendances du secteur. Par conséquent, les candidats doivent être parfaitement préparés dans ces domaines pour démontrer leurs capacités et leur expertise.

Quelle est la fonction de Cortana ? Quelle est la fonction de Cortana ? Jan 15, 2024 pm 10:15 PM

Lors de l'utilisation du système d'exploitation Windows 10 développé par Microsoft, de nombreux utilisateurs sont curieux et confus au sujet de la nouvelle technologie appelée Cortana. Le nom officiel de Cortana dans le contexte chinois est « Cortana », qui est en fait une fonction intégrée de Windows. 10. Cortana, un programme de service d'intelligence artificielle (AIassistant). Questions et solutions fréquemment posées. Comment ouvrir Cortana et ne pas répondre. La solution chinoise n'est pas prise en charge. Comment mettre le champ de recherche dans Cortana. ? Réponse : « Cortana » Il s'agit d'un assistant personnel intelligent de plate-forme cloud soigneusement construit par Microsoft. Il dispose de deux modes d'utilisation : connexion et non-connexion. Lorsque vous êtes connecté

See all articles