Maison >interface Web >tutoriel HTML >qu'est-ce que le front-end
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!