MVC
ModelViewController (MVC) ist ein Modell für Computer -Benutzeroberflächen -Entwicklungsmodell, das die Logik der Informationspräsentation und die Benutzerinteraktion trennt. Das Modell enthält Anwendungsdaten und Geschäftslogik; Controller ist verantwortlich für die Konvertierung der Benutzereingaben in Befehle und über das Modell und die Ansicht. Dies ist Wikipedias Erklärung;
Dieses Modell wurde ursprünglich von Trygve Reenskaug bei der Arbeit mit SmallTalk-80 (1979) entworfen und zunächst als Modell-View-Controller-Eduditor bezeichnet. Später wurde MVC durch die eingehende Einführung des Buches "Design Musters: Elemente der wiederverwendbaren objektorientierten Software" völlig beliebt.
Verstehen Sie die Verantwortung, die drei Teile von MVC auszugleichen und die vorhandenen JavaScript -Frameworks, damit wir diese Frameworks besser nutzen können. Als nächstes werden wir zunächst die drei Teile übergeben, aus denen MVC besteht, um zu erfahren, wie die Verantwortlichkeiten jedes Teils als Beispiel einen Demonstrationscode mit Rückgrat mit Backbone geben].
Modell
Modell verwaltet Anwendungsdaten. Wenn sich die Modelldaten ändert, wird der Hörer benachrichtigt [wahrscheinlich eine Ansicht]. Nach Erhalt der Benachrichtigung wird der Hörer entsprechende Änderungen vornehmen.
Sicht
View ist eine visuelle Darstellung des aktuellen Zustandsmodells. Die Ansicht beobachtet die Änderungen des Modells und wird benachrichtigt, wenn sich das Modell ändert, und ermöglicht die Ansicht, sich selbst zu aktualisieren. Im Allgemeinen verwenden wir die Template -Engine, um das Modell in der Ansicht zu rendern.
Controller
Controller ist ein Vermittler zwischen Modellen und Ansichten. Die Aufgabe besteht darin, die Ansicht zu aktualisieren, wenn sich das Modell ändert, und das Modell zu aktualisieren, wenn der Benutzer die Ansicht betreibt.
Javascipt MVC -Framework -Vergleich
Unterschiedliche Menschen haben unterschiedliche Vergleichsmethoden. Der Schlüssel hängt davon ab, worauf Sie achten:
1. Wenn Sie den Details des URL -Routings, der Datenspeicherung des Frameworks, der Datenspeicherung, der Anzeigeimplementierung usw. mehr Aufmerksamkeit schenken, können Sie sich darauf konzentrieren, JavaScript Thron: Framework Sword;
2. Wenn Sie spezifischen Beispielen des Frameworks mehr Aufmerksamkeit schenken, gibt es hier ein Open -Source -Projekt, bei dem verschiedene JavaScript -MVC -Frameworks für dieselbe Demo verwendet werden. Sie können die Unterschiede in bestimmten Anwendungen jedes Frameworks deutlich erkennen. Hier ist die offizielle Website von todomvc
Die Vorteile von MVC bringen uns:
1. leicht zu warten
2. Die Entkopplung der Modellansicht bedeutet, dass die Geschäftslogik besser getestet werden kann.
3. Der Code kann besser wiederverwendet werden
4. Die modulare Entwicklung kann die Arbeitsteilung klarer machen, einige Menschen konzentrieren sich auf die Geschäftslogik und einige Menschen konzentrieren sich auf die Benutzeroberfläche.
5. Nachdem wir das klassische MVC -Modell überprüft haben, verstehen wir das Konzept der Überlagerung in der Anwendung und die Verantwortlichkeiten jeder Ebene. Gleichzeitig sollten wir in der Lage sein, die Unterschiede zwischen allen JavaScript -MVC -Frameworks und dem klassischen MVC -Modell zu identifizieren, das wir erklären. Auf diese Weise sollten wir uns bei der Auswahl des MVC -Frameworks darauf konzentrieren, wie Modelle, Ansichten, Controller implementiert werden und sogar, wie bestimmte Codes implementiert werden können, um uns dabei zu helfen, das am besten geeignete JavaScript -MVC -Framework besser auszuwählen.
MVVM
Der vollständige Name von MVVM ist Modellansicht ViewModel. Dieses Architekturmodell wurde ursprünglich von Microsofts Martinfowler als Spezifikation des Microsoft -Präsentationsschicht -Designmodells vorgeschlagen. Es ist ein Derivat des MVC -Modells. Der Schwerpunkt des MVVM-Modells liegt auf UI-Entwicklungsplattformen, die eine ereignisgesteuerte, wie HTML5, [2] [3] Windowspretation Foundation (WPF), Silverlight und T ZK Framework, Adobe Flex unterstützen können.
Der größte Teil der Implementierung dieses Modells wird von anderen Ebenen getrennt, indem Datenbindungen in der View-Schicht deklariert werden, was die Arbeitsteilung zwischen Front-End-Entwicklern und Back-End-Entwicklern erleichtert. Front-End-Entwickler schreiben gebundene Daten, umModel im HTML-Tag zu sehen. Modell und ViewModel sind Back-End-Entwickler, die diese beiden Schichten über die Logik der Entwicklung von Anwendungen aufrechterhalten.
In den letzten Jahren wurde das MVVM -Modell in JavaScript implementiert. Derzeit umfassen relativ reife Frameworks Knockoutjs, Kendo MVVM und Bolback.js. Nehmen wir KnockoutJs als Beispiel, um die spezifischen Verantwortlichkeiten und Beispielcodes jedes Teils des MVVM -Modells anzuzeigen und gleichzeitig die Vor- und Nachteile der Verwendung dieses Modells zu verstehen.
Modell
Wie andere MV* -Familienmitglieder repräsentiert das Modell Daten in einem bestimmten Feld oder einer bestimmten Daten, die für die Anwendung erforderlich sind, eine typische feldspezifische Daten wie Benutzerinformationen [Benutzername, Avatar, E-Mail, Telefonnummer] oder musikalische Informationen [Songname, Release Year, Album];
Das Modell konzentriert sich nur auf Dateninformationen und kümmert sich nicht um Verhalten. Es formatiert keine Daten oder die Anzeige von Daten im Browser, was nicht in seiner Verantwortung liegt. Formatierungsdaten sind die Aufgabe der Ansichtsschicht, und die Geschäftslogikschicht wird im Ansichtsmodell eingekapselt, um mit dem Modell zu interagieren.
Ein unerwarteteres Verhalten in der Modellschicht besteht darin, die Daten zu überprüfen. Wenn der Benutzer beispielsweise die E -Mail eingibt, bestimmen Sie, ob das E -Mail -Format korrekt ist.
In KnockoutJs wird das Modell im Grunde genommen gemäß der obigen Definition implementiert, aber es wird Ajax Calling Server -Dienst zum Lesen und Schreiben von Modelldaten geben.
Sicht
View bezieht sich auf den Teil der Anwendung, der direkt mit dem Benutzer interagiert. Es ist eine interaktive Benutzeroberfläche, um den Stand des ViewModel darzustellen. Die Ansicht wird eher als aktiv als passiv angesehen? Dieser Satz bedeutet, dass sich die passive Ansicht nicht um die Domäne des Modells in der Anwendung kümmert und die Domäne des Modells im Controller aufrechterhalten wird. Die aktive Ansicht von MVVM umfasst Datenbindung, Ereignisse und das Verhalten von Modell und ViewModel muss verstanden werden. Obwohl diese Verhaltensweisen den Attributen entsprechen können, muss die Ansicht weiterhin auf das Ereignis des ViewModel reagieren, und die Ansicht ist nicht für die Kontrolle des Staates verantwortlich.
Die Ansichtsschicht von KnockoutJs ist ein einfaches HTML -Dokument, das der Datenerklärung des ViewModel zugeordnet ist. Gleichzeitig zeigt die Ansichtsschicht von KnockoutJs die vom ViewModel erhaltenen Daten an, übergibt Befehle an das ViewModel und aktualisiert den geänderten Status des ViewModel.
ViewModel
Es kann berücksichtigt werden, dass ViewModel ein Controller ist, der speziell für die Datenumwandlung verwendet wird. Es kann die Informationen im Modell in Informationen in der Ansicht umwandeln und gleichzeitig Befehle aus der Ansicht zum Modell übergeben.
In diesem Sinne sieht ViewModel eher wie ein Modell aus, steuert jedoch einen Großteil der Anzeigelogik der Ansicht. Gleichzeitig enthält ViewModel auch einige Methoden, um den Stand der Ansicht aufrechtzuerhalten und das Modell gemäß den Verhalten und Ereignissen der Ansicht zu aktualisieren.
Zusammenfassend befindet sich das ViewModel hinter der UI -Schicht, und es kann als Datenquelle und Verhalten der Ansichtsschicht angesehen werden.
KnockoutJs interpretiert ViewModels als Anzeige von Daten und Verhaltensweisen, die auf der Benutzeroberfläche ausgedrückt werden. Es ist kein Datenmodell, das angehalten werden muss, aber die vom Benutzer gespeicherten Daten. Die ViewModels von Knockout werden mit JavaScript -Objekten implementiert, und es müssen sich nicht um HTML -Tags kümmern. Diese abstrakte Methode kann ihre Implementierung einfach halten.
Vorteil:
1.MVVM erleichtert die parallele Entwicklung, sodass sich die Entwicklungs- und Back-End-Entwickler von Front-End-Entwicklern nicht auswirken.
2.. Zusammenfassung Die View -Schicht, reduzieren Sie die Geschäftslogik im Code
3.ViewModel ist einfacher zu testen als ereignisgesteuert
4. Der Test von ViewModel muss sich nicht um UI -Automatisierung und Interaktion kümmern
Mangel:
1. Für eine einfache Benutzeroberfläche ist die Verwendung von MVVM etwas zu schwer
2. Die deklarative Datenbindung ist für das Debuggen nicht förderlich, da imperativen Code leicht Haltepunkte festgelegt werden können und dieser Modus für die Festlegung solcher Haltepunkte nicht förderlich ist.
3. Die Datenbindung kann in nicht trivialen Anwendungen eine Menge Buchhaltung erzeugen. Sie möchten auch keine komplexere Situation haben, in der Bindung komplizierter ist als das gebundene Objekt.
4. In großen Anwendungen ist es schwierig, die Ansichten-Modellschicht zu entwerfen, bevor eine große Anzahl von Verallgemeinerungen erhalten wird.