javaScript – Was ist der Unterschied zwischen MVVM- und MVC-Entwurfsmustern?

Lassen Sie uns kurz darüber sprechen, was MVVM- und MVC-Entwurfsmuster sind. In MVC kann View direkt auf Model zugreifen! Daher enthält die Ansicht Modellinformationen und zwangsläufig eine gewisse Geschäftslogik.

1. Was ist der Unterschied zwischen MVVM und MVC?

In MVC kann View direkt auf Model zugreifen! Daher enthält die Ansicht Modellinformationen und zwangsläufig eine gewisse Geschäftslogik. Das MVC-Modell konzentriert sich auf die Invarianz des Modells. Daher hängt das Modell im MVC-Modell nicht von der Ansicht ab, sondern die Ansicht vom Modell. Da ein Teil der Geschäftslogik in View implementiert ist, ist es außerdem schwierig, View zu ändern. Zumindest kann diese Geschäftslogik nicht wiederverwendet werden. Die gesamte Kommunikation erfolgt in MVC. Konzeptionell ist MVVM ein Muster, das Seiten- und Datenlogik wirklich trennt und eine bidirektionale Datenbindung erreichen kann.

2. Was ist VM?

VM ist ein von View abstrahiertes Datenmodell. Es ist zu beachten, dass VM während der Entwicklung keine anderen Dinge schreibt, die nicht mit den Daten zusammenhängen, wie z. B. einige Methoden.

3. Wie korrespondieren MVVM und Code?

MVVM besteht aus drei Teilen: Modell, Ansicht und VM. Das Modell entspricht dem logischen Teil, der Daten abruft und die Daten in etwas verarbeitet, das von der VM verwendet werden kann, während die Ansicht dem Datenanzeige- und Datenbindungsteil entspricht und VM ein abstraktes Datenmodellobjekt ist.

4. Welche Frameworks verwenden das MVVM-Modell?

Es gibt viele Front-End-Frameworks, die das MVVM-Muster verwenden, wie AngularJS, Avalon, Emberjs, KnockoutJS, WinJs, React, Riverts, Way, Vue, Regular, Drop und andere Frameworks

5. MVC-, MVP-, MVVM-Nutzungsszenarien?

Um ihre Einsatzszenarien zu verstehen, sollten Sie zunächst ihre Vor- und Nachteile verstehen.

Vor- und Nachteile von MVC:

Vorteile:

1. Trennen Sie die gesamte Geschäftslogik im Controller mit einem hohen Maß an Modularität. Wenn sich die Geschäftslogik ändert, müssen die Ansicht und das Modell nicht geändert werden. Ändern Sie einfach den Controller in einen anderen Controller (austauschbarer Controller).

2. Der Beobachtermodus kann mehrere Ansichten gleichzeitig aktualisieren.

Nachteile:

1. Controller-Tests sind schwierig. Da der Ansichtssynchronisierungsvorgang von der Ansicht selbst ausgeführt wird und die Ansicht nur in einer Umgebung mit einer Benutzeroberfläche ausgeführt werden kann. Beim Unit-Testen des Controllers ohne UI-Umgebung kann die Korrektheit der Geschäftslogik des Controllers nicht überprüft werden: Wenn der Controller das Modell aktualisiert, kann er den Aktualisierungsvorgang der Ansicht nicht bestätigen.

2. Die Ansicht kann nicht in Komponenten aufgeteilt werden. Die Ansicht ist stark von einem bestimmten Modell abhängig. Wenn Sie diese Ansicht als wiederverwendbare Komponente für eine andere Anwendung extrahieren müssen, ist dies schwierig. Da das Domänenmodell verschiedener Programme unterschiedlich ist

Vor- und Nachteile von MVP:

Vorteile:

1. Einfach zu testen. Presenter kommuniziert mit View über Schnittstellen, wenn Unit-Tests Presenter nicht von der UI-Umgebung abhängig machen. Sie können ein View-Objekt verspotten, das nur die View-Schnittstelle implementieren muss. Anschließend werden Abhängigkeiten in Presenter eingefügt, und die Korrektheit der Geschäftslogik von Presenter kann während des Unit-Tests vollständig getestet werden.

2. Die Ansicht kann in Komponenten unterteilt werden. In MVP ist die Ansicht nicht vom Modell abhängig. Dadurch kann View von bestimmten Geschäftsszenarien getrennt werden. Man kann sagen, dass View die Geschäftslogik völlig ignorieren kann. Es muss lediglich eine Reihe von Schnittstellen für Operationen der oberen Ebene bereitgestellt werden. Auf diese Weise können Sie hochgradig wiederverwendbare View-Komponenten erstellen.

Nachteile:

1. Zusätzlich zur Geschäftslogik verfügt Presenter auch über eine große Menge manueller Synchronisierungslogik für Ansicht->Modell und Modell->Ansicht, was Presenter umständlich und schwierig zu warten macht . Es wird schwieriger.

Vor- und Nachteile von MVVM:

Vorteile:

1. Verbessern Sie die Wartbarkeit. Es löst das Problem einer großen Anzahl manueller Synchronisierungen von Ansichten und Modellen in MVP und bietet einen bidirektionalen Bindungsmechanismus. Verbesserte Wartbarkeit des Codes.

2. Vereinfachen Sie das Testen. Da die Synchronisationslogik von Binder verwaltet wird, ändert sich die Ansicht gleichzeitig mit dem Modell, sodass Sie nur die Richtigkeit des Modells sicherstellen müssen und die Ansicht korrekt ist. Stark reduzierte Tests von View-Synchronisierungsaktualisierungen.

