Kūrimo procese Objektinis programavimas , modelio rodinio valdiklis (MVC) yra metodika ar dizaino modelis, padedantis efektyviai ir sėkmingai susieti vartotojo sąsają su pagrindiniais duomenų modeliais. Šiame straipsnyje sužinosime apie MVC architektūra tokia seka:
„JavaScript“ MVC architektūra
Pastaruoju metu MVC modelis taikomas įvairioms programavimo kalboms, įskaitant . „JavaScript“ sudaro daugybė rėmelių, palaikančių MVC architektūrą ar jos variantus. Tai leidžia kūrėjams lengvai ir be didelių pastangų pridėti struktūrą prie savo programų.
MVC susideda iš trijų komponentų:
- Modelis
- Vaizdas
- Valdiklis
Dabar pereikime ir įsigilinkime į šių trijų „JavaScript MVC“ komponentų gylį.
ką daro .innerhtml
Modeliai
Modeliai naudojami programos duomenims tvarkyti. Jie nesusiję su vartotojo sąsaja ar pateikimo sluoksniais. Užuot pateikę unikalias duomenų formas, kurių gali prireikti programai. Pakeitus ar atnaujinus modelį, jis paprastai praneš savo stebėtojams apie įvykusius pokyčius, kad jie galėtų atitinkamai veikti.
Paimkime supaprastinto modelio, įdiegto naudojant „Backbone“, pavyzdį:
svarbesnis nei perkrovimas c ++
var Photo = stuburas.Model.extend ({// Numatytieji nuotraukos atributai: {src: 'placeholder.jpg', antraštė: 'Numatytasis vaizdas', žiūrimas: klaidingas}, // Įsitikinkite, kad kiekviena sukurta nuotrauka turi `src`. inicializuoti: function () {this.set ({'src': this.defaults.src})}}Nuotraukų galerijoje nuotraukos koncepcija nusipelno savo modelio, nes ji atspindi unikalų domenui būdingų duomenų tipą. Tokiame modelyje gali būti susiję atributai, tokie kaip antraštė, vaizdo šaltinis ir papildomi metaduomenys. Ankstesniame pavyzdyje konkreti nuotrauka bus saugoma modelio egzemplioriuje.
Peržiūrų
Rodiniai yra vizualus modelių, kurie pateikia filtruotą dabartinės būsenos vaizdą, vaizdavimas. „JavaScript“ rodiniai naudojami kuriant ir palaikant DOM elementą. Rodinyje paprastai stebimas modelis ir apie jį pranešama, kai modelis keičiasi, todėl rodinys gali atitinkamai atnaujinti save. Pavyzdžiui:
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Mes naudojame šablonų biblioteka, pvz., „Pabraukimas“ // šablonai, kurie sugeneruoja HTML mūsų // nuotraukų įrašui 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}}Šios architektūros pranašumas yra tas, kad kiekvienas komponentas atlieka savo atskirą vaidmenį, kai reikia, kad programa veiktų.
Kontrolieriai
Valdikliai veikia kaip tarpiniai modeliai ir rodiniai, kurie yra atsakingi už modelio atnaujinimą, kai vartotojas manipuliuoja rodiniu. Aukščiau pateiktame mūsų nuotraukų galerijos programos pavyzdyje valdiklis bus atsakingas už naudotojo atliktų pakeitimų, susijusių su konkrečios nuotraukos redagavimo rodiniu, atnaujinimą, konkretaus nuotraukos modelio atnaujinimą, kai vartotojas baigs redaguoti.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('sunaikinti', tai.proxy (tai .remove))}, render: function () {// Tvarkykite šablonus this.replace ($ ('#photoTemplate') .tmpl (this.item)) grąžinkite šį}, pašalinkite: function () {this.el.remove () tai. išleisti ()}})Šis pavyzdys suteiks jums labai lengvą, paprastą būdą valdyti modelio ir vaizdo pokyčius.
„JavaScript MVC Framework“
Per pastaruosius kelerius metus „JavaScript MVC“ serija buvo sukurti. Kiekviena iš šių sistemų atitinka tam tikrą MVC modelio formą, kad paskatintų kūrėjus rašyti labiau struktūrizuotą „JavaScript“ kodą. Kai kurios sistemos yra:
- stuburas.js
- Ember.js
- KampinisJS
- Sencha
- „Kendo“ vartotojo sąsaja
Tai pasiekėme „JavaScript MVC“ straipsnio pabaigą. Tikiuosi, kad supratote tris MVC architektūros komponentus.
kada tai naudoti. java
Dabar, kai žinote apie „JavaScript MVC“, patikrinkite pateikė Edureka. Žiniatinklio kūrimo sertifikavimo mokymai padės sužinoti, kaip sukurti įspūdingas svetaines naudojant HTML5, CSS3, „Twitter Bootstrap 3“, „jQuery“ ir „Google“ API ir įdiegti ją „Amazon Simple Storage Service“ (S3).
Turite mums klausimą? Prašau paminėti tai „JavaScript MVC“ komentarų skyriuje ir mes su jumis susisieksime.