javaScript——Quelle est la différence entre les modèles de conception mvvm et mvc ?

php是最好的语言

Libérer： 2018-07-24 16:36:28

original

3208 Les gens l'ont consulté

Parlons brièvement de ce que sont les modèles de conception MVVM et MVC. Dans MVC, View peut accéder directement à Model ! Par conséquent, la vue contiendra des informations sur le modèle et inévitablement une logique métier.

1. Quelle est la différence entre MVVM et MVC ?

Dans MVC, View peut accéder directement à Model ! Par conséquent, la vue contiendra des informations sur le modèle et inévitablement une certaine logique métier. Le modèle MVC se concentre sur l'invariance du modèle. Par conséquent, dans le modèle MVC, le modèle ne dépend pas de la vue, mais la vue dépend du modèle. De plus, étant donné qu'une certaine logique métier est implémentée dans View, il est également difficile de modifier View. Au moins, cette logique métier ne peut pas être réutilisée. Toutes les communications dans MVC sont unidirectionnelles. Conceptuellement, MVVM est un modèle qui sépare véritablement la logique des pages et des données et peut réaliser une liaison de données bidirectionnelle.

2. Qu'est-ce que la VM ?

VM est un modèle de données extrait de View. Il convient de noter que pendant le développement, VM n'écrit pas d'autres éléments qui ne sont pas liés aux données, comme certaines méthodes.

3. Comment correspondent MVVM et code ?

MVVM est composé de trois parties : Modèle, Vue et VM. Le modèle correspond à la partie logique qui obtient les données et traite les données en quelque chose qui peut être utilisé par VM, tandis que View correspond à la partie d'affichage et de liaison des données, et VM est un objet de modèle de données abstrait.

4. Quels frameworks utilisent le modèle MVVM ?

Il existe de nombreux frameworks front-end qui utilisent le modèle MVVM, tels que AngularJS, avalon, emberjs, knockoutjs, winjs, React, Riverts, Way, Vue, Regular, Drop et d'autres frameworks

5. Scénarios d'utilisation de MVC, MVP, MVVM ?

Pour comprendre leurs scénarios d'utilisation, vous devez d'abord comprendre leurs avantages et leurs inconvénients.

Avantages et inconvénients de MVC :

Avantages :

1. Séparez toute la logique métier dans le contrôleur, avec un haut degré de modularité. Lorsque la logique métier change, il n'est pas nécessaire de modifier la vue et le modèle, il suffit de remplacer le contrôleur par un autre contrôleur (contrôleur échangeable).

2. Le mode Observateur peut mettre à jour plusieurs vues en même temps.

Inconvénients :

1. Les tests du contrôleur sont difficiles. Parce que l'opération de synchronisation de la vue est effectuée par la vue elle-même et que la vue ne peut s'exécuter que dans un environnement doté d'une interface utilisateur. Lors du test unitaire du contrôleur sans environnement d'interface utilisateur, l'exactitude de la logique métier du contrôleur ne peut pas être vérifiée : lorsque le contrôleur met à jour le modèle, il ne peut pas affirmer l'opération de mise à jour de la vue.

2. La vue ne peut pas être divisée en composants. La vue dépend fortement d'un modèle spécifique. Si vous devez extraire cette vue en tant que composant réutilisable pour une autre application, cela sera difficile. Parce que le modèle de domaine des différents programmes est différent

Avantages et inconvénients du MVP :

Avantages :

1. Facile à tester. Presenter communique avec View via des interfaces, lorsque les tests unitaires Presenter ne dépendent pas de l'environnement de l'interface utilisateur. Vous pouvez vous moquer d'un objet View, qui doit uniquement implémenter l'interface View. Ensuite, les dépendances sont injectées dans Presenter et l'exactitude de la logique métier de Presenter peut être complètement testée lors des tests unitaires.

2. La vue peut être composée de composants. Dans MVP, View ne dépend pas du modèle. Cela permet à View d'être séparé de scénarios commerciaux spécifiques. On peut dire que View peut ignorer complètement la logique métier. Il lui suffit de fournir une série d'interfaces pour les opérations de couche supérieure. De cette façon, vous pouvez créer des composants View hautement réutilisables.

Inconvénients :

1. En plus de la logique métier, Presenter dispose également d'une grande quantité de logique de synchronisation manuelle pour View->Model et Model->View, ce qui rend Presenter encombrant et difficile à maintenir. .Ce sera plus difficile.

Avantages et inconvénients de MVVM :

Avantages :

