Kehittämisprosessissa olio-ohjelmointi , mallinäkymä-ohjain (MVC) on menetelmä tai suunnittelumalli, joka auttaa sinua liittämään käyttöliittymän taustalla oleviin tietomalleihin tehokkaasti ja menestyksekkäästi. Tässä artikkelissa opimme MVC-arkkitehtuuri seuraavassa järjestyksessä:
JavaScript MVC -arkkitehtuuri
Viime aikoina MVC-mallia käytetään monenlaisiin ohjelmointikieliin, mukaan lukien . JavaScript koostuu useista kehyksistä, jotka tukevat MVC-arkkitehtuuria tai sen muunnelmia. Sen avulla kehittäjät voivat lisätä rakennetta sovelluksiinsa helposti ja ilman paljon vaivaa.
MVC koostuu kolmesta komponentista:
- Malli
- Näytä
- Ohjain
Siirrytään nyt eteenpäin ja perehdytään näiden kolmen JavaScript MVC -komponentin syvyyteen.
Yhdistä lajittelu c ++ -esimerkki
Mallit
Malleja käytetään sovelluksen tietojen hallintaan. He eivät ole kiinnostuneita käyttöliittymästä tai esitystasoista. Sen sijaan ne edustavat ainutlaatuisia tietomuotoja, joita sovellus voi tarvita. Kun mallia muutetaan tai päivitetään, se yleensä ilmoittaa tarkkailijoille tapahtuneesta muutoksesta, jotta he voivat toimia vastaavasti.
ms sql -oppaat aloittelijoille
Otetaan esimerkki yksinkertaistetusta mallista, joka on toteutettu selkärangan avulla:
var Photo = Selkäranka.Malli.extend ({// Valokuvan oletusattribuutit oletuksille: {src: 'placeholder.jpg', kuvateksti: 'Oletuskuva', katsottu: false}, // Varmista, että jokaisella luotulla valokuvalla on `src`. alustaa: function () {this.set ({'src': this.defaults.src})}}Valokuvagalleriassa kuvan käsite ansaitsee oman mallinsa, koska se edustaa ainutlaatuista verkkotunnuskohtaista dataa. Tällainen malli voi sisältää siihen liittyviä määritteitä, kuten kuvatekstin, kuvalähteen ja muita metatietoja. Yllä olevassa esimerkissä tietty valokuva tallennettaisiin mallin esiintymään.
Näkymät
Näkymät ovat visuaalinen esitys malleista, jotka tarjoavat suodatetun kuvan niiden nykyisestä tilasta. JavaScript-näkymiä käytetään DOM-elementin rakentamiseen ja ylläpitoon. Näkymä noudattaa tyypillisesti mallia, ja siitä ilmoitetaan mallin muuttuessa, jolloin näkymä voi päivittää itsensä vastaavasti. Esimerkiksi:
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Käytämme mallikirjasto, kuten Alaviiva // -malli, joka luo HTML-kuvan // valokuvamerkinnälle photoEl.innerHTML = _.template ('#photoTemplate', {src: photoModel.getSrc ()})} photoModel.addSubscriber (render) photoEl. addEventListener ('click', function () {photoController.handleEvent ('click', photoModel)}) var show = function () {photoEl.style.display = ''} var hide = function () {photoEl.style.display = 'none'} return {showView: show, hideView: hide}}Tämän arkkitehtuurin etuna on, että jokaisella komponentilla on oma erillinen roolinsa sovelluksen toiminnassa tarpeen mukaan.
Ohjaimet
Ohjaimet toimivat kuin välituotteet mallien ja näkymien välillä, jotka ovat vastuussa mallin päivittämisestä, kun käyttäjä manipuloi näkymää. Yllä olevassa esimerkissä valokuvagalleriasovelluksestamme ohjain olisi vastuussa käyttäjän tekemien muutosten käsittelystä tietyn kuvan muokkausnäkymässä, päivittämällä tietty valokuva malli, kun käyttäjä on lopettanut muokkauksen.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('tuhota', tämä.proxy (tämä .remove))}, render: function () {// Käsittele mallia this.replace ($ ('#photoTemplate') .tmpl (this.item)) palauta tämä}, poista: function () {this.el.remove () tämä. julkaisu ()}})Tämä esimerkki tarjoaa sinulle erittäin kevyen, yksinkertaisen tavan hallita muutoksia mallin ja näkymän välillä.
JavaScript MVC -kehykset
Viime vuosina joukko JavaScript MVC: tä on kehitetty. Jokainen näistä kehyksistä seuraa jonkinlaista MVC-mallia tavoitteenaan kannustaa kehittäjiä kirjoittamaan jäsennellympää JavaScript-koodia. Jotkut kehyksistä ovat:
miten luoda lokitiedostoja Java
- backbone.js
- Ember.js
- KulmaJS
- Sencha
- Kendo-käyttöliittymä
Tämän avulla olemme päässeet JavaScript MVC -artikkelin loppuun. Toivon, että ymmärsit MVC-arkkitehtuurin kolme komponenttia.
Nyt kun tiedät JavaScript MVC: stä, tutustu kirjoittanut Edureka. Verkkokehityksen sertifiointikoulutus auttaa sinua oppimaan luomaan vaikuttavia verkkosivustoja HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- ja Google-sovellusliittymien avulla ja asentamaan sen Amazon Simple Storage Service (S3) -palveluun.
Onko sinulla kysymys meille? Mainitse se JavaScript MVC: n kommenttiosassa ja palaamme sinuun.