Design Pattern ist nichts anderes als eine wartbare und wiederverwendbare Art, Code zu schreiben, der auf häufig auftretende Probleme angewendet werden kann. Es gibt zahlreiche Entwurfsmuster wie MVC, MVVM, DI usw. Es hängt vom Problem ab, welches Entwurfsmuster befolgt werden muss.

Dieser Blog konzentriert sich auf MVC- und MVVM-Entwurfsmuster in Bezug auf AngularJS.

Los geht’s:

MVC-Entwurfsmuster

Zunächst ist das MVC-Entwurfsmuster nicht spezifisch für AngularJS, Sie müssen dieses Muster in vielen anderen Programmiersprachen gesehen / implementiert haben.

MVC Design Pattern kann in AngularJS gesehen werden, aber bevor wir darauf eingehen, wollen wir sehen, was alles MVC Design pattern beinhaltet:

  1. Model: Model ist nichts als Daten.
  2. View: View repräsentiert diese Daten.
  3. Controller: Controller vermittelt zwischen den beiden.

Sehen wir uns den folgenden Code an:

<!DOCTYPE html><html ng-app><head> <title>MVC</title> <script type="text/javascript" src="angular.min.js"></script></head><body ng-controller="TextController"><p></p></body><script> function TextController($scope) { $scope.sampleText = 'This is a demo!'; }</script></html>

Im obigen Snippet wird unser Text durch die Variable „sampleText“ dargestellt. Das ist unser Modell. Der Controller aktualisiert die Ansicht, indem die Daten in der Ansicht angezeigt werden, indem „“ durch den Variablenwert sampleText ersetzt wird. Es ist der Controller, der die Beziehung zwischen unserem Modell und der Ansicht verwaltet, die der HTML-Code ist.

Wenn wir in MVC Änderungen an der Ansicht vornehmen, wird diese im Modell nicht aktualisiert. In AngularJS haben wir jedoch gehört, dass es eine sogenannte 2-Wege-Bindung gibt, und diese 2-Wege-Bindung ermöglicht das MVVM-Entwurfsmuster. MVVM enthält grundsätzlich 3 Dinge:

  1. Model
  2. View
  3. View Model

Controller wird im MMVM-Entwurfsmuster tatsächlich durch View Model ersetzt. Ansichtsmodell ist nichts anderes als eine JavaScript-Funktion, die wiederum wie ein Controller ist und für die Aufrechterhaltung der Beziehung zwischen Ansicht und Modell verantwortlich ist, aber der Unterschied hier ist, wenn wir etwas in der Ansicht aktualisieren, wird es im Modell aktualisiert, etwas im Modell ändern, es wird in der Ansicht angezeigt, was wir 2-Wege-Bindung nennen.

Sehen wir uns das folgende Beispiel an:

<!DOCTYPE html><html ng-app><head> <title>Number Divisor</title> <script type="text/javascript" src="angular.min.js"></script></head><body><form ng-controller="DivisionController"> <label>Number :</label> <input name="number" ng-change="divisionNeeded()" ng-model="data.number"> <label>Number entered by User :</label> <br> <label>Divisor :</label> <input name="divisor" ng-change="divisionNeeded()" ng-model="data.divisor"> <label>Number entered by User :</label> <br> <label>Result :</label> </form></body><script> function DivisionController($scope) { $scope.data = {number: 0, divisor: 0, result: 0}; $scope.divisionNeeded = function () { $scope.data.result = $scope.data.number / $scope.data.divisor; } }</script></html>

Der obige Code enthält 2 Eingabefelder, die eine Zahl und einen Divisor benötigen, um diese Zahl zu teilen. Das Ergebnis der Division wird vor dem Label ‚Result‘ angezeigt.

Außerdem wird alles, was in diesen beiden Eingabefeldern eingegeben wird, vor dem Eingabefeld selbst angezeigt. Dieser Code zeigt das MVVM-Entwurfsmuster in JavaScript sehr deutlich, hier sehen Sie, wie:

MVVM.jpg

Das obige Diagramm trennt den Code in Modell, Ansicht und Ansichtsmodell.

Ich fange zuerst mit view an. Wir wissen, dass view unser HTML ist, also aktualisieren wir es, indem wir ‚6‘ in das Zahlentextfeld und ‚3‘ in das Divisor-Textfeld eingeben. Sobald eine Änderung in der Ansicht vorgenommen wird, erfährt das Ansichtsmodell davon, und diese Werte werden dann im Modell aktualisiert. Abgesehen davon ist die Hauptarbeit, die im Ansichtsmodell stattfindet, die Division, die Zahl wird durch den Divisor geteilt und das Ergebnis wird den Daten zugewiesen.ergebnis‘ Variable. Hier, da ‚Daten.result‘ ist unser Modell, und da sich hier der Anfangswert von ‚0‘ auf ‚2‘ ändert, wird die Ansicht aktualisiert und das Ergebnis der Division wird im HTML-Code angezeigt.

Aus diesem Grund sagen wir, dass AngularJS dem MVVM-Entwurfsmuster folgt.

Folge mir

Github

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.