Inhalt
- Eine kurze Zusammenfassung
- Was ist MVVM (Model View ViewModel)?
- Temperatur App in MVVM:
- Wie MVVM MVC verbessert
- Vor- und Nachteile von MVVM
- Fazit
Ich habe großes Interesse daran, verschiedene Lösungen für ein Problem zu finden. Derzeit werden verschiedene Architekturen für iOS-Anwendungen untersucht.
Eine kurze Zusammenfassung
In einem früheren Artikel "Model View Controller in iOS" Ich erklärte, warum wir diese Muster wie MVC, MVVM usw. überhaupt brauchen. Ich erkundete auch MVC und untersuchte die Vor- und Nachteile, die MVC mit sich bringt.
In MVC trennen wir unsere Ansicht vom Modell, indem wir einen Controller einführen, der sie miteinander verbindet. Diese Trennung bietet eine bessere Codepflege und Testbarkeit. In der iOS-Version von MVC besteht jedoch die Einschränkung, dass Ansicht und Controller eng miteinander verbunden sind. Daher ist es schwierig, die Ansicht zu verspotten, um den Controller zu testen. Mit zunehmender Komplexität von View wird der Controller sperrig und schwieriger zu testen.
Was ist MVVM (Model View ViewModel)?
MVVM wurde ursprünglich von John Gossman von Microsoft eingeführt und in der Windows Presentation Foundation (WPF) verwendet. Wie MVC bietet auch MVVM eine Kleben bekannt als ViewModel, das die Ansicht und das Modell miteinander verbindet.
Aussicht ist die sichtbare Entität auf dem Bildschirm, mit der der Benutzer interagieren kann. Es zeigt dem Benutzer Informationen an und ermöglicht es dem Benutzer, Informationen hinzuzufügen / zu aktualisieren oder Aktionen wie das Ändern des Benutzernamens oder das Ausführen einer Speicheraktion auszuführen. Wohingegen Modell Stellt alle Daten bereit und stellt Vorgänge bereit, die eine Ansicht ausführen kann. Lassen Sie uns in die reale App eintauchen, um zu sehen, wie es funktioniert Kleben.
Angenommen, Sie entwickeln eine Temperatur-App, mit der Benutzer die Temperatur ihrer Stadt anzeigen und die Stadttemperatur ebenfalls ändern können. Die App sieht ungefähr so aus:
Wenn der Benutzer die App öffnet, wird die Temperatur in der Ansicht wie folgt angezeigt:
In dem obigen Fall wird onViewDidLoad ausgelöst. Glue ruft die Informationen aus dem Modell ab, indem die Funktion getTemperature aufgerufen wird. Diese Funktion gibt die Temperatur im Int-Typ zurück, daher muss Glue diesen Wert formatieren, bevor wir ihn anzeigen können. Der Kleber ruft also seine Hilfsfunktion ConvertInDisplayForm auf. Diese Funktion misst die Temperatur und gibt einen String im Format „Temp> ° C“ zurück. Dann setzt kleber den formatierten Wert durch Aufrufen von setTempLabelText in Label. Unsere App zeigt jetzt die Temperatur von „20 ° C“ auf dem Bildschirm an.
Nun wollen wir sehen, was passiert, wenn der Benutzer die Temperatur auf 30 ° C aktualisiert:
In diesem Fall wird die Speicherfunktion von der Ansicht ausgelöst. Glue ruft den eingegebenen Text ab, konvertiert ihn in den Int-Wert und ruft dann setTemperature of Model auf. Außerdem wird die neue Temperatur formatiert und die Benutzeroberfläche mit der neuen Temperatur aktualisiert.
Lassen Sie uns die Aufgaben des Klebers auflisten:
- Es ruft Daten aus dem Modell ab.
- Es konvertiert die Daten in eine sichtbare Form wie „20 ° C“.
- Es lauscht einer Benutzeraktion, um die entsprechende Operation in Model auszuführen.
- Es ruft Daten aus der Ansicht ab und bereitet sie für die Übergabe an das Modell vor.
- Es aktualisiert die auf der Benutzeroberfläche angezeigten Informationen.
Jetzt werden Sie denken, Kleber ist der Controller? Ja, in MVC ist es das. Also, in MVVM ist ViewModel ist Kleber?
MVVM teilt den Kleber in zwei Bereiche:
- ViewModel
- Bindungen
ViewModel Bietet alle für View erforderlichen Dateneigenschaften und den Status der Benutzeroberfläche. Es enthält auch Befehle (Ereignishandler oder Operationen), die View initiieren kann. Wohingegen Bindungen aktualisiert Informationen zur Benutzeroberfläche, wenn Änderungen modelliert werden (oder umgekehrt). Es bindet auch UI-Ereignisse wie Button Tap mit Befehlen, die vom ViewModel bereitgestellt werden.
Microsoft Windows Presentation Foundation bietet ein Bindungsframework, mit dem Benutzeroberflächenelemente an das ViewModel gebunden werden. In iOS können wir die UIViewController-Klasse verwenden, um Elemente an die ViewModel-Klasse zu binden.
Temperatur App in MVVM:
Protokoll TemperatureViewModelDelegate {func temperaturUpdated (_ vm: TemperatureViewModel)} Klasse TemperatureViewModel {private var _temperature: Int = 0 public var delegate: TemperatureViewModelDelegate? public var temperatur: String {return " (_ temperatur) ° C"} public func loadTemperature () {_temperature = 20 delegate? .temperatureUpdated (self)} public func changeTemperature (zu newTemperature: String) {_temperature = Int (newTemperature)? ? 0 delegate? .TemperatureUpdated (self)}} Klasse TemperatureViewController: UIViewController, TemperatureViewModelDelegate {@IBOutlet schwach var tempLbl: UILabel! @IBOutlet schwach var tempTxt: UITextField! var vm = TemperatureViewModel () func viewDidLoad () {super.viewDidLoad () vm.delegate = self vm.loadTemperature ()} func temperaturUpdated (_ vm: TemperatureViewModel) {self.tempLbl.text = vm.temperature} @IBAction func updateT () {vm.changeTemperature (to: tempTxt.text!)}}
Wie Sie sehen, bindet der Controller nur die Daten an und von ViewModel und übergibt Betriebsereignisse an ViewModel. ViewModel implementiert die gesamte Logik zum Laden von Daten und zum Beibehalten des Status der Benutzeroberfläche.
Wird das ViewModel als Controller in MVC sperrig? Wir können das ViewModel in Unter-ViewModels unterteilen, die bestimmte Arten von Ansichten verarbeiten. Auf dem Startbildschirm wird beispielsweise eine Liste von Lebensmitteln angezeigt. In dieser Situation können Sie ListFoodItemViewModel erstellen, das den Bildschirm "Lebensmittel auflisten" darstellt, und ihn dann in HomeViewModel verwenden.
Wie MVVM MVC verbessert
In MVC ist der Controller der Kleber, der viele Verantwortlichkeiten hat (wie oben erläutert), wodurch der Controller sperrig wird. Da der iOS-Controller eng mit View verbunden ist, war es auch schwierig, ihn zu testen. MVVM verschiebt jedoch den Status der Benutzeroberfläche und die Kommunikation mit dem Modell nach ViewModel. Es ist sehr einfach, den Status der Benutzeroberfläche in verschiedenen Szenarien zu testen. Darüber hinaus können ViewModels in untergeordnete ViewModels unterteilt werden, wodurch die Größe und Komplexität von ViewModel verringert wird.
Vor- und Nachteile von MVVM
- Stellen Sie eine schwache Kopplung zwischen Ansicht, Ansichtsstatus und Modell bereit.
- Ermöglicht eine bessere Testbarkeit der Ansichtszustände
- Ermöglicht eine bessere Pflege der komplexen Ansicht.
- Overhead des Schreibens von Bindungscode.
- Machen Sie die Implementierung eines einfachen Bildschirms komplex.
- Erhöhen Sie die Entwicklungs- und Wartungskosten einer einfachen Anwendung.
Fazit
MVVM unterteilt die Verantwortlichkeiten in eine verfeinerte Form als MVC, wodurch das Testen und die Wartung der komplexen Ansicht verbessert werden, die Kosten für Codeentwicklung und -wartung jedoch erhöht werden. Es ist nicht erforderlich, MVVM oder MVC in Ihrem Code zu verwenden. Sie können sie mischen und anpassen und MVVM für komplexe Ansichten und MVC für einfache Ansichten in einer einzigen Anwendung verwenden. Dies kann Ihnen helfen, unnötige Entwicklungs- und Wartungskosten zu reduzieren.
Die Implementierung der Temperatur-App mit MVVM finden Sie hier. Wenn Sie Fragen, Kommentare oder Vorschläge haben, können Sie gerne einen Kommentar hinterlassen.
