Exemple de partage du résumé pratique du projet Vue Family Bucket

D'un point de vue front-end, Vue peut être considérée comme le framework MVVM front-end le plus idéal à l'heure actuelle. Tout sert à l'interface, et il est facile de démarrer. Cet article enregistrera la reconstruction d'une famille Vue. bucket (Vue+Vue-router+Vuex). Le processus du projet jQuery+template et ce que j'ai appris au cours du processus. Cet article présente principalement le résumé pratique du projet du bucket de la famille Vue (recommandé). L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Mise en route

La documentation officielle de Vue est le meilleur tutoriel pour apprendre Vue. Il n'y a personne. C'est peut-être parce que l'auteur du framework est un concepteur et n'a pas de dos. -fin arrière-plan, afin que chaque type de concepts abstraits puisse être expliqué de la manière la plus compréhensible dans Vue. Ici, nous ne présentons que brièvement les concepts de Vue, Vue-router et Vuex. Pour une étude approfondie, il est recommandé d'aller à. la documentation officielle.

Vue

La fonction principale de Vue est la liaison bidirectionnelle, qui peut automatiquement réaliser des modifications de données basées sur l'interface et des modifications d'interface basées sur les données, ce qui peut réduire considérablement le coût des coûts de développement d'applications interactives riches frontales. Il existe plusieurs frameworks similaires, Vue, mais l'implémentation de Vue présente certains avantages en termes de performances en tirant parti des fonctionnalités natives d'ES5.

Vue-router

Vue-router est la route officielle, utilisée pour organiser la relation de mappage entre les URL et les composants, et répondre automatiquement aux modifications d'URL des composants, afin que les développeurs n'aient qu'à se concentrer sur le développement de composants, et le routage vous aidera à résoudre les problèmes triviaux associés.

Vuex

Vuex fournit un modèle de gestion de données centralisé pour gérer des situations de flux de données complexes, telles que plusieurs composants partageant des données mais travaillant indépendamment. les données ne sont pas synchronisées, ou parce que le hook de l'objet Object dans js pointe vers la même instance dans la mémoire, une fois les données d'origine manipulées, elles contamineront d'autres composants. Dans ce cas, un mode de fonctionnement des données plus organisé est nécessaire. C'est Vuex.

Sélection technique

Comparaison avec jQuery

Après avoir compris les concepts de base de Vue, vous serez certainement inconscient en les comparant avec la pile technologique jQuery pour voir si ces choses sont vraiment nécessaires pour mon entreprise.

Tout d'abord, les problèmes résolus par MVVM peuvent-ils être résolus avec jQuery ? La réponse est oui. Vous souvenez-vous d'avoir utilisé jQuery pour obtenir les valeurs des entrées une par une lors de la soumission du formulaire ? Il s'agit de données basées sur l'interface ; si vous avez exécuté des fonctions interactives asynchrones, vous devez avoir de l'expérience dans l'utilisation de jQuery pour remplir des données Ajax dans divers éléments de l'interface. Bien que cela puisse être fait, c'est un peu fastidieux. Même si vous utilisez un plug-in de vérification de formulaire et un moteur de modèle frontal, vous devez toujours appeler manuellement la méthode de vérification et la méthode de rendu sur chaque nœud en cours d'exécution. créer une page de site Web, mais lorsque les exigences sont complexes dans une certaine mesure, ce sera un gros fardeau.

Ensuite, il y a le routage. L'essence du routage est de réaliser la commutation d'interface et la maintenance de l'interface en exploitant les URL. Cela n'a en fait rien à voir avec la pile technologique. des exigences de routage sont générées, même les projets basés sur jQuery peuvent le faire. Il s'agit simplement d'un itinéraire recréé, mais les applications d'une seule page sont rarement créées à l'ère jQuery.

Vuex est complètement étendu sur la base d'une liaison bidirectionnelle, ce qui équivaut à ajouter un courtier entre les données et le composant. Le composant ne peut pas exploiter directement les données et ne peut soumettre que les exigences d'opération au courtier, et. le courtier Pour mettre en œuvre des opérations visant à résoudre divers problèmes imprévisibles causés par trop de personnes et de mains, les données ont été retirées de l'application et un magasin a été spécialement créé pour éliminer le problème de contamination des données entre les composants. Il faut dire que jQuery n'a pas cette exigence, car jQuery exploite entièrement les données manuellement et il n'y a aucune situation inattendue.

Scénarios applicables

