Categorie
Javascript Programmazione

{JS} MVC/MVVM Pattern

Cos’è il MVC Pattern?

Il MVC (Model-View-Controller) Pattern è un pattern strutturale il cui obiettivo è dividere/disaccoppiare l’interfaccia, vista dell’utente, dalla gestione dei dati.

Spesso è tradotto in italiano con la dicitura modello-vista-controllo, questo pattern in informatica, è un architettura molto diffuso nello sviluppo di sistemi software, in particolare nell’ambito della programmazione orientata agli oggetti e in applicazioni web, in grado di separare la logica di presentazione dei dati dalla logica di elaborazione.

Come suggerisce il nome, questo pattern si compone di tre componenti nello specifico si tratta di tre oggetti:

modelOggetto che rappresenta i dati da gestire
viewOggetto che racchiude l’insieme degli elementi dell’interfaccia utente (come label, caselle di testo, immagini, etc. che popoleranno il model)
controllerOggetto che riceve e gestisce i comandi/interazione dell’utente

L’interfaccia, ovvero quella porzione di codice che si occuperà di ciò che vedrà l’utente, è composta dal Model e dalla View:
Quest’ultimi sono gestiti e controllati dal Controller che effettuerà le modifiche al Model in base agli input inviati dagli utenti, generati, dall’interazione con gli elementi della View.
La View altro non è che una “mappatura” degli elementi che compongono il DOM e nel nostro caso specifico si occuperà di “mappare” un semplice form html.

MVC Pattern

Per comprendere meglio il funzionamento del pattern partiremo da un form html per poi esaminare i vari componenti.

Form html

<label for="campoTxtNome">
<input id="campoTxtNome" type="text" value=""/><br/>
<label for="campoTxtCognome">
<input id="campoTxtCognome" type="text" value=""/><br/>
<button id="bottoneSalva"/>Salva</button><br/>

model

Il model è un oggetto, un oggetto rappresentativo-iniziale.
Possiamo immaginarlo come una skin, un “impronta”, di quelli che saranno i valori da mostrare.

var model = {
nome: "Mario",
cognome: "Rossi"
}

view

La View è un oggetto specifico che si occupa di “mappare” gli elementi che compongono il nostro form html presente nel DOM del documento.

var view = {
campoTxtNome: document.getElementById("campoTxtNome"),
campoTxtCognome: document.getElementById("campoTxtCognome"),
bottoneSalva: document.getElementById("bottoneSalva")
}

controller

L’oggetto controller si occuperà delle interazioni effettuate dall’utente con il form-html e del data-binding.

data-binding

Il Data Binding è quel meccanismo che consente di associare e sincronizzare una fonte dati agli elementi dell’interfaccia utente



Esso prevede due metodi:

init(), il primo metodo che si occupa di inizializzare la view , la vista dell’utente, associando a ciascun elemento, presente nel DOM e nello specifico nel form-html, il corrispondente valore dell’oggetto model nostro oggetto-rappresentativo-inziale.

salva(), il secondo metodo si occupa invece di inserire all’interno della proprietà del model i dati inseriti dagli utenti nei campi di input.

var controller = {
	init: function() {
		view.campoTxtNome.value = model.nome;
		view.campoTxtCognome.value = model.cognome;
		view.bottoneSalva.onclick = controller.salva;
	},
	salva: function() {
		model.nome = view.campoTxtNome.value;
		model.cognome = view.campoTxtCognome.value;
	}
};

Particolare attenzione è da rivolgere verso la stringa di codice presente nel metodo init() che rimanda all’evento onclick al metodo salva()

view.bottoneSalva.onclick = controller.salva;
Note: all'interno del metodo salva() avremo potuto includere un comando con una richiesta XHR per inviare tali informazioni immesse sul server verso un database, un file json o xml.

Operatività

Abbiamo racchiuso all’interno di questo box-html il nostro form.
In realtà abbiamo già caricato tutto il codice JS ed è consultabile tramite la console-dev del browser.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *