Co je architektura JavaScript MVC a jak funguje?

V procesu vývoje objektově orientované programování , model-view-controller (MVC) je metodika nebo návrhový vzor, ​​který vám pomůže efektivně a úspěšně propojit uživatelské rozhraní se základními datovými modely. V tomto článku se dozvíme o Architektura MVC v následujícím pořadí:

• Architektura JavaScript MVC
• Modely
• Pohledy
• Řadiče
• Rámečky MVC pro JavaScript

Architektura JavaScript MVC

V poslední době se vzor MVC aplikuje na různorodou škálu programovacích jazyků, včetně . JavaScript se skládá z řady rámců podporujících architekturu MVC nebo její varianty. Umožňuje vývojářům snadno a bez velkého úsilí přidat do svých aplikací strukturu.

MVC se skládá ze tří komponent:

• Modelka
• Pohled
• Ovladač

Pojďme nyní a pojďme do hloubky těchto tří komponent MVC JavaScriptu.

java zase zdvojnásobte na int

Modely

Pro správu dat aplikace se používají modely. Nezajímají se o uživatelské rozhraní ani prezentační vrstvy. Místo toho představují jedinečné formy dat, které aplikace může vyžadovat. Když je model změněn nebo aktualizován, obvykle upozorní své pozorovatele na změnu, ke které došlo, aby mohli podle toho jednat.

Uveďme si příklad zjednodušujícího modelu implementovaného pomocí Backbone:

var Photo = Backbone.Model.extend ({// Výchozí atributy pro výchozí nastavení fotografie: {src: 'placeholder.jpg', titulek: 'Výchozí obrázek', zobrazeno: false}, // Zajistěte, aby každá vytvořená fotografie měla `src`. initialize: function () {this.set ({'src': this.defaults.src})}})

Ve fotogalerii by si koncept fotografie zasloužil svůj vlastní model, protože představuje jedinečný druh údajů specifických pro doménu. Takový model může obsahovat související atributy, jako je titulek, zdroj obrázku a další metadata. Ve výše uvedeném příkladu by konkrétní fotografie byla uložena v instanci modelu.

Pohledy

Pohledy jsou vizuální reprezentací modelů, které poskytují filtrovaný pohled na jejich aktuální stav. Zobrazení JavaScript se používají k vytváření a údržbě prvku DOM. Pohled obvykle pozoruje model a je upozorněn, když se model změní, což mu umožňuje odpovídajícím způsobem aktualizovat. Například:

java se vymanila z metody

var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Používáme templating library such as Underscore // templating which generates the HTML for our // photo entry 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'} návrat {showView: show, hideView: hide}}

Výhodou této architektury je, že každá komponenta hraje svou vlastní samostatnou roli při vytváření funkce aplikace podle potřeby.

Řadiče

Řadiče fungují jako meziprodukty mezi modely a pohledy, které jsou zodpovědné za aktualizaci modelu, když uživatel manipuluje s pohledem. Ve výše uvedeném příkladu naší aplikace fotogalerie bude správce zodpovědný za zpracování změn, které uživatel provedl v zobrazení úprav pro konkrétní fotografii, aktualizaci konkrétního modelu fotografie, když uživatel dokončí úpravy.

var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('zničit', this.proxy (toto .remove))}, render: function () {// Zpracování šablon tohoto this.replace ($ ('#photoTemplate') .tmpl (this.item)) vrátit toto}, remove: function () {this.el.remove () this.release ()}})

Tento příklad vám poskytne velmi lehký a jednoduchý způsob správy změn mezi modelem a pohledem.

Rámečky MVC pro JavaScript

V posledních několika letech řada JavaScript MVC byly vyvinuty. Každý z těchto rámců sleduje nějakou formu vzoru MVC s cílem povzbudit vývojáře, aby psali strukturovanější kód JavaScript. Některé z rámců jsou:

• backbone.js
• Ember.js
• AngularJS
• Sencha
• Uživatelské rozhraní Kendo

S tímto jsme se dostali na konec článku JavaScript MVC. Doufám, že jste pochopili tři komponenty zahrnuté v architektuře MVC.

co jsou kontextové filtry v tablo

Nyní, když víte o JavaScript MVC, podívejte se na podle Edureka. Certifikační školení pro vývoj webových aplikací vám pomůže naučit se, jak vytvářet působivé webové stránky pomocí HTML5, CSS3, Twitter Bootstrap 3, jQuery a Google API a jak je nasadit do služby Amazon Simple Storage Service (S3).

Máte na nás dotaz? Uveďte to prosím v sekci komentářů „JavaScript MVC“ a my se vám ozveme.