MVC
ModelViewController (MVC) est un modèle de développement d'interface utilisateur informatique qui sépare la logique de présentation des informations et l'interaction utilisateur; Le modèle contient des données d'application et une logique métier; Le contrôleur est responsable de la conversion de l'entrée de l'utilisateur en commandes et de la transmission au modèle et à la vue; C'est l'explication de Wikipedia;
Ce modèle a été initialement conçu par Trygve Reenskaug lorsqu'il travaille avec Smalltalk-80 (1979), et a d'abord été appelé Model-View-Controller-Editor; Plus tard, grâce à l'introduction approfondie du livre "Design Patterns: Elements of Reutilisable Oriented Software", MVC est devenu complètement populaire;
Comprenez les responsabilités de composer les trois parties de MVC et ce que les cadres JavaScript existants nous fournissent afin que nous puissions mieux utiliser ces cadres. Ensuite, nous allons d'abord passer les trois parties qui composent MVC pour savoir quelles sont les responsabilités de chaque partie [étant donné un code de démonstration avec une colonne vertébrale comme exemple].
Modèle
Le modèle gère les données d'application. Lorsque les données du modèle changent, son auditeur sera informé [probablement une vue]. Après avoir reçu la notification, l'auditeur apportera des modifications correspondantes.
Voir
La vue est une représentation visuelle du modèle d'état actuel. La vue observera les modifications du modèle et est informée lorsque le modèle change, et permet à la vue de se mettre à jour. Généralement, nous utiliserons le moteur de modèle pour rendre le modèle dans la vue;
Contrôleurs
Les contrôleurs sont un médiateur entre les modèles et les vues. Son travail consiste à mettre à jour la vue lorsque le modèle change et à mettre à jour le modèle lorsque l'utilisateur exploite la vue.
Comparaison du cadre Javascipt MVC
Différentes personnes ont des méthodes de comparaison différentes, la clé dépend de ce à quoi vous faites attention:
1. Si vous faites plus attention aux détails du routage des URL du cadre, du stockage de données, de la mise en œuvre de la mise en œuvre, etc., vous pouvez vous concentrer sur ce trône JavaScript: épée du cadre;
2. Si vous accordez plus d'attention à des exemples spécifiques du cadre, il existe un projet open source ici qui utilise différents cadres MVC JavaScript pour la même démo. Vous pouvez clairement voir les différences dans des applications spécifiques de chaque cadre. Voici le site officiel de ToDomvc
Les avantages de MVC nous apportent:
1. Facile à entretenir
2. Le découplage de la vue du modèle signifie que la logique métier peut être mieux testée.
3. Le code peut être mieux réutilisé
4. Le développement modulaire peut rendre la division du travail plus claire, certaines personnes se concentrent sur la logique des affaires et certaines personnes se concentrent sur l'interface utilisateur.
5. Après avoir examiné le modèle MVC classique, nous comprenons le concept de superposition dans l'application et les responsabilités de chaque couche. Dans le même temps, nous devrions être en mesure d'identifier les différences entre tous les cadres MVC JavaScript et le modèle MVC classique que nous expliquons. De cette façon, lors du choix du cadre MVC, nous devons nous concentrer sur la façon dont les modèles, les vues, les contrôleurs sont implémentés et même la façon d'implémenter des codes spécifiques, afin de nous aider à mieux choisir le cadre MVC JavaScript le plus approprié.
MVVM
Le nom complet de MVVM est le modèle View ViewModel. Ce modèle architectural a été initialement proposé par MartinFowler de Microsoft comme spécification du modèle de conception de couche de présentation de Microsoft. Il s'agit d'un dérivé du modèle MVC. Le modèle MVVM se concentre sur les plates-formes de développement d'interface utilisateur qui peuvent prendre en charge des événements, tels que HTML5, [2] [3] WindowsPresentation Foundation (WPF), Silverlight et T ZK Framework, Adobe Flex.
La majeure partie de la mise en œuvre de ce modèle est séparée des autres couches en déclarant la liaison des données au niveau de la couche de vue, ce qui facilite la division du travail entre les développeurs frontaux et les développeurs arrière. Les développeurs frontaux écrivent les données liés à ViewModel dans la balise HTML. Le modèle et ViewModel sont des développeurs back-end qui maintiennent ces deux couches grâce à la logique des applications en développement.
Ces dernières années, le modèle MVVM a commencé à être mis en œuvre en JavaScript. Actuellement, les cadres relativement matures incluent KnockoutJS, Kendo MVVM et henback.js. Prenons des knockoutjs comme exemple pour voir les responsabilités spécifiques et les exemples de codes de chaque partie du modèle MVVM, et comprennent en même temps les avantages et les inconvénients de l'utilisation de ce modèle à développer.
Modèle
Comme les autres membres de la famille MV *, le modèle représente les données dans un champ ou des données spécifiques requises pour l'application, des données typiques spécifiques au champ telles que les informations utilisateur [nom d'utilisateur, avatar, e-mail, numéro de téléphone] ou une information musicale [nom de chanson, année de sortie, album];
Le modèle se concentre uniquement sur les informations sur les données et ne se soucie aucun comportement; Il ne formate pas les données ni n'affecte l'affichage des données dans le navigateur, ce qui n'est pas sa responsabilité; Les données de formatage sont la tâche de la couche de vue, et la couche logique métier est encapsulée dans le modèle de vue pour interagir avec le modèle.
Un comportement plus inattendu fait dans la couche de modèle consiste à vérifier les données. Par exemple, lorsque l'utilisateur entre dans l'e-mail, déterminez si le format de messagerie est correct.
Dans knockoutjs, le modèle est essentiellement implémenté en fonction de la définition ci-dessus, mais il y aura un service de serveur d'appel Ajax pour lire et écrire des données de modèle.
Voir
La vue fait référence à la partie de l'application qui interagit directement avec l'utilisateur. Il s'agit d'une interface interactive pour représenter l'état du ViewModel. La vue est considérée comme active plutôt que passive? Cette phrase signifie que la vue passive ne se soucie pas du domaine du modèle dans l'application, et le domaine du modèle est maintenu dans le contrôleur; La vue active de MVVM comprend la liaison des données, les événements et le comportement du modèle et de ViewModel doivent être compris. Bien que ces comportements puissent correspondre aux attributs, la vue doit encore répondre à l'événement du ViewModel, et la vue n'est pas responsable du contrôle de l'état.
La couche de vue de knockoutjs est un simple document HTML, qui sera associé à la déclaration de données du ViewModel. Dans le même temps, la couche de vue de knockoutjs affiche les données obtenues à partir du ViewModel, transmet des commandes au ViewModel et met à jour l'état modifié du ViewModel.
ViewModel
On peut considérer que ViewModel est un contrôleur spécialement utilisé pour la conversion des données. Il peut convertir les informations du modèle en informations dans la vue, et en même temps passer les commandes de la vue au modèle;
En ce sens, ViewModel ressemble plus à un modèle, mais il contrôle une grande partie de la logique d'affichage de la vue. Dans le même temps, ViewModel expose également certaines méthodes pour maintenir l'état de la vue et mettre à jour le modèle en fonction du comportement et des événements de la vue;
En résumé, le ViewModel est situé derrière la couche d'interface utilisateur et l'exposition de données à la vue peut être considérée comme la source de données et de comportement de la couche de vue;
Knockoutjs interprète les modèles de vue comme l'affichage des données et des comportements exprimés sur l'interface utilisateur. Ce n'est pas un modèle de données qui doit être persisté, mais il peut contenir les données stockées par l'utilisateur. ViewModels de Knockout est implémenté à l'aide d'objets JavaScript, et il n'est pas nécessaire de se soucier des balises HTML. Cette méthode abstraite peut garder leur implémentation simple.
avantage:
1.MVVM facilite le développement parallèle, de sorte que le développement frontal et les développeurs back-end ne se affectent pas mutuellement.
2. Résumé la couche de vue, réduisant la logique métier dans le code
3.ViewModel est plus facile à tester
4. Le test de ViewModel n'a pas besoin de se soucier de l'automatisation et de l'interaction de l'interface utilisateur
défaut:
1. Pour une interface utilisateur simple, l'utilisation de MVVM est un peu trop lourde
2. La liaison déclarative des données n'est pas propice au débogage, car le code impératif peut facilement définir des points d'arrêt, et ce mode n'est pas propice à la définition de ces points d'arrêt.
3. La liaison des données peut créer beaucoup de comptabilité dans des applications non triviales. Vous ne voulez pas non plus vous retrouver avec une situation plus complexe dans laquelle la liaison est plus compliquée que l'objet lié.
4. Dans les grandes applications, il est difficile de concevoir la couche de mode de vue avant d'obtenir un grand nombre de généralisations.