designmönster är inget annat än ett underhållbart och återanvändbart sätt att skriva kod som kan tillämpas på vanligt förekommande problem. Det finns många designmönster som MVC, MVVM, DI etc. Det beror på problemet som vilket designmönster måste följas.

denna blogg betonar på MVC och MVVM designmönster med hänvisning till AngularJS.

Låt oss komma igång:

MVC Design Pattern

till att börja med är MVC design pattern inte specifikt för AngularJS, du måste ha sett/implementerat detta mönster på många andra programmeringsspråk.

MVC designmönster kan ses i AngularJS, men innan vi går in i det, låt oss se vad allt innehåller MVC designmönster:

  1. modell: modell är inget annat än data.
  2. Visa: Visa representerar dessa data.
  3. Controller: styrenheten förmedlar mellan de två.

Låt oss se koden nedan:

<!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>

i ovanstående utdrag representeras vår text av variabeln” sampleText”. Detta är vår modell. Controller uppdaterar vyn genom att visa data på vyn genom att ersätta ”” med sampletext variabelvärde. Det är styrenheten som hanterar förhållandet mellan vår modell och vyn som är HTML.

i MVC om vi gör någon förändring i vyn uppdateras den inte i Modell. Men i AngularJS har vi hört att det finns något som kallas 2-vägs bindning och denna 2-vägs bindning möjliggör MVVM designmönster. MVVM innehåller i princip 3 saker:

  1. Modell
  2. Visa
  3. Visa Modell

Controller ersätts faktiskt av Visa modell i MMVM designmönster. View Model är inget annat än en JavaScript-funktion som återigen är som en kontroller och ansvarar för att upprätthålla förhållandet mellan view och model, men skillnaden här är, om vi uppdaterar något i sikte, uppdateras det i model, ändrar något i model, det dyker upp i view, vilket är vad vi kallar 2-vägs bindning.

Låt oss se exemplet nedan:

<!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>

ovanstående kod innehåller 2 inmatningsrutor som tar nummer och en divisor för att dela upp det numret. Resultatet av uppdelningen visas framför etiketten ’resultat’.

vad som än är inmatat i de två inmatningsrutorna visas framför själva inmatningsrutan. Denna kod visar MVVM-designmönstret i JavaScript mycket tydligt, här ser du hur:

MVVM.JPG

ovanstående diagram segregerar koden i Modell, Visa och visa Modell.

Jag börjar först med vy. Vi vet att vyn är vår HTML, så vi uppdaterar den genom att ange ’6’ i textrutan nummer och ’3’ i textrutan divisor. Så snart någon ändring görs i vyn, View Model får veta om det, och dessa värden uppdateras sedan till modellen. Bortsett från detta är det huvudsakliga arbetet som händer med tanke modell är uppdelningen, nummer blir dividerat med delaren och är resultatet tilldelas ’data.resultat ’ variabel. Här, eftersom ’data.resultatet ’ är vår modell, och eftersom det är förändring här från det ursprungliga värdet av ’0’ till ’2’ Nu, view blir uppdaterad och resultatet av uppdelningen visas på HTML.

det är därför vi säger att AngularJS följer MVVM-designmönster.

Följ mig

Github

Lämna ett svar

Din e-postadress kommer inte publiceras.