编程知识 cdmana.com

Mise en œuvre du cadre de base mvvm par JS natif

MVCC'est un modèle de cadre,C'est aussi le premier mode de cadre à toucher lors de l'apprentissage de l'avant,EtMVPAvecMVVMTout est dansMVCSur la base de,Chacun a ses avantages et ses inconvénients,Cet article est principalement présenté selon la carte de pensée ci - dessous.

Un.、mvc mvp mvvmConcept de conception

1.Model-View-Controller (MVC)

· Model —— Logique opérationnelle responsable de l'application.Il gère l'état de l'application.Cela comprend également la lecture et l'écriture de données,Persister l'état de l'application,Peut même inclure des tâches liées à la gestion des données,Par exemple, la validation des réseaux et des données.

· View —— Cette partie a deux tâches importantes:Montrer aux utilisateurs les données et traiter les interactions entre les utilisateurs et les applications.

· Controller —— view Couche et model La couche passe par un ou plusieurs controller Lier ensemble.

2.Model-View-Presenter (MVP) 

· Model —— model Représente un ensemble de classes qui décrivent la logique opérationnelle et les données.Il établit les règles de modification et de manipulation des données.

· View —— view Responsable de l'interaction avec l'utilisateur . Cela n'a rien à voir avec la logique à mettre en œuvre dans le processus .

· Presenter —— presenter De View Obtenir l'entrée,In model Traitement des données avec l'aide de , Et transmettre les résultats à view.

3.Model-View-ViewModel (MVVM)

· Model —— MVVM Dans model Couche et MVC Dans model Les couches sont très similaires , Contient les données de base nécessaires au bon fonctionnement de l'alimentation .

· View —— view La couche est l'interface graphique entre l'utilisateur et le mode de conception ,Similaire à MVC Dans view Couche. Pour présenter les données traitées .

· View-Model —— view-model Est à la fois une abstraction de la couche de vue , Fournit également l'emballage des données du modèle à accéder . C'est - à - dire, Il contient un modèle qui peut être converti en vue , Et contient aussi des commandes , Les couches de vue peuvent utiliser ces commandes pour modifier le modèle .

2.、mvc mvp mvvmComparer

Évaluation du rendement  —— Quand on teste UI Quand la performance de , En ce qui concerne le cadre rendu ,Peut être considéré comme MVP C'est l'un des plus fiables , Le plus petit blocage .MVVM La liaison des données dans crée une surcharge supplémentaire , Il est probable qu'il y aura une grave dégradation des performances lors de l'exécution de tâches complexes .

Compatibilité —— Quand on teste leur compatibilité ,MVVM Le meilleur d'entre eux , Grâce à sa liaison de données .MVP Mieux que MVC, Ce dernier a de sérieux problèmes de redémarrage .

Extensibilité —— En parlant de modèles de conception , Ils doivent avoir une certaine extensibilité , C'est pourquoi nous pouvons continuellement ajouter de nouvelles fonctionnalités et de nouvelles politiques à nos applications . D'après ce qui précède ,MVP Et MVVM La différence est moindre ,Mais MVVM Un peu plus maintenable que .Dans la plupart des cas, Chaque extension ultérieure ,Adoption MVC L'application du modèle nécessite plus de changements .

Références —— In MVC Moyenne,view Pas de référence directe controller,Et MVP Moyenne, La vue fait référence à presenter,In MVVM Moyenne,view Cité view-model.

Entrée de l'application  —— Pour MVC, L'entrée de l'application est controller,Et pour MVP Et MVVM,L'entrée est view.

Trois、PrimitivejsRéalisationMVVMCadre de base

1.Définitions de base

Object.defineProperty Objet de la déclaration générale , Définir et modifier les propriétés \

Syntaxe:

Object.defineProperty(obj,prop,descriptor)

obj: Objet cible à traiter

prop:Nom de l'attribut à définir ou à modifier

