Ext.js - Architettura

Ext JS segue l'architettura MVC / MVVM.

MVC - Architettura Model View Controller (versione 4)

MVVM - Model View Viewmodel (versione 5)

Questa architettura non è obbligatoria per il programma, tuttavia, è consigliabile seguire questa struttura per rendere il codice altamente manutenibile e organizzato.

Struttura del progetto con l'app Ext JS

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

La cartella dell'app Ext JS risiederà nella cartella JavaScript del progetto.

L'app conterrà file di controller, visualizzazione, modello, archivio e utilità con app.js.

app.js- Il file principale da cui inizierà il flusso del programma, che dovrebbe essere incluso nel file HTML principale utilizzando il tag <script>. L'app chiama il controller dell'applicazione per il resto della funzionalità.

Controller.js- È il file del controller dell'architettura Ext JS MVC. Contiene tutto il controllo dell'applicazione, i listener di eventi e la maggior parte delle funzionalità del codice. Ha il percorso definito per tutti gli altri file utilizzati in quell'applicazione come store, view, model, require, mixin.

View.js- Contiene la parte dell'interfaccia dell'applicazione, che si presenta all'utente. Ext JS utilizza varie visualizzazioni ricche di interfaccia utente, che possono essere estese e personalizzate qui in base alle esigenze.

Store.js- Contiene i dati memorizzati nella cache locale che devono essere visualizzati nella vista con l'aiuto degli oggetti del modello. Store recupera i dati utilizzando proxy che hanno il percorso definito per i servizi per recuperare i dati di backend.

Model.js- Contiene gli oggetti che vincolano i dati del negozio da visualizzare. Ha la mappatura degli oggetti dati di backend alla vista dataIndex. I dati vengono recuperati con l'aiuto di store.

Utils.js- Non è incluso nell'architettura MVC ma è una best practice da utilizzare per rendere il codice pulito, meno complesso e più leggibile. Possiamo scrivere metodi in questo file e chiamarli nel controller o nel visualizzatore ovunque richiesto. È utile anche ai fini della riutilizzabilità del codice.

Nell'architettura MVVM, il controller è sostituito da ViewModel.

ViewModel- Fondamentalmente media i cambiamenti tra vista e modello. Associa i dati dal modello alla vista. Allo stesso tempo, non ha alcuna interazione diretta con la vista. Ha solo conoscenza del modello.

Come funziona

Ad esempio, se stiamo utilizzando un oggetto modello in due o tre posizioni nell'interfaccia utente. Se modifichiamo il valore in un punto dell'interfaccia utente, possiamo vedere senza nemmeno salvare la modifica. Il valore del modello cambia e quindi si riflette in tutte le posizioni dell'interfaccia utente, ovunque venga utilizzato il modello.

Rende lo sforzo dello sviluppatore molto minore e più facile poiché non è richiesta alcuna codifica aggiuntiva per l'associazione dei dati.