Après comparaison avec jQuery, les scénarios applicables de Vue sont évidents du point de vue du développement, les projets avec des interactions plus complexes sont plus adaptés. Les sites Web adaptés, basés sur le contenu, sont les moins adaptés. S'il existe des besoins pour des pages individuelles sur le site Web, il peut également être utilisé localement, comme les pages de panier d'achat.

Bien sûr, tout cela doit être basé sur le principe qu'il n'est pas compatible avec IE8. Je suis un peu confus à ce sujet car j'ai vu que certains sites 2C utilisent Vue. tromper leurs patrons ?

Analyse du projet

Contexte du projet

Le projet de refactoring cette fois est la gestion des composants front-end développée pour le précédent Company System, j'ai choisi de reconstruire ce projet parce que je connais les exigences. Il s'agit d'une application typique d'une seule page avec une complexité modérée, elle est donc plus adaptée à un exercice pratique.

Le contexte du projet est que dans l'externalisation des sociétés de création de sites Web, un grand nombre de composants réutilisables sont accumulés dans le processus de conception. Les concepteurs n'ont souvent qu'à affiner les composants pour reconstituer la page et la livrer. au front-end.En théorie, ces composants peuvent également être réutilisés sur le front-end Utilisé, mais en fait, le front-end doit réimplémenter la page entière à chaque fois, ce qui gaspille beaucoup de main-d'œuvre.

Exigences fonctionnelles

L'idée de ce projet est de développer tous les composants et de les saisir dans une plate-forme de gestion unifiée. Les concepteurs peuvent accéder à la plate-forme pour sélectionner les composants, puis prévisualiser et ajuster les composants en temps réel. vous obtenez pendant tout le processus, et la plateforme fera des ajustements. En conséquence, une chaîne de code est générée. Tant que le code est transmis au front-end, vous pouvez utiliser cette chaîne de code pour reproduire le composant modifié. par le concepteur sur la plateforme. Vous pouvez également copier le code html/css/js du composant en un seul clic et l'appliquer rapidement au projet Go, ce qui rend le coût de développement frontal du composant proche de zéro. La plateforme doit mettre en œuvre les fonctions suivantes :

1. Gérer les composants, prendre en charge la classification, la recherche, le tri

2. Afficher les composants, prendre en charge la prévisualisation/l'édition en ligne des composants

3. Transfert de composants, prend en charge la génération de code de composant et la reproduction de composants basés sur le code

4. Statistiques d'utilisation, prend en charge les statistiques sur l'utilisation des composants pour faciliter davantage Composant d'optimisation

Analyse fonctionnelle

La première version est implémentée à l'aide de jQuery+template. Cette pile technologique est trop flexible. peut répondre à tous les besoins. C'est facile à faire, mais l'inconvénient est que cela peut être fait quelle que soit la façon dont vous le faites. Cela ne favorise pas la clarification de vos idées et s'accompagne souvent de changements en le faisant.

Les composants sont placés dans un dossier widgets/, appelé bibliothèque de composants. Puisqu'il s'agit d'un pur projet frontal sans capacités d'opération de fichiers, la lecture des composants repose sur un fichier json statique, qui agit. en tant que répertoire de composants, qui comprend toutes les informations telles que la classification des composants, l'étiquette, le nom, la date, etc. La structure des données est à peu près la suivante :

[{
 "title": "导航类",
 "list": [{
 "widget": "bread-1",
 "title": "图标面包屑",
 "tag": "面包屑/图标",
 "author": "UI",
 "date": "2015-06-04"
 }, 
 ...]
},
...]

Les composants sont répertoriés dans la bibliothèque de composants par colonne/numéro. Ils sont stockés sous la forme d'un dossier secondaire et il est convenu d'utiliser le répertoire de stockage comme code du composant. Par exemple, composant bread-1 signifie que l'adresse de stockage du composant est. le dossier widgets/bread/1/.

Bien entendu, la structure des fichiers internes du composant doit également être convenue, comme suit :

widgets
  |-bread
    |-1
      |-album.jpg   //缩略图
      |-config.json  //配置文件
      |-script.js   //脚本模板
      |-style.css   //样式模板
      `-temp.htm   //界面模板

Avec ces accords, le programme peut obtenir tous les fichiers via le fichier répertoire Les informations sur les composants, l'acquisition, l'affichage et la récupération des composants peuvent également être réalisés.

La partie la plus critique du composant est le fichier config.json, qui contient les éléments configurables du composant et leurs valeurs par défaut. La plateforme lira ce fichier de configuration lors de l'affichage du composant et générera un panneau de configuration basé sur le composant. informations de configuration. Ici, vous pouvez définir toutes les variables dans les interfaces, les styles et les scripts des composants. Le fichier de configuration ressemble probablement à ceci :

{
 "cssConfig": {
 "fontSize": {
  "name": "字号",
  "value": "12px",
  "type": "text"
 },
 ...
 },
 "jsConfig": {
    ...
 },
 "showConfig": {
 "viewWidth": {
  "name": "栅格宽度",
  "value": 12,
  "type": "number"
 },
 ...
 }
}

Il existe trois cssConfig, showConfig. , et jsConfig dans le fichier de configuration. Branch est une collection de toutes les variables qui peuvent être modifiées dans un composant. Si vous souhaitez appliquer ces variables au composant, vous devez utiliser le moteur de modèle frontal. Les composants du composant sont écrits dans la syntaxe du modèle pendant le développement. Après avoir été analysés par le moteur de modèle, vous pouvez obtenir le contenu html/css/js réel après la configuration. Par exemple, le modèle de style ressemble probablement à ceci :

<🎜. >

.widget-bread-1 {
  font-size: ${fontSize.value}; 
  color: ${textColor.value}; 
}
.widget-bread-1 a { 
  color: ${textColor.value};
}
.widget-bread-1 a:hover{
  color:${hoverColor.value};
}
.widget-bread-1 .ion { 
  font-size: ${iconSize.value}; 
  margin: 0 ${iconMargin.value};
}

Après avoir obtenu le code réel du composant, ajoutez simplement le résultat. Insérez-le simplement dans la page et mettez-le à jour en temps opportun. HTML et CSS peuvent remplacer directement le contenu du texte. Parce que js est introduit de manière modulaire, seul le contenu du module sera remplacé et le module ne sera pas surchargé. Le module entier doit être renommé et remplacé dans son ensemble, donc js Les noms des modules sont aléatoires.

Il y aura un problème ici. Certains composants doivent être utilisés plusieurs fois sur la page, alors le sélecteur js de ce composant entrera en conflit. Ce problème peut être résolu à l'aide du nom aléatoire du js. module.Nous sommes convenus que dans le développement de composants, id est utilisé comme variable réservée et que la plate-forme attribue automatiquement une chaîne aléatoire. Cette chaîne est la même dans l'instance du composant, mais sera différente lorsqu'elle sera appelée plusieurs fois de cette manière. , tant que ${id} est utilisé comme identifiant ou classe du nœud parent du composant, cela résout le problème des conflits de sélection et peut également être utilisé comme espace de noms CSS du composant, afin que d'éventuels conflits de noms CSS puissent être résolu de manière invisible.

Ce qui précède sont les fonctions principales du projet.

De plus, localStorage est utilisé comme méthode de stockage pour implémenter des statistiques de données autonomes. Il peut collecter les enregistrements d'utilisation des composants du navigateur actuel et la configuration de chaque utilisation. mais le développement du projet lui-même utilise également des modèles frontaux, ainsi que des modèles de composants, qui seront mis en cache à l'aide de localStorage après le premier chargement. Les stratégies de mise en cache de ces contenus doivent être stockées de manière permanente et les modèles de projet doivent l'être. mis à jour manuellement. Composants Le modèle doit être déterminé en fonction de la situation. S'il y a trop de contenu stocké, il est irréaliste de les supprimer un par un pendant le nettoyage. Les supprimer tous pourrait accidentellement endommager le stockage. d'autres applications. L'approche ici consiste à encapsuler l'opération localStorage, et la méthode de stockage ajoutera un préfixe spécial avant la clé. Lors de la suppression, il vous suffit de parcourir la clé stockée localement et de déterminer si elle correspond au préfixe pour savoir si c'est le cas. stocké dans l'application. La méthode de valeur correspondante doit également ajouter le préfixe à la clé à l'envers.

De plus, localStorage ne prend en charge que l'accès aux chaînes. Afin de faciliter notre accès aux types d'objets, la méthode d'encapsulation prend également en charge la conversion automatique, mais cette conversion ne peut pas convertir aveuglément les caractères lors de la rencontre d'un objet et faire correspondre la valeur lors de sa récupération. . Si l'objet peut être transféré, l'objet sera transféré automatiquement, car parfois l'utilisateur peut réellement enregistrer une chaîne d'objet et vouloir la récupérer telle quelle lors de sa suppression. Pour résoudre ce problème, vous devez créer un petit. hack. Lorsque la méthode de stockage détecte la valeur Lorsqu'il s'agit d'un objet, elle sera convertie en chaîne puis une chaîne d'identification sera épelée devant. La méthode de valeur ne restaurera la chaîne suivante dans un objet qu'après avoir détecté cette identification. Bien que cette méthode puisse répondre aux besoins, elle n'est pas très sûre, car ce préfixe est fixe, et théoriquement il est toujours possible de rencontrer un gagnant à la loterie. Je ne sais pas s'il existe d'autres meilleures solutions à ce problème. .

Les principaux points fonctionnels du projet sont les suivants.

Reconstruction

Une reconstruction

La première reconstruction n'a utilisé que Vue Pendant le processus de reconstruction, la première étape Ce que j'ai fait. l'expérience est toutes sortes de commodités. Ce que je devais à l'origine appeler le moteur de modèle est fait par le framework, je devais à l'origine lier les événements dans js, mais maintenant je peux les lier directement dans le modèle, et il existe diverses autres syntaxes. sucres.

Bien sûr, la chose la plus importante est la liaison bidirectionnelle. Basée sur la liaison bidirectionnelle, l'interface et les données peuvent être automatiquement associées, ce qui donne l'impression aux gens que le programme a un certain degré d'autonomie, mais en Afin de permettre à cette autonomie de fonctionner normalement, les développeurs doivent planifier chaque étape à l'avance, ce qui est moins gratuit que jQuery. Prenons l'exemple du déplacement de briques. JQuery est comme une grue particulièrement flexible qui peut facilement soulever des briques et les déplacer de manière sophistiquée ; Vue est comme une télécommande universelle. Vous lui dites que vous souhaitez déplacer des briques d'un certain endroit vers. un certain endroit. Ce qui se passe pendant le processus dépend de la façon de le gérer, les briques peuvent être déplacées automatiquement en appuyant sur le bouton.

Les deux méthodes ont leurs propres avantages et inconvénients. Si la grue est bien conduite, elle peut être très flexible. Il est facile d'éviter les fosses sur la route. L'inconvénient est que vous devez la conduire de temps en temps. encore une fois, le bouton peut être programmé pour fonctionner automatiquement en même temps. L'inconvénient est que vous devez inspecter les nids-de-poule sur la route à l'avance, planifier toutes les autres voitures et expliquer clairement toutes les situations, sinon la voiture se renversera ou s'écrasera. en passant de jQuery à Vue, vous ressentirez certainement ce sentiment de retenue. Vous devez être obligé de le faire "Réfléchissez avant d'agir."

Une grande partie du travail pendant la période de reconstruction consiste à établir des instances Vue, à collecter les données dispersées dans tous les coins de js en données, à concentrer le processus d'exploitation des données en méthodes petit à petit et à transférer les données Le processus de sélection est concentré sur le calcul. L'ensemble de ce processus permet d'examiner clairement chaque détail de mise en œuvre et de déterminer si chaque méthode de mise en œuvre est raisonnable. En fait, il s'agit de résumer le processus original de conduite d'une grue en boutons de télécommande un par un. Quand tout Une fois le résumé terminé, l'exemple Vue devient notre projet final et peut être exécuté automatiquement.

Après la reconstruction, le recours à diverses fonctions de Vue a réduit la quantité de code dans la partie logique. A part cela, il n'y a aucune amélioration du projet lui-même car il n'y a pas de routage, le problème de la perte du projet. ; L'état de la page d'actualisation existe toujours. Parce que Vuex n'est pas utilisé, un problème de pollution des données est rencontré, qui ne peut être résolu qu'avec une copie complète ; et le modèle de développement basé sur les composants rend l'organisation du code plus fragmentée. .

Deuxième reconstruction

L'objectif de la deuxième reconstruction est d'améliorer le routage, Vuex, l'organisation du code et le backend Wild Dog Cloud.

Bien que j'aie l'expérience du premier refactoring, je suis encore un peu confus au début du deuxième refactoring. Lequel faut-il implémenter en premier, le routage ou Vuex ? Après y avoir réfléchi, ce que fait le routage, c'est "démonter", et ce que fait Vuex, c'est "modifier". Je pense que la charge de travail de démontage après modification sera plus petite, j'utilise donc d'abord Vuex.

Le concept de Vuex est un peu abstrait à comprendre à partir de rien, mais une fois que vous l'utilisez, vous vous sentez très à l'aise. De plus, contrairement au routage, il peut être utilisé presque sans distinguer de scénarios. Vuex, le problème de la pollution des données sera naturellement résolu. De plus, le processus action => mutation => store apporté par Vuex facilitera vraiment les choses une fois accepté. Le processus d'introduction de Vuex consiste essentiellement à transférer les données vers le magasin et à les disperser. les opérations de données en actions, getters et mutations, et en même temps de nombreuses opérations de données synchronisées ne sont plus nécessaires, réduisant ainsi la quantité de code.

Après cela, j'ai commencé à introduire le routage. Au début, je ne savais pas comment diviser les vues. Les grandes vues doivent être la connexion, l'enregistrement et l'interface principale. subdivisé. En théorie, il peut être divisé en plusieurs parties, mais sur la base des scénarios d'utilisation réels de l'application, il s'avère que les changements d'interface sont relativement fréquents et que les frais liés au chargement et au déchargement fréquents des composants seront très importants. De plus, diviser des composants étroitement couplés en différentes vues nécessite d'enregistrer de nombreuses informations d'état, ce qui dépasse un peu les gains. En fin de compte, j'ai abandonné et n'ai pas divisé davantage la vue principale. Étant donné que le chevauchement d'accès des trois vues n'est pas élevé, il est naturel de charger le composant de manière asynchrone et de charger le composant uniquement lorsqu'il est accédé. Vue elle-même prend en charge les composants asynchrones, cette question devient donc très simple, à condition qu'elle soit accessible. peut renvoyer une promesse, vous pouvez obtenir des composants de n'importe quelle manière.

L'étape suivante consiste à se connecter au Wild Dog Cloud pour obtenir une véritable gestion des utilisateurs et des statistiques de données. Le Wild Dog Cloud peut fournir une série de fonctions telles que l'authentification des utilisateurs et le stockage des données. Grâce à lui, vous pouvez développer un WEB complet. en utilisant uniquement l'application js. De cette façon, toutes les opérations précédentes sur localStorage doivent être remplacées par des opérations sur Wild Dog Cloud, et les données deviennent plus fiables lorsqu'elles atteignent le cloud.

À ce stade, la deuxième reconstruction est terminée. Le code métier global semble considérablement réduit, mais le volume total de code n'est pas beaucoup moins important. Après tout, trois fichiers de framework ont ​​été ajoutés. après des fractionnements répétés, le nombre de fichiers a diminué de Les trois ou deux js d'origine se sont transformés en une dizaine de js Pour la modularisation, seajs est utilisé à la place de webpack Parce que j'ai toujours une attitude attentiste envers webpack et que je le fais toujours. Je ne ressens pas le besoin de l'utiliser. La clé est de le développer sur la base de Webpack. Le code sera mélangé avec de nombreux éléments privés, ce qui rendra votre code non natif et incapable de fonctionner sans lui. acceptez cela. De plus, dans les scénarios multipages, seajs a plus d'avantages que webpack lorsqu'il est combiné avec la mise en cache locale. Bien sûr, la différence est la même que celle entre jQuery et Vue. Ce n'est pas essentiellement la même chose. dans le scénario d'utilisation. Celui qui vous convient est le meilleur.

Postscript

Après deux pratiques de refactoring et pièges, j'ai une compréhension plus approfondie du framework Vue. Vue veut être flexible et confortable dans le développement. exigence relative aux capacités d'architecture de projet du constructeur de projet. Si Vue doit être introduit dans la couche inférieure, il existe également une exigence minimale concernant les capacités de planification du constructeur d'infrastructure. Celles-ci ne se trouvent pas dans la pile technologique jQuery et dans le processus. L'utilisation de Vue accepte également ces contraintes. Ce faisant, ils peuvent guider les développeurs dans l'établissement de leur propre système de règles, ce qui est une bonne chose et une tendance générale. Après tout, la vraie liberté n'existe que dans les règles.

Le code complet de cet article est disponible sur Github.

Recommandations associées :

Explication détaillée de l'utilisation de React Family Bucket pour créer une instance de système de gestion en arrière-plan

Application Web Vue2.0 développée par FamilyMart (voir l'application Wuji)

Exemple d'explication détaillée du composant composite Vue pour implémenter la fonction de formulaire d'inscription

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!