Nachteile:

1. Die zu einfache grafische Oberfläche ist nicht anwendbar, sonst tötet das Viehmesser Hühner.

2. Bei großen Grafikanwendungen gibt es viele Ansichtszustände, und die Kosten für die Erstellung und Wartung von ViewModel sind relativ hoch.

3. Die Deklaration der Datenbindung ist zwingend in der Ansichtsvorlage geschrieben und es gibt keine Möglichkeit, diese Inhalte zu unterbrechen und zu debuggen.

Wie aus den oben genannten Vor- und Nachteilen ersichtlich ist, handelt es sich bei MVC->MVP->MVVM um einen Prozess, bei dem Monster getötet und aktualisiert werden. Letzterer löst die von Ersterem hinterlassenen Probleme, optimiert die Mängel von Ersterem in Vorteile und wählt den am besten geeigneten Rahmen entsprechend dem tatsächlichen Projekt aus.

6. Wie wähle ich zwischen Angular, Avalon und Vue?

Angular enthält alle Teile von MV* und verfügt über einen eigenen Regelsatz, sodass es für den PC geeignet ist, aber die Codestruktur wird klarer sein; Avalon ist leichtgewichtig und eignet sich für alte Browser, die Vue hat ein hohes Maß an Browserunterstützung, und die Mindestunterstützung ist IE6, sodass es für Projekte geeignet ist, die mit dem Lao Liu-Browser kompatibel sind; Vue ist hauptsächlich leichtgewichtig und wird nur als Ansichtsteil in MV* verwendet. Es hat die Vorteile, leichtgewichtig zu sein. Einfach zu erlernen und zu verwenden, aber der Nachteil ist, dass es sich um ein großes Projekt handelt. Bei der Verwendung muss es mit anderen Frameworks oder Bibliotheken verwendet werden, was ziemlich mühsam ist.

7. Ursprung der Entwicklung.

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

8. So implementieren Sie die bidirektionale Datenbindung.

Derzeit gibt es drei Hauptmethoden zur Implementierung der bidirektionalen Datenbindung:

1. Manuelle Bindung

Die ältere Implementierungsmethode verwendet den Beobachterprogrammierungsmodus Die Hauptidee besteht darin, Get- und Set-Methoden für das Datenobjekt zu definieren, die Get- oder Set-Daten beim Aufruf manuell aufzurufen und den Rendering-Vorgang der UI-Ebene auszulösen, nachdem die Datenänderung hauptsächlich auf die Szene angewendet wurde, in der die Ansicht die Datenänderung steuert zum Eingeben, Auswählen und Texten. Wenn sich die UI-Ebene ändert, löst sie Ereignisse aus, um die Daten in der Datenebene zu ändern, indem sie auf die Änderung, den Tastendruck, die Tastenbetätigung und andere Ereignisse des Doms hört. Der gesamte Prozess wird durch Funktionsaufrufe abgeschlossen.

2. Dirty-Erkennungsmechanismus

Angular wird durch das typische MVVM-Framework AngularJS repräsentiert und aktualisiert die UI-Ebene durch Überprüfung von Dirty-Daten. Bezüglich der Dirty-Erkennung von Angular gibt es ein paar Dinge, die Sie wissen müssen:

• Der Dirty-Erkennungsmechanismus verwendet keine geplante Erkennung.

• Die Schmutzerkennung wird durchgeführt, wenn sich die Daten ändern.

• Angular kapselt häufig verwendete DOM-Ereignisse, XHR-Ereignisse usw. und löst den Digest-Prozess der Eingabe von Angular aus.

• Im Digest-Prozess wird der Rootscope durchlaufen und alle Beobachter überprüft. (Für das spezifische Design von Angular können Sie sich andere Dokumente ansehen. Hier diskutieren wir nur die Datenbindung.) Schauen wir uns dann an, wie eine schmutzige Erkennung durchgeführt wird: Suchen Sie hauptsächlich alle mit den Daten verbundenen Elemente anhand der festgelegten Daten und vergleichen Sie sie dann Daten ändern sich, und wenn sie sich ändern, wird die Befehlsoperation ausgeführt.

3. Front-End-Datenentführung (Hijacking)

Die Grundidee besteht darin, Object.defineProperty zu verwenden, um das Abrufen und Festlegen von Attributen des Datenobjekts zu überwachen Es werden Daten gelesen und während des Zuweisungsvorgangs wird die Anweisung des Knotens aufgerufen. Verwenden Sie daher einfach das häufigste = Gleichheitszeichen, um den Wert zuzuweisen.

9. MVC-MVVM-Transformation.

Der Kern von Software sind Daten. Die Geschäftslogik dreht sich um die Generierung, Änderung und andere Änderungen von Daten. Rund um die Darstellung von Daten haben sich unterschiedliche Schnittstellentechnologien herausgebildet. Ohne gut gestalteten Code kommt es häufig zu einer Kopplung zwischen der Datenschicht (Persistenzschicht), der Geschäftslogikschicht und dem Schnittstellencode.

Da MVC nicht die vollständige Trennung von Ansicht und Modell erreicht, MVVM jedoch schon, treibt dies den Übergang von MVC zu MVVM voran.

10. Welche Designmuster verwendet MVVM?

Beobachtermodus.

Verwandte Empfehlungen:

Video: JavaScript-Video-Tutorial

Video: WeChat Mini Program Elementary Development Video-Tutorial

Das obige ist der detaillierte Inhalt vonjavaScript – Was ist der Unterschied zwischen MVVM- und MVC-Entwurfsmustern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!