a tervezési minta nem más, mint egy karbantartható és újrafelhasználható kódírás, amely alkalmazható a gyakran előforduló problémákra. Számos tervezési minta létezik, például MVC, MVVM, DI stb. A problémától függ, hogy melyik tervezési mintát kell követni.

Ez a blog hangsúlyozza MVC és MVVM tervezési minták hivatkozva AngularJS.

kezdjük el:

MVC tervezési minta

először is, az MVC tervezési minta nem specifikus az AngularJS – re, ezt a mintát sok más programozási nyelven látnia/megvalósítania kell.

MVC tervezési minta látható AngularJS, de mielőtt rátérnénk, hogy lássuk, mi minden nem MVC tervezési minta tartalmazza:

  1. modell: modell nem más, mint az adatok.
  2. nézet: a Nézet ezeket az adatokat képviseli.
  3. vezérlő: a vezérlő közvetít a kettő között.

lássuk az alábbi kódot:

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

a fenti részletben a szöveget a “sampleText” változó képviseli. Ez a mi modellünk. A vezérlő frissíti a nézetet az adatok megjelenítésével a nézetben a “” helyettesítésével a sampleText változó értékével. Ez a vezérlő kezeli a modellünk és a nézet közötti kapcsolatot, amely a HTML.

az MVC-ben, ha bármilyen változtatást hajtunk végre a nézetben, az nem frissül a modellben. De AngularJS, hallottuk, hogy van valami úgynevezett 2-utas kötés, és ez a 2-utas kötés lehetővé MVVM tervezési minta. Az MVVM alapvetően 3 dolgot tartalmaz:

  1. modell
  2. nézet
  3. modell megtekintése

a vezérlőt valójában az Mmvm tervezési mintában szereplő Nézetmodell váltja fel. A View Model nem más, mint egy JavaScript függvény, amely ismét olyan, mint egy vezérlő, és felelős a nézet és a modell közötti kapcsolat fenntartásáért, de a különbség itt az, hogy ha frissítünk valamit a nézetben, akkor frissül a modellben, bármit megváltoztat a modellben, megjelenik a nézetben, amit 2-utas kötésnek hívunk.

lássuk az alábbi példát:

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

a fenti kód 2 beviteli mezőt tartalmaz, amelyek számot és osztót tartalmaznak a szám megosztásához. A felosztás eredménye az ‘eredmény’címke előtt látható.

továbbá, bármi is van a két beviteli mezőben, maga a beviteli mező előtt jelenik meg. Ez a kód nagyon világosan mutatja az MVVM tervezési mintáját a JavaScript-ben, itt láthatja, hogyan:

MVVM.jpg

a fenti ábra elkülöníti a kódot modell, nézet és nézet modell.

először a nézettel kezdem. Tudjuk,hogy ez a nézet a HTML, ezért frissítjük úgy, hogy beírjuk a ‘6’ számot a szám szövegmezőbe, a ‘3’ pedig az osztó szövegmezőbe. Amint bármilyen változás történik a nézetben, a Nézetmodell tudomást szerez róla, majd ezeket az értékeket frissíti a modellbe. Ettől eltekintve, a fő munka, hogy történik tekintettel modell az Osztás, szám egyre osztva az osztó, és az eredmény van rendelve ‘adatok.eredmény ‘ változó. Itt, mivel ‘ adat.eredmény ‘ a mi modellünk, És mivel itt változás van a kezdeti ‘0’ – ról ‘2’ – re, a nézet frissül, és az Osztás eredménye megjelenik a HTML-ben.

ezért mondjuk, hogy az AngularJS az MVVM tervezési mintát követi.

Kövess engem

Github

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.