Designmønster er ingenting annet enn en vedlikeholdbar og gjenbrukbar måte å skrive kode på som kan brukes på vanlige problemer. Det er mange designmønstre SOM MVC, MVVM, DI etc. Det avhenger av problemet som hvilket designmønster må følges.

denne bloggen legger vekt PÅ MVC og mvvm design mønstre med referanse Til AngularJS.

La oss komme i gang:

MVC Design Pattern

Til å begynne med ER MVC design pattern ikke spesifikt For AngularJS, du må ha sett / implementert dette mønsteret i mange andre programmeringsspråk.MVC design mønster kan sees I AngularJS, men før du får inn som la oss se hva alle GJØR MVC design mønster inkluderer: Modell: Modell er ingenting, men data.

  • Vis: Vis representerer disse dataene.
  • Controller: Controller formidler mellom de to.
  • La oss se koden nedenfor:

    <!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 teksten ovenfor er vår tekst representert av «sampleText» – variabel. Dette er vår modell. Controller oppdaterer visningen ved å vise dataene på visningen ved å erstatte «» med sampleText variabel verdi. Det er kontrolleren som styrer forholdet mellom vår modell og visningen SOM ER HTML.

    I MVC hvis vi gjør noen endringer i visningen, blir den ikke oppdatert i modellen. Men I AngularJS, vi har hørt at det er noe som kalles 2-veis binding og denne 2-veis binding gjør MVVM design mønster. MVVM inneholder i utgangspunktet 3 ting:

    1. Modell
    2. Vis
    3. Vis Modell

    Kontrolleren er faktisk erstattet Av Vis Modell I MMVM design mønster. Vis Modell er ingenting annet enn En JavaScript-funksjon som igjen er som en kontroller og er ansvarlig for å opprettholde forholdet mellom visning og modell, men forskjellen her er, hvis vi oppdaterer noe i sikte, blir det oppdatert i modell, endrer noe i modell, det vises i visning, som er det vi kaller 2-veis binding.

    La oss se eksemplet nedenfor:

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

    koden ovenfor inneholder 2 inngangsbokser som tar tall og en divisor for å dele det nummeret. Resultatet av divisjonen vises foran etiketten ‘Resultat’.

    også, hva er input i de to input boksene vises foran input boksen selv. Denne koden viser MVVM designmønsteret i JavaScript veldig tydelig, her ser du hvordan:

    MVVM.jpg

    diagrammet ovenfor skiller koden inn I Modell, Vis Og Vis Modell.

    jeg begynner først med visning. Vi vet at visningen er VÅR HTML,så vi oppdaterer DEN ved å skrive inn’ 6 ‘i nummer-tekstboksen og’ 3 ‘ i divisor-tekstboksen. Så snart noen endring er gjort i visningen, Får View Model vite om Det, og disse verdiene blir deretter oppdatert I Modellen. Bortsett fra dette er hovedarbeidet som skjer I Visningsmodellen divisjonen, tallet blir delt av divisoren og resultatet blir tildelt data .resultat ‘ variabel. Her, siden ‘ data.resultat ‘ er vår modell, og som det er endring her fra det opprinnelige verdien av ‘0’ til ‘2’ nå, visningen blir oppdatert og resultatet av divisjonen er vist PÅ HTML.

    Det er derfor Vi sier AngularJS følger mvvm design mønster.

    Følg meg

    Github

    Legg igjen en kommentar

    Din e-postadresse vil ikke bli publisert.