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:
- modell: modell nem más, mint az adatok.
- nézet: a Nézet ezeket az adatokat képviseli.
- 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:
- modell
- nézet
- 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:
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