designmønster er intet andet end en vedligeholdelig og genanvendelig måde at skrive kode på, som kan anvendes til almindeligt forekommende problemer. Der er adskillige designmønstre som MVC, MVVM, DI osv. Det afhænger af problemet, som design mønster skal følges.

denne blog lægger vægt på MVC og MVVM design mønstre med henvisning til AngularJS.

lad os komme i gang:

MVC Design Pattern

til at begynde med er MVC design pattern ikke specifikt for AngularJS, du skal have set / implementeret dette mønster på mange andre programmeringssprog.

MVC design mønster kan ses i AngularJS, men før vi går ind i det, lad os se, hvad alle MVC design mønster omfatter:

  1. Model: Model er intet andet end data.
  2. Vis: Vis repræsenterer disse data.
  3. Controller: Controller formidler mellem de to.

lad os 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 ovenstående uddrag er vores tekst repræsenteret af variablen “sampletekst”. Dette er vores model. Controller opdaterer visningen ved at vise data på visningen ved at erstatte “” med sampletekst variabel værdi. Det er controlleren, der styrer forholdet mellem vores model og visningen, som er HTML.

i MVC, hvis vi foretager nogen ændring i visningen, bliver den ikke opdateret i model. Men i AngularJS har vi hørt, at der er noget, der hedder 2-vejs binding, og denne 2-vejs binding muliggør MVVM designmønster. MVVM indeholder dybest set 3 ting:

  1. Model
  2. Vis
  3. Vis Model

Controller er faktisk erstattet af Vis Model i MMVM design mønster. Vis Model er intet andet end en JavaScript-funktion, der igen er som en controller og er ansvarlig for at opretholde forholdet mellem visning og model, men forskellen her er, hvis vi opdaterer noget i betragtning, det bliver opdateret i model, ændre noget i model, det vises i betragtning, hvilket er det, vi kalder 2-vejs binding.

lad os 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>

ovenstående kode indeholder 2 indtastningsfelter, der tager nummer og en divisor for at opdele dette nummer. Resultatet af opdelingen vises foran etiketten ‘resultat’.

uanset hvad der er input i disse to inputbokse vises også foran selve inputboksen. Denne kode viser MVVM-designmønsteret i JavaScript meget tydeligt, her ser du hvordan:

MVVM.JPG

ovenstående diagram adskiller koden i Model, visning og vis Model.

Jeg starter først med visning. Vi ved,at visningen er vores HTML, så vi opdaterer den ved at indtaste ‘6’ i taltekstfeltet og ‘3’ i divisor-tekstfeltet. Så snart der er foretaget ændringer i visningen, får Vis Model kendskab til det, og disse værdier opdateres derefter til modellen. Bortset fra dette, det vigtigste arbejde er, at der sker i betragtning Model er opdelingen, nummer bliver divideret med divisor og er resultatet bliver tildelt ‘data.resultat ‘ variabel. Her, siden ‘ data.resultat ‘ er vores model, og da der er ændring her fra den oprindelige værdi af ‘0’ til ‘2’ Nu, bliver visningen opdateret, og resultatet af divisionen vises på HTML.

det er derfor, vi siger AngularJS følger MVVM design mønster.

Følg mig

Github

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.