Gestion du framework front-end

Cette fois, je vais vous présenter la gestion du framework front-end. Quelles sont les précautions pour la gestion du framework front-end. Voici des cas pratiques, jetons un coup d'œil.

Les trois frameworks front-end les plus populaires aujourd'hui sont Angular2+, Vue et React. Tous utilisent les idées de composantisation et de modularisation pour rendre le développement front-end plus standardisé.

Mais les défauts sont également évidents. Outre la documentation incomplète, le manque de cas et les coûts d'apprentissage élevés, la gestion des états entre les composants constitue également un problème majeur. La composantisation est une bonne chose, mais si le flux de données entre les composants n'est pas correctement géré, cela entraînera des impacts négatifs tels qu'une confusion dans le projet et des difficultés de maintenance.

Parlons d'abord de la raison pour laquelle la gestion de l'état est nécessaire :

Par exemple, deux listes font référence à la même source de données, et l'utilisateur apporte des modifications sur l'une des listes et sur l'autre liste. Les données changeront également en conséquence. La solution lors de l'utilisation d'angular1 est très simple, utilisez simplement $rootScope. Mais en ce qui concerne les trois principaux frameworks, il n'y a pas de concept de $rootScope. Que dois-je faire si je souhaite obtenir une mise à jour synchrone des données ?

Certaines personnes peuvent dire que c'est simple. Lorsque l'utilisateur apporte des modifications à la première table, nous envoyons un message à la deuxième table et la laissons modifier les données correspondantes. Mais que se passe-t-il s’il y a 10 ou 20 tables ? Allez-vous donner des avis un par un ? Si d’autres composants utilisent également cette source de données, seront-ils également informés des mises à jour ?

Cette solution peut donc être réalisable lorsque le projet est simple, mais lorsque le projet devient complexe, les problèmes seront immédiatement exposés. Afin d’éviter que de futurs projets ne soient renversés, il faut quand même y réfléchir dès le début.

Le concept de gestion d'état consiste à gérer des flux de données complexes.

Les trois frameworks majeurs implémentent des méthodes de gestion d'état :

Vue : Vuex

React : Redux (dva.js)

Angular2+ : Redux (ngrx)

Bien que les trois principaux cadres proposent des solutions différentes pour mettre en œuvre la gestion de l'État, les idées sous-jacentes sont les mêmes. Voici une introduction approximative :

Afin de parvenir à la gestion des statuts, le projet a ajouté plusieurs nouveaux modules : réducteurs, effets, services et modèles. Si c'est angulaire2+, il y a aussi des actions.

Parlons d'abord des fonctions de ces modules :

modèles : modèle de données. Stocke les données elles-mêmes et les méthodes de modification des données. Dans angulaire2+, les modèles stockent les entités. Ceux qui ont étudié le back-end devraient le connaître. C'est une déclaration sur les données.

réducteurs : Responsables des opérations de synchronisation. Par exemple, les données du formulaire demandées sont stockées dans le modèle de données, l'utilisateur ajoute/supprime certaines données et les données d'origine sont modifiées.

services : encapsulation de l'action de demande de données, comprenant généralement des méthodes d'obtention de données. Tels que getList(), getUsers().

effets : Responsable des opérations asynchrones. Par exemple, après avoir reçu l'action de demande de l'utilisateur, appelez le service pour demander des données au serveur. S'il réussit, il appellera les réducteurs pour enregistrer les données. S'il échoue, il effectuera une autre action.

Angular2+ fait également abstraction d'une couche d'actions, qui est une encapsulation de diverses actions. Par exemple, les données sont chargées, les données sont chargées avec succès, l'utilisateur supprime les données, etc. Contient le type de données et la charge utile (données utilisées pour modifier les données)

Une opération utilisateur, telle que

recherche du produit correspondant, lorsque l'utilisateur appuie sur le bouton de confirmation, l'ensemble du processus peut En résumé, ：

L'utilisateur donne une instruction -> dispatch appelle les réducteurs pour modifier l'état et le composant correspondant entre dans l'état de chargement -> avec succès, appelle les réducteurs pour enregistrer les données et termine le chargement -> Rendu Accédez à

vue.

Lorsque les réducteurs sont appelés pour mettre à jour les données, toutes les vues liées au modèle seront mises à jour de manière synchrone et chaque logique de traitement devient assez claire. Même si la complexité du projet va augmenter, il sera certainement beaucoup plus pratique à entretenir.

Si vous avez du mal à comprendre, vous pouvez commencer par ces deux cas :

compteur vuex + affichage liste : http://www.cnblogs.com/axel10/p/8536688. html

compteur dva.js + affichage de la liste : http://www.cnblogs.com/axel10/p/8503782.html

Le plus adapté pour débuter est Vue, puis React (en utilisant dva.js), et le plus difficile est angulaire2+. Angular2+ implique Rxjs et TypeScript, et il existe de nombreux points de connaissances. Peu importe que cela soit difficile ou non, n’oubliez jamais de commencer du moins profond au plus profond et ne rêvez pas d’atteindre le ciel d’un seul coup. Si vous n'êtes même pas familier avec Angular1, veuillez d'abord bien utiliser Angular1, bien comprendre les idées de MVC, puis vous impliquer dans les trois principaux frameworks. Sinon, vous obtiendrez probablement la moitié du résultat avec deux fois plus d'efforts et gaspillerez beaucoup d'argent. temps.

En tant qu'ingénieur front-end, si vous avez les conditions, il est recommandé d'apprendre un langage back-end, comme java, c#, qui vous sera d'une grande aide dans la compréhension du framework front-end.

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

Lecture recommandée :

Quelles classes définissent les composants dans React

Liaison d'entrée de formulaire Vue.js

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!