ontwerppatroon is niets anders dan een onderhoudbare en herbruikbare manier om code te schrijven die kan worden toegepast op veel voorkomende problemen. Er zijn talrijke ontwerppatronen zoals MVC, MVVM, DI enz. Het hangt af van het probleem dat welk ontwerppatroon moet worden gevolgd.

Dit blog legt de nadruk op MVC en MVVM ontwerppatronen met verwijzing naar AngularJS.

laten we beginnen:

MVC Design Pattern

om te beginnen is MVC design pattern niet specifiek voor AngularJS, u moet dit patroon in vele andere programmeertalen hebben gezien/geïmplementeerd.

MVC design pattern kan worden gezien in AngularJS, maar voordat we in dat laten we eens kijken wat alles doet MVC design pattern includes:

  1. Model: Model is niets anders dan data.
  2. weergave: Weergave vertegenwoordigt deze gegevens.
  3. Controller: Controller bemiddelt tussen de twee.

laten we de code hieronder bekijken:

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

in het bovenstaande fragment wordt onze tekst weergegeven door de variabele” sampleText”. Dit is Ons model. Controller is het bijwerken van de weergave van de gegevens op de weergave door het vervangen van “” met sampletext variabele waarde. Het is de controller die de relatie beheert tussen ons model en de weergave die de HTML is.

in MVC als we een wijziging aanbrengen in de weergave wordt deze niet bijgewerkt in model. Maar in AngularJS hebben we gehoord dat er zoiets bestaat als 2-weg binding en deze 2-weg binding maakt MVVM design patroon mogelijk. MVVM bevat in principe 3 dingen:

  1. Model
  2. View
  3. View Model

Controller wordt eigenlijk vervangen door View Model in MMVM design pattern. View Model is niets anders dan een JavaScript-functie die weer als een controller en is verantwoordelijk voor het handhaven van de relatie tussen uitzicht en model, maar het verschil hier is, als we iets te updaten in het zicht, het wordt bijgewerkt in het model, veranderen alles in het model, het verschijnt in het zicht, dat is wat we noemen 2-weg binding.

laten we het voorbeeld hieronder bekijken:

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

de bovenstaande code bevat 2 invoervakken die een getal en een deler nemen om dat getal te delen. Het resultaat van de verdeling staat voor het label ‘resultaat’.

ook wordt de invoer in die twee invoervakken voor het invoervak zelf weergegeven. Deze code toont het MVVM ontwerppatroon in JavaScript heel duidelijk, hier zie je hoe:

MVVM.jpg

het bovenstaande diagram scheidt de code in Model, View En View Model.

Ik begin eerst met weergave. We weten dat view onze HTML is, dus we werken het bij door ‘6’ in het tekstvak nummer en ‘3’ in het tekstvak deler in te voeren. Zodra er een wijziging is aangebracht in de view, krijgt het View-Model hiervan kennis, en deze waarden worden vervolgens bijgewerkt in het Model. Afgezien van dit, het belangrijkste werk is dat gebeurt in View Model is de deling, nummer wordt gedeeld door de deler en is het resultaat wordt toegewezen aan ‘data.resultaat ‘ variabele. Hier, sinds data.resultaat ‘is Ons model, en aangezien er hier verandering is van de beginwaarde van’ 0 ‘naar’ 2 ‘ nu, wordt de weergave bijgewerkt en wordt het resultaat van de verdeling weergegeven op de HTML.

daarom zeggen we dat AngularJS MVVM ontwerppatroon volgt.

Follow Me

Github

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.