Suunnittelukuvio on vain ylläpidettävissä oleva ja uudelleenkäytettävä tapa kirjoittaa koodia, jota voidaan soveltaa yleisesti esiintyviin ongelmiin. On olemassa lukuisia malleja, kuten MVC, MVVM, DI jne. Se riippuu ongelmasta, että mitä suunnittelukaavaa on noudatettava.

Tämä blogi korostaa MVC: n ja MVVM: n suunnittelukuvioita viitaten AngularJS: iin.

aloitetaan:

MVC-Suunnittelukuvio

aluksi, MVC-suunnittelukuvio ei ole erityinen kulmikkaille, sinun on täytynyt nähdä / toteuttaa tämä kuvio monissa muissa ohjelmointikielissä.

MVC: n suunnittelukuvio näkyy Kulmikkaissa kuvioissa, mutta ennen kuin siihen päästään, katsotaan, mitä kaikkea MVC: n suunnittelukuvio sisältää:

  1. Model: Model is nothing but data.
  2. View: View edustaa tätä tietoa.
  3. Controller: Controller toimii välittäjänä näiden kahden välillä.

katsotaan alla olevaa koodia:

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

yllä olevassa pätkässä tekstiämme edustaa ”sampleText” – muuttuja. Tämä on meidän mallimme. Controller päivittää näkymää näyttämällä näkymän tiedot korvaamalla ”” sampleText-muuttujan arvolla. Se on ohjain, joka hallinnoi suhdetta meidän malli ja näkymä, joka on HTML.

MVC: ssä jos teemme näkymäänmuutoksen, sitä ei päivitetä mallissa. Mutta AngularJS, olemme kuulleet, että on olemassa jotain kutsutaan 2-tie Sidonta ja tämä 2-tie Sidonta mahdollistaa MVVM suunnittelu kuvio. MVVM sisältää periaatteessa 3 asiaa:

  1. malli
  2. View
  3. View Model

ohjain on todellisuudessa korvattu View Model-mallilla MMVM: n suunnittelukuviossa. View Model ei ole mitään muuta kuin JavaScript-toiminto, joka on jälleen kuin ohjain ja vastaa näkymän ja mallin välisen suhteen ylläpidosta, mutta ero tässä on, jos päivitämme jotain näkyvää, se päivittyy mallissa, muuttaa mitään mallissa, se näkyy näkyvässä, mikä on mitä kutsumme 2-way sitovaksi.

katsotaan alla annettua esimerkkiä:

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

yllä oleva koodi sisältää 2 syöttölaatikkoa, joihin tarvitaan numero ja jakaja kyseisen luvun jakamiseksi. Jakolaskun tulos näkyy merkin ”tulos” edessä.

myös se, mikä on syöte näissä kahdessa syöttölaatikossa, näkyy itse syöttölaatikon edessä. Tämä koodi näyttää JavaScriptin MVVM-suunnittelukaavan hyvin selvästi, tästä näet miten:

MVVM.jpg

yllä oleva kaavio jakaa koodin malliksi, Katselumalliksi ja Katselumalliksi.

aloitan näkymällä. Tiedämme, että näkymä on meidän HTML, joten päivitämme sen kirjoittamalla ” 6 ”numero tekstikenttään ja” 3 ” jakaja tekstikenttään. Heti kun näkymässä tehdään muutoksia, View Model saa tietää siitä, ja nämä arvot päivitetään malliin. Tämän lisäksi tärkein työ on, että tapahtuu näkymä malli on jako, numero on saada jaettu jakaja ja on tulos on osoitettu ’ data.tuloksen ” muuttuja. Tässä, koska ’ data.tulos ’ on meidän mallimme, ja koska tässä on muutos sen alkuarvosta ’0’ arvoon ’2’ nyt, näkymä päivittyy ja jakotulos näkyy HTML: ssä.

tämän vuoksi sanomme, että AngularJS noudattaa MVVM: n suunnittelukuviota.

Follow Me

Github

Vastaa

Sähköpostiosoitettasi ei julkaista.