Les connaissances et notes les plus détaillées de Vue
WBOY
Libérer： 2021-12-20 11:14:59
avant
3754 Les gens l'ont consulté
Cet article vous apporte la connaissance la plus complète et la plus détaillée de Vue Afin de réaliser le front-end, de comprendre le front-end et de maîtriser le front-end, j'espère qu'il sera utile à tout le monde !
1. Analyse principale du front-end
1.1. Présentation générale
Principe Soc : principe de séparation des préoccupations
La bibliothèque principale de Vue se concentre uniquement sur la couche de vue, ce qui facilite l'intégration avec des bibliothèques tierces ou existantes. projets.
HTML + CSS + JS : View : 给用户看，刷新后台给的数据
Communication réseau : axios
Saut de page : vue-router
Gestion de l'état : vuex
Vue-UI : ICE, Element UI
1.2, trois éléments front-end
HTML (structure) : Hyper Text Markup Language (Hyper Text Markup Language), détermine la structure et le contenu de la page Web
CSS (expression) : Feuilles de style en cascade (Cascading Style Sheets), définit le style de présentation du page web.
JavaScript (comportement) : C'est un langage de script faiblement typé. Son code source n'a pas besoin d'être compilé, mais est interprété et exécuté par le navigateur. Il est utilisé pour contrôler le comportement des pages Web
1.3, . Couche structurelle (HTML)
Trop simple, légèrement
1.4. Couche de présentation (CSS)
La feuille de style en cascade CSS est un langage de balisage, pas un langage de programmation, vous ne pouvez donc pas personnaliser les variables, les références, etc. , il n'a aucun support de syntaxe, ses principaux défauts sont les suivants :
La syntaxe n'est pas assez puissante, par exemple, elle ne peut pas être imbriquée, ce qui entraîne la nécessité d'écrire de nombreux sélecteurs répétés en développement modulaire
Là ; il n'y a pas de mécanisme de réutilisation de style variable et raisonnable, ce qui rend les valeurs d'attribut logiquement liées doivent être générées à plusieurs reprises sous forme de littéraux, ce qui rend la maintenance difficile ; Cela a entraîné une augmentation déraisonnable de notre charge de travail. Afin de résoudre ce problème, les développeurs front-end utiliseront un outil appelé [Préprocesseur CSS] pour fournir un mécanisme de réutilisation des couches de style manquant dans CSS, réduire le code redondant et améliorer la maintenabilité du code de style. Cela améliore considérablement l’efficacité du développement de styles front-end.
Qu'est-ce que le préprocesseur CSS
Le préprocesseur CSS définit un nouveau langage L'idée de base est d'utiliser un langage de programmation spécialisé pour ajouter certaines fonctionnalités de programmation au CSS, en traitant le CSS comme si la cible génère le fichier, puis le développeur uniquement. doit utiliser ce langage pour coder le CSS. Traduit en mots faciles à comprendre, cela signifie "Utilisez un langage de programmation spécial pour concevoir le style de la page Web, puis convertissez-le en un fichier CSS normal via un compilateur pour une utilisation dans le projet".
Quels sont les préprocesseurs CSS couramment utilisés ?
SASS : Basé sur Ruby, grâce au traitement côté serveur, il est puissant. Haute efficacité d’analyse. Vous devez apprendre le langage Ruby, qui est plus difficile à démarrer que LESS.
LESS : Basé sur NodeJS, traité via le client, facile à utiliser. La fonction est plus simple que SASS et l'efficacité de l'analyse est également inférieure à celle de SASS, mais elle est suffisante dans le développement réel, donc si notre personnel backend en a besoin, il est recommandé d'utiliser LESS.
1.5. Couche de comportement (JavaScript)
JavaScript est un langage de script faiblement typé. Son code source n'a pas besoin d'être compilé avant d'être envoyé au client pour exécution. Au lieu de cela, le code de caractères au format texte est envoyé au client. navigateur et le navigateur L'interpréteur s'exécute.
Développement Natif Native JS
Le développement Natif JS signifie que nous suivons la méthode de développement standard [ECMAScript], appelée ES, qui est prise en charge par tous les navigateurs. À l'heure actuelle, la norme ES a publié les versions suivantes :
ES3
ES4 (interne, non officiellement publiée)
ES5 (prise en charge complète du navigateur)
ES6 (couramment utilisée, version grand public actuelle : l'emballage du webpack devient ES5 support)
ES7
ES8
ES9 (étape de brouillon)
La différence est que de nouvelles fonctionnalités sont ajoutées progressivement. TypeScript Le standard de Microsoft TypeScript est un langage de programmation gratuit et open source développé par Microsoft. Il s'agit d'un sur-ensemble de JavaScript qui ajoute essentiellement au langage un typage statique facultatif et une programmation orientée objet basée sur les classes. Dirigé par Anders Helsberg (père de C#, Delphi, TypeScript ; fondateur de .NET). La caractéristique de ce langage est qu'en plus des fonctionnalités d'ES, il intègre également de nombreuses nouvelles fonctionnalités qui ne rentrent pas dans le cadre de la norme. Par conséquent, de nombreux navigateurs ne peuvent pas prendre directement en charge la syntaxe TypeScript et doivent être compilés (compilés en JS). avant qu'il puisse être correctement exécuté par le navigateur.
Cadre JavaScript
JQuery : Une bibliothèque JavaScript bien connue. L'avantage est qu'elle simplifie les opérations DOM. L'inconvénient est que les opérations DOM sont trop fréquentes, ce qui affecte les performances front-end, ce n'est qu'avant ; compatible avec IE6, 7 et 8 ;
Angular : acquis par Google Le framework front-end a été développé par un groupe de programmeurs Java. Il se caractérise par le déplacement du modèle MVC back-end vers le front-end et l'ajout du concept. de développement modulaire. Il coopère avec Microsoft et adopte le développement de la syntaxe TypeScript ; il est convivial pour les programmeurs back-end et n'est pas très convivial pour les programmeurs front-end ; l'itération des versions est déraisonnable (comme la génération 1 -> génération 2, à part le nom, ce sont essentiellement deux choses ; Angular6 a été lancé au moment de la publication du blog)
React : produit par Facebook, un outil performant Framework front-end JS ; sa caractéristique est qu'il propose un nouveau concept [DOM virtuel] pour réduire les opérations DOM réelles et simuler les opérations DOM en mémoire, améliorant efficacement l'efficacité du rendu front-end ; nécessite un apprentissage supplémentaire Un langage [JSX] ;
Vue : un framework JavaScript progressif signifie la mise en œuvre progressive de nouvelles fonctionnalités, telles que le développement modulaire, le routage, la gestion des états et d'autres nouvelles fonctionnalités. Sa particularité est qu'il combine les avantages d'Angular (modularité) et de React (DOM virtuel)
Axios : framework de communication front-end car les limites de Vue sont très claires, il s'agit de traiter le DOM, il n'a donc pas capacités de communication, qui sont nécessaires en ce moment Un cadre de communication supplémentaire est utilisé pour interagir avec le serveur ; bien sûr, vous pouvez également choisir directement d'utiliser la fonction de communication AJAX fournie par jQuery
2. Historique de développement front-end
;
2.1, framework UI
Ant-Design : produit par Alibaba, basé sur le framework React UI
ElementUI, iview, ice : produit par Ele.me, un framework UI basé sur Vue
BootStrap : une boîte à outils open source pour développement front-end lancé par Teitter
AmazeUI : également appelé "Sister UI", un framework front-end multi-écran HTML5
2.2, outil de création JavaScript
Babel : outil de compilation JS, principalement utilisé pour les nouvelles fonctionnalités ES que les navigateurs ne prennent pas en charge, comme la compilation de TypeScript
WebPack : module packager, la fonction principale est l'empaquetage, la compression, la fusion et le chargement séquentiel
Remarque : les points de connaissances ci-dessus ont trié toutes les compétences requises pour le développement de WebApp
2.3. Les trois extrémités sont les mêmes
Développement hybride(Hybrid App)
L'objectif principal est d'atteindre un Les trois terminaux de l'ensemble de codes sont unifiés (PC, Android : .apk, iOS : .ipa) et peut être appelé sur le matériel sous-jacent de l'appareil (tel que les capteurs, le GPS, les caméras, etc.). Il existe deux méthodes de packaging principales :
Packaging Cloud : HBuild ->
Emballage local : Cordova (anciennement PhoneGap)
Applet WeChat
Pour plus de détails, veuillez consulter le site officiel de WeChat. Voici un framework qui facilite le développement de l'interface utilisateur de l'applet WeChat : WeUI2.4, technologie back-end. Le personnel front-end doit également maîtriser certaines technologies back-end afin de faciliter le développement. Cependant, notre personnel back-end Java sait que le système de connaissances back-end est extrêmement vaste et complexe, donc afin de faciliter le front-end. personnel final pour développer des applications back-end, Node JS est apparu Une telle technologie. L'auteur de Node JS a affirmé abandonner Node JS (en disant que l'architecture n'est pas bien faite et que les modules de nœuds lourds peuvent rendre l'auteur mécontent) et a commencé à développer une nouvelle architecture De no
Puisqu'il s'agit d'une technologie d'arrière-plan, elle a définitivement besoin d'un framework Et des outils de gestion de projet, le framework Node JS et les outils de gestion de projet sont les suivants :
Express : framework Node JS
Koa : version simplifiée Express
NPM : un outil de gestion de projet complet, similaire à Maven
YARN : une alternative à NPM, similaire à la relation entre Maven et Gradle
2.5, le framework front-end grand publicVue.js
iView
iview est une puissante bibliothèque d'interface utilisateur basée sur Vue. de nombreux composants de base pratiques qui sont plus avancés que les composants Element ui Rich, servant principalement des produits milieu et back-end pour les interfaces PC. Le modèle de développement de composants Vue utilisant un seul fichier est développé sur la base de npm+webpack+babel, prend en charge l'API ES 2015 de haute qualité, riche en fonctionnalités et conviviale, et utilise l'espace librement et de manière flexible.
Adresse officielle du site Web
Github
iview-admin
Remarques : Il s'agit d'un framework grand public frontal et peut être pris en compte lors de la sélection. La caractéristique principale est qu'il prend en charge davantage de terminaux mobiles
Element. UI
Element est La bibliothèque de composants Vue UI maintenue par l'open source front-end d'Ele.me possède un ensemble complet de composants et couvre essentiellement tous les composants nécessaires dans le backend. La documentation l'explique en détail et est riche en exemples. Principalement utilisée pour développer des pages côté PC, il s'agit d'une bibliothèque de composants Vue UI de relativement haute qualité.
·Adresse officielle du site Web ·Git hub ·vue-element-admin
Remarque : il appartient au framework front-end grand public et peut être pris en compte lors de la sélection. La caractéristique principale est qu'il a davantage de support de bureau
. ICE
Feibing est Les solutions applicatives mid- et back-end de l'équipe Alibaba basées sur React/Angular/Vue sont déjà utilisées par plus de 270 projets de presque toutes les BU d'Alibaba. Feibing inclut un lien complet depuis la conception jusqu'à la fin du développement, aidant les utilisateurs à créer rapidement leurs propres applications mid-end et back-end.
Adresse officielle du site.
Hub Git
Remarque : les principaux composants sont toujours basés sur React. Au 17 février 2019, le support de Vue n'est pas encore terminé avant la mise à jour du blog. Il est encore en phase d'attente
. VantUI
Vant UI est un front-end qui fait l'éloge. La bibliothèque de composants Vue implémentée par l'équipe sur la base des spécifications unifiées de Youzan fournit un ensemble complet de composants de base et de composants métier de l'interface utilisateur. Grâce à Vant, vous pouvez créer rapidement une page avec un style unifié et améliorer l'efficacité du développement.
Adresse officielle du site Web
Github
AtUI
at-ui est une bibliothèque de composants d'interface utilisateur frontale basée sur Vue 2.x, principalement utilisée pour le développement rapide de produits de sites Web PC. Il fournit un ensemble de flux de travail de développement frontal npm+webpack+babel, le style CSS est indépendant et un style d'interface utilisateur unifié peut être conservé même si différents frameworks sont utilisés. ·Adresse officielle du site Web ·Git hub
Cube Ul
cube-ui est une bibliothèque de composants mobiles exquise basée sur Vue js développée par l'équipe Didi. Il prend en charge l'introduction et la post-compilation à la demande, est léger et flexible, présente une forte évolutivité et peut facilement mettre en œuvre un développement secondaire basé sur les composants existants.
Adresse officielle du site Web
Github
Développement hybride
Flutter
Flutter est le framework d'interface utilisateur mobile de Google, qui peut créer des applications natives de haute qualité sur Android et iOS en très peu de temps. Flutter fonctionne avec le code existant, il est utilisé par les développeurs et les organisations du monde entier, et Flutter est gratuit et open source.
Adresse officielle du site Web
Github Remarques : Produit par Google, la fonctionnalité principale est de créer rapidement des applications APP natives. Si vous créez des applications hybrides, ce framework est un framework incontournable
lonic.
lonic est à la fois un framework CSS et une bibliothèque d'interface utilisateur Javascript, lonic est actuellement le framework de développement d'applications mobiles HTML 5 le plus prometteur. Créez des applications via SASS, qui fournit de nombreux composants d'interface utilisateur pour aider les développeurs à développer des applications puissantes. Il utilise le framework JavaScript MV VM et Angular JS/Vue pour améliorer l'application. Fournit une liaison bidirectionnelle des données, ce qui en fait un choix courant pour les développeurs Web et mobiles.
Adresse officielle du site Web
·Document officiel ·Git hub
Applet WeChat
mpvue
mpvue est un petit programme développé par Meituan utilisant Vue.js -end framework prend actuellement en charge les mini-programmes WeChat, les mini-programmes intelligents Baidu, les mini-programmes Toutiao et les mini-programmes Alipay. Le framework est basé sur Vue.js, et le framework d'exécution modifié runtime et le compilateur de code compiler sont implémentés afin qu'il puisse s'exécuter dans un petit environnement de programme. , introduisant ainsi l'expérience de développement Vue.js pour le développement de petits programmes. Vue.js开发小程序的前端框架， 目前支持微信小程序、百度智能小程序，头条小程序和支付宝小程序。框架基于Vue.js， 修改了的运行时框架runtime和代码编译器compiler实现， 使其可运行在小程序环境中， 从而为小程序开发引入了Vue.js开发体验。 ·官网地址 ·Git hub 备注：完备的Vue开发体验， 井且支持多平台的小程序开发， 推荐使用
为了降低开发的复杂度， 以后端为出发点， 比如：Struts、Spring MVC等框架的使用， 就是后端的MVC时代； 以SpringMVC ·Adresse du site Web officiel ·Git hub
Remarques : Une expérience complète de développement Vue et prend en charge le développement de mini-programmes multiplateformes Il est recommandé d'utiliser 🎜🎜🎜🎜WeUI🎜🎜🎜WeUI est un ensemble de fondations cohérentes avec WeChat. expérience visuelle native La bibliothèque de styles est conçue sur mesure par l'équipe de conception officielle de WeChat pour les pages Web WeChat et les mini-programmes WeChat, rendant la perception d'utilisation des utilisateurs plus unifiée. Contient divers éléments tels qu'un bouton, une cellule, une boîte de dialogue, un toast, un article, une icône, etc. 🎜🎜🎜Adresse du site officiel🎜🎜Github🎜🎜
3. Comprendre l'histoire évolutive de la séparation avant-arrière
🎜Pourquoi la séparation avant-arrière est nécessaire🎜
3.1. ère MVC orientée
🎜Afin de réduire La complexité du développement est basée sur le back-end. Par exemple, l'utilisation de Struts, Spring MVC et d'autres frameworks est l'ère MVC du back-end ; le processus SpringMVC à titre d'exemple : 🎜🎜🎜
Initiez une requête au contrôleur frontal (Dispatcher Servlet)Dispatcher Servlet)
Le contrôleur frontal demande à HandlerMapping de trouver Handler, qui peut être basé sur la configuration xml, annotation à la recherche<li>
<br>Le mappeur de processeur <code>HandlerMapping renvoie le Handler au contrôleur frontalLe front-end le contrôleur appelle l'adaptateur de processeur pour exécuter Handler
L'adaptateur de processeur exécute HandlerHandler et retourne à l'adaptateur ModelAndView code> après la fin de l'exécution
L'adaptateur de processeur contrôle le front-end Le processeur renvoie ModelAndView, ModelAndView est un objet sous-jacent du framework SpringMvc , y compris Model et Viewcode>
Le contrôleur frontal demande à l'analyseur de vue d'effectuer une analyse de vue et l'analyse dans une vue réelle (JSP code>) en fonction du nom de la vue logique. L'analyseur de vue renvoie <code>View
Le contrôleur frontal effectue le rendu de la vue, et le rendu de la vue remplit les données du modèle (dans le ModelAndView) dans le champ request
Le contrôleur frontal répond à l'utilisateur avec les résultats
Avantages
MVC est un très bon modèle de collaboration qui peut efficacement réduisez le couplage du code et permettez aux développeurs de comprendre où le code doit être écrit architecturalement. Afin de rendre la vue plus pure, vous pouvez également utiliser des moteurs de modèles tels que Thyme leaf et Free Marker pour empêcher l'écriture de code Java dans le modèle et rendre plus claire la division du travail entre le front-end et le back-end. Inconvénients
Le développement front-end repose fortement sur l'environnement de développement et l'efficacité du développement est faible. Sous cette architecture, il existe deux modes de collaboration front-end et back-end : Le premier consiste à écrire une DÉMO. Sur le front - end , laissez le back - end définir le modèle . L’avantage est que DEMO peut être développé localement et est très efficace. L'inconvénient est que le back-end doit configurer le modèle, ce qui peut être erroné. Une fois la configuration terminée, il doit être confirmé par le front-end. Le coût des échanges et des ajustements. est relativement important ;
Un autre mode de collaboration est que le front-end est responsable de tout le développement côté navigateur et de la couche Vue côté serveur. L'avantage est que les codes liés à l'interface utilisateur peuvent être écrits sur le front-end, et vous n'avez pas besoin de prêter trop d'attention au back-end. L'inconvénient est que le développement front-end est fortement lié à l'environnement back-end. et l'environnement est devenu un facteur important affectant l'efficacité du développement front-end. Responsabilités front-end et back-end enchevêtrées : le moteur de modèles est puissant et peut toujours implémenter diverses logiques métier grâce aux variables de contexte qu'il obtient. De cette façon, tant que le front-end est faible, le back-end devra souvent écrire beaucoup de code métier dans la couche modèle. Il existe également une grande zone grise dans les fonctions du contrôleur telles que le routage des pages. devraient être les plus préoccupés par le front-end, mais ils le sont implémentés par le backend. Le contrôleur lui-même et le modèle sont souvent intriqués, et le code métier qui fait grincer des dents apparaît souvent dans la couche contrôleur. Ces problèmes ne peuvent pas tous être attribués à la qualité des programmeurs, sinon JSP suffira. Limitations sur le front-end : Si l'optimisation des performances se fait uniquement sur le front-end, l'espace est très limité, nous avons donc souvent besoin d'une coopération back-end. Cependant, en raison des limites du framework back-end, cela est nécessaire. Il nous est difficile d'utiliser des solutions techniques telles que [Comet] et [Big Pipe] pour optimiser les performances. Remarque : Durant cette période (avant 2005), y compris les premiers JSP et PHP, on peut l'appeler l'ère du Web 1.0. Je veux dire quelque chose ici, si vous êtes un débutant en Java, arrêtez de prendre au sérieux certaines anciennes technologies, comme JSP, car les temps changent, la technologie change et tout change (citant Zuckerberg (Un dicton célèbre : la seule constante c'est le changement lui-même) lorsque nous allons à l'université pour une formation pratique, certains étudiants penseront que nous ne parlons d'aucune information utile. En fait, ce n'est pas le cas. la cognition est bonne pour le marché. On dit juste qu'elle est obsolète depuis longtemps
🎜3.2 L'ère SPA basée sur AJAX🎜🎜De retour en 2005, A OAX (JavaScript et XML asynchrones, JavaScript et XML asynchrones, ancienne technologie et nouvelle utilisation) a été officiellement proposé et a commencé à être utilisé. Le CDN est utilisé comme stockage de ressources statiques, de sorte que l'ère de l'application monopage SPA (Single Page Application) est apparue. 🎜🎜🎜🎜Avantages🎜🎜 Dans ce mode, **la division du travail entre le front-end et le back-end est très claire, et le point clé de collaboration entre le front-end et le back-end est l'interface AJAX. **Cela a l'air si merveilleux, mais avec le recul, ce n'est pas très différent de l'ère JSP. La complexité est passée du JSP côté serveur au JavaScript côté navigateur, et le côté navigateur est devenu très compliqué. Semblable à Spring MVC, 🎜À cette époque, l'architecture en couches côté navigateur a commencé à apparaître🎜 : 🎜🎜🎜 Inconvénients🎜
Conventions sur les interfaces front-end et back-end : Si l'interface back-end est en désordre, et si le modèle économique back-end n'est pas assez stable, alors le développement front-end sera très pénible pour de nombreuses équipes ; ont fait des tentatives similaires via des règles d'interface, des plates-formes d'interface, etc. Avec les règles d'interface précipitées avec le back-end, il peut également être utilisé pour simuler des données, afin que le front-end et le back-end puissent réaliser un développement parallèle efficace après s'être mis d'accord sur l'interface.
Contrôle de la complexité du développement front-end : les applications SPA sont pour la plupart fonctionnelles et interactives, et il est normal que le code JavaScript dépasse 100 000 lignes. L'organisation d'une grande quantité de code JS, la liaison à la couche View, etc. ne sont pas des tâches faciles.
MVVM (communication principalement asynchrone) : Model, View, View Model Afin de réduire la complexité du développement front-end, un grand nombre de frameworks front-end ont vu le jour, tels que : Angular JS、React、Vue.js、Ember JS, etc. Le principe général de ces frameworks est de les superposer d'abord par type. Par exemple, Modèles, Contrôleurs, Modèles, puis de les diviser en couches, comme indiqué ci-dessous :
Avantages
Le front-end. et les responsabilités du back-end sont très claires : le front-end fonctionne côté navigateur et le back-end fonctionne côté serveur. Une division claire du travail permet un développement parallèle, la simulation des données de test n'est pas difficile et le front-end peut être développé localement. Le backend peut se concentrer sur le traitement de la logique métier et produire des interfaces RESTful et autres.
La complexité du développement front-end est contrôlable : le code front-end est lourd, mais une superposition raisonnable permet au code front-end de remplir ses fonctions. C'est assez intéressant, aussi simple que la sélection des fonctionnalités du modèle, il y a de nombreux détails auxquels il faut prêter attention. Plus c'est puissant, mieux c'est, quelles sont les restrictions, quelles libertés restent, comment le code doit être organisé, toute cette conception, il faudrait un livre pour l'expliquer.
Le déploiement est relativement indépendant : il peut rapidement améliorer l'expérience produit.Inconvénients
Le code ne peut pas être réutilisé. Par exemple, le backend doit encore effectuer diverses vérifications sur les données et la logique de vérification ne peut pas réutiliser le code côté navigateur. Si elles peuvent être réutilisées, la vérification des données back-end peut être relativement simple.
Entièrement asynchrone, mauvais pour le référencement. Il est souvent nécessaire de mettre en place une solution de downgrade pour un rendu synchrone côté serveur.
Les performances ne sont pas les meilleures, surtout dans l'environnement Internet mobile.
SPA ne peut pas répondre à tous les besoins, et il existe encore un grand nombre d'applications multipages. La conception d'URL nécessite la coopération du backend et ne peut pas être entièrement contrôlée par le frontend.
3.4, l'ère full-stack apportée par Node JS
Le modèle MV* axé sur le front-end a résolu de très nombreux problèmes, mais comme mentionné ci-dessus, il existe encore de nombreuses lacunes. Avec l'essor de Node JS, JavaScript a commencé à pouvoir s'exécuter côté serveur. Cela signifie qu'il peut y avoir un nouveau modèle R&D : Dans ce modèle R&D, les responsabilités du front et du back end sont claires. Pour le front-end, les deux couches d'interface utilisateur remplissent leurs fonctions respectives :
La couche Ul frontale gère la logique d'affichage de la couche du navigateur. Les styles de rendu via CSS, l'ajout de fonctions interactives via JavaScript et la génération HTML peuvent également être placés dans cette couche, en fonction du scénario d'application.
La couche Ul back-end gère le routage, les modèles, l'acquisition de données, les cookies, etc. Grâce au routage, le front-end peut enfin contrôler la conception d'URL de manière indépendante, de sorte qu'il s'agisse d'une application monopage ou d'une application multipage, le front-end peut la contrôler librement. Le backend peut enfin se débarrasser de sa forte concentration sur la présentation et peut plutôt se concentrer sur le développement de la couche de logique métier. Grâce à Node, la couche WebServer est également du code JavaScript, ce qui signifie que certains codes peuvent être réutilisés recto verso. Les scènes nécessitant du référencement peuvent être rendues de manière synchrone côté serveur. Les problèmes de performances causés par un trop grand nombre de requêtes asynchrones peuvent également être atténués. le côté serveur. Les défauts de l’ancien modèle peuvent presque parfaitement être résolus par ce modèle. Par rapport au mode JSP, le mode full-stack semble être une régression, et c'est bien un retour au modèle de développement original, mais c'est un retour en spirale. Le modèle full-stack basé sur Node JS est encore confronté à de nombreux défis :
Le front-end doit avoir une meilleure compréhension de la programmation côté serveur. Par exemple, maîtrise des connaissances réseaux comme TCP/IP.
Communication efficace entre la couche Node JS et la couche Java. En mode Node JS, tout se passe côté serveur. La communication HTTP RESTful peut ne pas être efficace. La communication via SOAP et d'autres méthodes est plus efficace. Tout doit être vérifié.
Une bonne compréhension du département et des niveaux d'exploitation et de maintenance nécessite plus de points de connaissances et d'expérience pratique.
Comment transitionner un grand nombre de problématiques historiques. C’est probablement le plus gros obstacle. Remarque : Après avoir vu cela, je pense que de nombreux étudiants peuvent comprendre pourquoi je dis toujours en classe : « Il est difficile pour le front-end d'apprendre le back-end, mais il est facile pour nous, programmeurs back-end, d'apprendre n'importe quoi. "; c'est parce que nos programmeurs back-end disposent d'un système de connaissances relativement complet. Full stack ! So Easy !
3.5. Résumé
En résumé, il n'y a pas de bon ou de mauvais modèle ou technologie, seulement qu'elle soit adaptée ou non ; Selon le Soc (Principe de séparation des préoccupations), les modèles ci-dessus rendent tous les responsabilités du front et du back-end plus claires, et la division du travail plus raisonnable et efficace. Soc(关注度分离原则)，上面种种模式，都是让前后端的职责更清晰，分工更合理高效。
4.1. Qu'est-ce que MVVMMVVM (Model-View-ViewModel) est un modèle de conception logicielle développé par Microsoft WPF (utilisé pour remplacer WinForm, qui était utilisé dans le passé) Cette technologie est développée par les architectes Ken Cooper et Ted Peters (pour le développement d'applications de bureau) et Silverlight (similaire aux applets Java, pour faire simple, elle exécute WPF sur le navigateur). Il s'agit d'une méthode de programmation basée sur les événements qui). simplifie l'interface utilisateur
. Publié par John Gossman (également l'architecte de WPF et Silverlight) sur son blog en 2005.
MVVM est dérivé du modèle classique MVC (Model-View-Controller). Le cœur de MVVM est la couche ViewModel, qui est responsable de la conversion des objets de données dans le modèle afin de rendre les données plus faciles à gérer et à utiliser. Sa fonction est la suivante :
Cette couche effectue une liaison de données bidirectionnelle avec la couche de vue vers le haut
Interagit vers le bas avec la couche Modèle via des requêtes d'interface pour les données
MVVM est déjà assez mature et est principalement utilisé mais pas seulement dans le développement d'applications réseau. Les frameworks MVVM actuellement populaires incluent Vue.js, Anfular JS
4.2 Pourquoi utiliser MVVM
Le mode MVVM est le même que le mode MVC. L'objectif principal est de séparer les vues. (View ) et model (Model), il existe plusieurs avantages majeurs
faible couplage : View (View) peut changer et se modifier indépendamment du modèle. Un ViewModel peut être lié à différentes vues. Le modèle peut changer, la vue peut également rester inchangée lorsque le modèle change.
Réutilisable : Vous pouvez mettre une logique de vue dans un ViewModel et laisser de nombreuses vues réutiliser cette logique de vue.
Développement indépendant
: les développeurs peuvent se concentrer sur le développement de la logique métier et des données (ViewMode), et les concepteurs peuvent se concentrer sur la conception des pages.
Testable
: L'interface a toujours été difficile à tester, mais désormais des tests peuvent être écrits pour ViewModel.
🎜🎜 (1) View🎜🎜🎜View est la couche de vue, qui est l'interface utilisateur. Le front-end est principalement construit par HTH L et csS Afin d'afficher plus facilement les données de la couche vi eu vers del ou hodel, divers langages de modèles front-end et back-end ont été produits, tels que FreeMarker, Feuille de thym, etc., les principaux frameworks MV VM tels que Vue.js, Angular JS, EJS, etc. ont également leurs propres langages de modèles intégrés pour créer des interfaces utilisateur. 🎜🎜🎜 (2) Modèle🎜🎜🎜Le modèle fait référence au modèle de données, qui fait généralement référence à divers traitements de logique métier et manipulations de données effectués sur le back-end, principalement autour du système de base de données. La difficulté ici réside principalement dans la nécessité de se mettre d'accord sur des règles d'interface unifiées avec le front end🎜🎜🎜 (3) ViewModel🎜🎜
ViewModel est une couche de données de vue générée et maintenue par l'organisation de développeurs front-end. Au niveau de cette couche, le développeur front-end convertit les données de modèle obtenues à partir du back-end et effectue une encapsulation secondaire pour générer un modèle de données de vue qui répond aux attentes de la couche Vue. Il est à noter que le modèle de données encapsulé par le View Model inclut l'état et le comportement de la vue, tandis que le modèle de données de la couche Model ne contient que l'état
Par exemple, ce qui est affiché dans cette partie de la page , ce qui est affiché dans cette partie de la page, etc. Cela appartient à l'état d'affichage (affichage)
Que se passe-t-il lorsque la page est chargée, que se passe-t-il lorsque l'on clique sur cette zone, que se passe-t-il lorsque cette zone défile, tout cela appartient pour afficher le comportement (interaction)
L'état et le comportement de la vue sont tous encapsulés dans le modèle de vue. Une telle encapsulation permet au modèle de vue de décrire complètement la couche de vue. Grâce à la mise en œuvre de la liaison bidirectionnelle, le contenu du modèle de vue sera affiché dans la couche de vue en temps réel, ce qui est passionnant car les développeurs front-end n'ont plus à mettre à jour la vue de manière inefficace et gênante en manipulant le DOM. Le framework MVVM s'est déjà occupé de la partie la plus sale et la plus fatigante. Nous, les développeurs, n'avons qu'à traiter et maintenir le modèle de vue. Les vues de données mises à jour seront automatiquement mises à jour en conséquence, réalisant ainsi une véritable programmation basée sur les événements. . 事件驱动编程。 View层展现的不是Model层的数据， 而是ViewModel的数据， 由ViewModel负责与Model层交互， 这就完全解耦了View层和Model层， 这个解耦是至关重要的， 它是前后端分离方案实施的重要一环。
<script>
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
message:"hello,vue!"
}
});</script>
Copier après la connexion
说明：
el: '#vue'：绑定元素的ID
data:{message:'Hello Vue!'} La couche View n'affiche pas les données de la couche Model, mais les données du ViewModel sont chargées de communiquer avec le ViewModel. Interaction code>Modèle, cela découple complètement la couche Vue et la couche Modèle. Ce découplage est crucial dans la mise en œuvre de la solution de séparation front-end et back-end.
4.3, Vue
Vue (prononcé /vju/, similaire à view) est un framework progressif pour la création d'interfaces utilisateur, publié en février 2014. Contrairement à d’autres grands frameworks, Vue est conçu pour être appliqué couche par couche de bas en haut. La bibliothèque principale de Vue se concentre uniquement sur la couche de vue, qui est non seulement facile à démarrer, mais également facile à intégrer avec des bibliothèques tierces (telles que vue-router, vue-resource, vue x) ou des projets existants.
(1) Implémentateur du pattern MVVM
Model : Couche modèle, représente ici les objets JavaScript
View : Couche de vue, représente ici le DOM (éléments des opérations HTML)
ViewModel : Connecte les vues et le middleware de données, Vue.js est l'implémenteur de la couche View Model dans MVVM🎜🎜🎜Dans l'architecture MVVM, les données et les vues ne sont pas autorisées à communiquer directement. Elles ne peuvent communiquer que via ViewModel, et View Model définit un Observer🎜🎜🎜ViewModel. peut observer les changements dans les données et mettre à jour le contenu correspondant à la vue🎜🎜ViewModel peut surveiller les changements dans la vue et notifier les données des changements🎜🎜🎜À ce stade, nous comprenons que Vue.js est un implémenteur de MV VM Son noyau. est de mettre en œuvre la surveillance DOM et la liaison de données🎜🎜🎜(2) Pourquoi utiliser Vue.js🎜🎜🎜🎜La légèreté et la petite taille sont un indicateur important. Vue.js ne fait que plus de 20 Ko après compression (Angular fait plus de 56 Ko après compression et React fait plus de 44 Ko après compression)🎜🎜Mobile d'abord. Plus adapté au terminal mobile, comme l'événement Touch sur le terminal mobile🎜🎜Facile à utiliser, courbe d'apprentissage fluide, documentation complète🎜🎜Absorbe les points forts d'Angular (modularité) et de React (DOM virtuel) et possède sa propre fonctions, telles que : propriétés calculées 🎜🎜Communauté open source et très active🎜🎜
4.4, le premier programme Vue
🎜[Explication] IDEA peut installer les plug-ins Vue !🎜 Remarque : Vue ne prend pas en charge IE 8 et versions antérieures, car Vue utilise des fonctionnalités d'ECMAScript 5 qu'IE 8 ne peut pas émuler. Mais il prend en charge tous les navigateurs compatibles ECMAScript 5. 🎜🎜🎜 (1) Adresse de téléchargement 🎜🎜🎜🎜 Version de développement 🎜🎜 Contient les avertissements complets et le mode débogage : https://yuejs.org/js/vue.js 🎜🎜Avertissements supprimés, 30,96 Ko min+gzip : https :/ /vuejs.org/js/vue.min.js🎜🎜🎜🎜CDN🎜🎜<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/%20vue.%20js%E2%80%9D></script>%F0%9F%8E%9C%F0%9F%8E%9C<script%20src=" https: js></script>🎜🎜🎜🎜🎜🎜 (2) Écriture de code🎜🎜🎜Le cœur de Vue.js est d'implémenter le modèle MVVM. Le rôle qu'elle joue est la couche View Model, donc la couche View Model. soi-disant La première application consiste à démontrer sa fonction de liaison de données. Le processus de fonctionnement est le suivant : 🎜 🎜1 Créez un fichier HTML🎜🎜
<!--view层，模板--><p>
{{message}}</p>
Copier après la connexion
🎜🎜2 Introduisez Vue.js🎜🎜
nbsp;html>
<meta>
<title>Title</title><!--view层，模板--><p>
{{message}}</p><script></script><script>
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
message:"hello,vue!"
}
});</script>
Copier après la connexion
🎜🎜3. instance🎜🎜
nbsp;html>
<meta>
<title>Title</title>
鼠标悬停几秒钟查看此处动态绑定的提示信息！
<script></script><script>
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
message: '页面加载于 ' + new Date().toLocaleString()
}
});</script>
Copier après la connexion
Copier après la connexion
🎜Description : 🎜🎜🎜el: '#vue' : ID de l'élément lié🎜🎜data:{message:'Hello Vue!'> : dans l'objet de données, il existe une propriété appelée message avec une valeur initiale définie sur Hello Vue ! 🎜🎜🎜4. Lier les données aux éléments de la page🎜
nbsp;html>
<meta>
<title>Title</title><p>
</p>
Yes
No
<script></script><script>
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
type: true
}
});</script>
Copier après la connexion
Copier après la connexion
🎜Instructions : Il vous suffit d'utiliser des doubles accolades pour envelopper l'attribut de message créé par Vue dans l'élément lié pour implémenter la fonction de liaison de données, c'est-à-dire l'effet requis par la vue. La couche de modèle est obtenue. Est-elle très similaire à l'expression EL ?🎜🎜🎜(3) HTML🎜🎜
nbsp;html>
<meta>
<title>Title</title><p>
</p>
A
B
D
C
<script></script><script>
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
type: 'A'
}
});</script>
<p>
<pan></pan></p><script></script><script>
//先注册组件
Vue.component("pan",{
template:'<li>Hello'
});
//再实例化Vue
var vm = new Vue({
el:"#app",
});</script>
//导入vueimport Vue from 'vue';import VueRouter from 'vue-router';//导入组件import Main from "../views/Main";import Login from "../views/Login";//使用Vue.use(VueRouter);//导出export default new VueRouter({
routes: [
{
//登录页
path: '/main',
component: Main },
//首页
{
path: '/login',
component: Login },
]})
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from "./router"import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(router)Vue.use(ElementUI)/* eslint-disable no-new */new Vue({
el: '#app',
router,
render:h=>h(App)})
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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