1. Améliorer la maintenabilité. Il résout le problème d'un grand nombre de synchronisations manuelles de vues et de modèles dans MVP et fournit un mécanisme de liaison bidirectionnelle. Maintenabilité améliorée du code.

2. Simplifiez les tests. Étant donné que la logique de synchronisation est gérée par Binder, la vue change simultanément avec le modèle, il vous suffit donc de vous assurer de l'exactitude du modèle et la vue sera correcte. Tests considérablement réduits des mises à jour de synchronisation View.

Inconvénients :

1. L'interface graphique trop simple n'est pas applicable, ou le couteau à bétail tue les poulets.

2. Pour les grandes applications graphiques, il existe de nombreux états d'affichage, et le coût de création et de maintenance de ViewModel sera relativement élevé.

3. La déclaration de liaison de données est écrite impérativement dans le modèle View, et il n'y a aucun moyen d'interrompre et de déboguer ce contenu.

Comme le montrent les avantages et les inconvénients ci-dessus, de MVC->MVP->MVVM, c'est comme un processus de destruction de monstres et de mise à niveau. Ce dernier résout les problèmes laissés par le premier, optimise les défauts du premier en avantages et sélectionne le cadre le plus approprié en fonction du projet réel.

6. Comment choisir entre Angular, avalon et Vue ?

Angular inclut toutes les parties de MV* et possède son propre ensemble de règles, il convient donc au PC, mais la structure du code sera plus claire ; avalon est léger et convient aux anciens navigateurs que Vue a un degré élevé de prise en charge du navigateur, et la prise en charge minimale est IE6, il convient donc aux projets compatibles avec le navigateur Lao Liu ; Vue est principalement légère et n'est utilisée que comme partie d'affichage dans MV*. facile à apprendre et à utiliser, mais l'inconvénient est qu'il s'agit d'un gros projet. Lors de son utilisation, il doit être utilisé avec d'autres frameworks ou bibliothèques, ce qui est assez gênant.

7. Origine du développement.

MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

Copier après la connexion

8. Comment implémenter la liaison de données bidirectionnelle.

Il existe actuellement trois manières principales d'implémenter la liaison de données bidirectionnelle :

1. Liaison manuelle

L'ancienne méthode d'implémentation utilise le mode de programmation observateur, le l'idée principale est de définir les méthodes get et set sur l'objet de données, d'appeler manuellement les données get ou set lors de l'appel et de déclencher l'opération de rendu de la couche d'interface utilisateur après avoir modifié les données, la scène dans laquelle la vue entraîne la modification des données est principalement appliquée ; pour saisir, sélectionner et zone de texte Lorsque la couche d'interface utilisateur change, elle déclenche des événements pour modifier les données dans la couche de données en écoutant les changements, les pressions sur les touches, les touches et d'autres événements du dom. L'ensemble du processus est complété par des appels de fonction.

2. Mécanisme de détection sale

Représenté par le framework mvvm typique angulairejs, angulaire met à jour les opérations de la couche UI en vérifiant les données sales. Concernant la détection sale d'Angular, il y a quelques choses que vous devez savoir :

Le mécanisme de détection sale n'utilise pas de détection programmée.
Une détection sale est effectuée lorsque les données changent.
angular encapsule les événements DOM, les événements xhr, etc. couramment utilisés, et déclenche le processus de digestion de la saisie d'angular.
Dans le processus de digestion, il traversera le rootscope et vérifiera tous les observateurs. (Pour la conception spécifique d'Angular, vous pouvez voir d'autres documents, ici nous discutons uniquement de la liaison de données), puis regardons comment effectuer une détection sale : principalement à travers les données définies pour trouver tous les éléments liés aux données, puis comparer le les données changent, et si elles changent, l'opération de commande est effectuée.

3. Détournement de données frontales (Détournement)

L'idée de base est d'utiliser Object.defineProperty pour surveiller l'attribut get et set de l'objet de données When. il y a une lecture des données et pendant l'opération d'affectation, l'instruction du nœud est appelée, il suffit donc d'utiliser le signe = égal le plus courant pour attribuer la valeur.

9. Transformation MVC-MVVM.

Le cœur du logiciel, ce sont les données. La logique métier apparaît autour de la génération, de la modification et d'autres changements de données. Différentes technologies d'interface ont vu le jour autour de l'affichage des données. Sans code bien conçu, il y aura souvent un couplage entre la couche de données (couche de persistance), la couche de logique métier et le code d'interface.

Étant donné que mvc ne réalise pas la séparation complète de la vue et du modèle, contrairement à mvvm, cela détermine la transition de mvc à mvvm.