Design Pattern není nic jiného než udržovatelný a opakovaně použitelný způsob psaní kódu, který lze aplikovat na běžně se vyskytující problémy. Existuje mnoho návrhových vzorů, jako je MVC, MVVM, DI atd. Záleží na problému, který návrhový vzor je třeba dodržovat.

Tento blog klade důraz na designové vzory MVC a MVVM s odkazem na AngularJS.

začněme:

návrhový Vzor MVC

Chcete-li začít s, návrhový vzor MVC není specifický pro AngularJS, musíte vidět/realizován tento model v mnoha jiných programovacích jazycích.

MVC design pattern lze vidět v AngularJS, ale než se do toho dostaneme, podívejme se, co všechno obsahuje MVC design pattern:

  1. Model: Model není nic jiného než data.
  2. View: View představuje tato data.
  3. Controller: regulátor zprostředkovává mezi těmito dvěma.

podívejme se na níže uvedený kód:

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

ve výše uvedeném úryvku je náš text reprezentován proměnnou“ sampleText“. Tohle je náš model. Řadič aktualizuje zobrazení zobrazením dat v zobrazení nahrazením „“ proměnnou hodnotou sampleText. Je to řadič, který řídí vztah mezi naším modelem a pohledem, který je HTML.

V MVC pokud provedeme nějakou změnu v zobrazení, které se v modelu neaktualizuje. Ale v AngularJS jsme slyšeli, že existuje něco, co se nazývá 2-way vazba a tato 2-way vazba umožňuje MVVM design vzor. MVVM v podstatě zahrnuje 3 věci:

  1. Model
  2. View
  3. View Model

Controller je ve skutečnosti nahrazen View Model v MMVM design pattern. Cílem Modelu není nic než JavaScript funkce, která je znovu jako správce a je zodpovědný za udržování vztahu mezi view a model, ale rozdíl tady je, když jsme se aktualizovat něco, vzhledem, to se aktualizuje v modelu, změnit něco v modelu, to se ukáže v pohledu, který je to, co nazýváme 2-way závazné.

podívejme se na níže uvedený příklad:

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

výše uvedený kód obsahuje 2 vstupní pole, která vezme číslo a je dělitelem dělit, že číslo. Výsledek dělení je zobrazen před štítkem „výsledek“.

také, co je vstup do těchto dvou vstupních polí je zobrazen v přední části vstupního pole sám. Tento kód ukazuje vzor návrhu MVVM v JavaScriptu velmi jasně, zde vidíte, jak:

MVVM.jpg

výše uvedený diagram odděluje kód do modelu, Zobrazení a zobrazení modelu.

nejprve začínám s výhledem. Víme, že pohled je náš HTML, takže jej aktualizujeme zadáním „6“ do textového pole číslo a “ 3 “ do textového pole dělitel. Jakmile je v zobrazení provedena jakákoli změna, Model View se o tom dozví a tyto hodnoty jsou poté aktualizovány do modelu. Kromě toho, hlavní práce je, že se děje v pohledu modelu je rozdělení, číslo je stále děleno dělitel a je výsledek je přiřazen ‚ data.výsledek ‚ proměnná. Tady, od ‚ data.výsledek ‚je náš model, a protože zde dochází ke změně z počáteční hodnoty‘ 0 ‚na‘ 2′, zobrazení se aktualizuje a výsledek rozdělení se zobrazí na HTML.

to je důvod, proč říkáme AngularJS následuje MVVM design vzor.

Follow Me

Github

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.