descriptor:Descripteurs d'attributs à définir ou à modifier

Descripteur descriptorIl y a deux formes: Descripteurs de données et descripteurs de stockage , Les deux ont des propriétés communes :

configurable,Supprimer ou non,Par défautfalse, Impossible de modifier après la définition

enumerable, Est - ce que ,Par défautfalse, Impossible de modifier à l'avenir

Descripteur de données value:La valeur de cet attribut,Par défautundefined. writable: Quand et quand trueHeure,valuePour être modifié par l'opérateur d'affectation.Par défautfalse.

writableEtconfigurable La différence est que le premier est value Peut être modifié ,Ce dernier estvalue Peut être supprimé .

Descripteur de stockage get():Un pour la propriétégetterMéthode,Par défautundefined. set():Un pour la propriétésetterMéthode,Par défautundefined.

Propriétés communes configurableSet tofalseHeure, Ses propriétés internes ne peuvent pas être utilisées deleteSupprimer; Pour supprimer ,J'ai besoin d'aide.configurableSet totrue.

Attention!: Le descripteur de données et le descripteur de stockage ne peuvent pas coexister ,Sinon, une erreur sera signalée

Interception des données UtiliserObject.definePropertyPour intercepter les données, Pour permettre l'écoute des données .

En d'autres termes,,C'estdata Les propriétés internes sont surveillées , Quand la propriété est appelée , On peut faire des trucs dessus. , Faire tomber la valeur retournée ; Lors du réglage des propriétés , Ne lui donne pas .

Bien sûr que c'est ennuyeux ,J'essaie juste d'expliquer., On peut faire des trucs à l'intérieur , Atteindre les résultats souhaités .

C'est...observe Comment écrire cette fonction ?

2.Mode observateur

L'observateur(Observer)Définition du modèle: Une dépendance d'un à plusieurs objets,Quand l'état d'un objet change,Tous les objets qui en dépendent sont notifiés et automatiquement mis à jour.Ce modèle est parfois appelé publication-Mode d'abonnement、Modèle-Mode de vue,C'est un modèle de comportement d'objet

Subject C'est le constructeur,new Subject() Créer un objet sujet , Il maintient un tableau d'observateurs qui s'abonnent au sujet , Il y a plusieurs façons de , Si vous ajoutez un observateur addObserver、Supprimer l'observateurremoveObserver、 Informer l'observateur des mises à jour notify

ObserverC'est le constructeur,new Observer()  Créer un objet observateur ,L'objet a unupdateMéthodes,Quand on appellenotify En fait, tous les observateurs sont appelés observerPropreupdate La méthode est le constructeur

Par exemple,: Subject C'est le numéro public lancé par Tencent ,new Subject() C'est le numéro public d'une institution —— Faciès Miocène , Il s'agit de maintenir un groupe d'utilisateurs qui s'abonnent à ce numéro public , Le cénozoïque divise les utilisateurs en deux groupes , Un groupe de Trump est  addObserver, Une liste noire est :removeObserver, Il peut ajouter des utilisateurs au Groupe Zhongfang , Vous pouvez lire des barres noires sur la liste noire , Si des prestations sont versées , Il régnera sur les utilisateurs de Trump :notify.Observer C'est un groupe d'utilisateurs de Trump ,new Observer() C'est un utilisateur spécifique ——Xiao Wang., Il a dû ouvrir le trafic pour recevoir la poussée de bien - être du nouveau monde :updata\

Sujet comment ajouter un observateur subject.addObserver(observer)C'est compliqué, Donnez l'autorité directement à l'observateur , Donnez - leur la permission d'ajouter le Groupe Zhongfang \

Références:

MVC,MVP,MVVM Comparer

MVC,MVP Et MVVM Représentation graphique de

Avec Proto JS Réalisation MVVM Cadre1—— Mode observateur et surveillance des données

版权声明
本文为[Utilisateur 3847331201471]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/09/20210914164425996r.html

Scroll to Top