Ext.js - Architektur

Ext JS folgt der MVC / MVVM-Architektur.

MVC - Model View Controller-Architektur (Version 4)

MVVM - Modellansicht Ansichtsmodell (Version 5)

Diese Architektur ist für das Programm nicht obligatorisch. Es wird jedoch empfohlen, diese Struktur zu befolgen, um Ihren Code in hohem Maße wartbar und organisiert zu machen.

Projektstruktur mit Ext JS App

----------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

Der Ext JS-App-Ordner befindet sich im JavaScript-Ordner Ihres Projekts.

Die App enthält Controller-, Ansichts-, Modell-, Speicher- und Dienstprogrammdateien mit app.js.

app.js- Die Hauptdatei, von der aus der Programmablauf gestartet wird und die mit dem <script> -Tag in die Haupt-HTML-Datei aufgenommen werden soll. App ruft den Controller der Anwendung für den Rest der Funktionalität auf.

Controller.js- Dies ist die Controller-Datei der Ext JS MVC-Architektur. Dies enthält die gesamte Steuerung der Anwendung, die Ereignis-Listener und die meisten Funktionen des Codes. Der Pfad ist für alle anderen in dieser Anwendung verwendeten Dateien definiert, z. B. Speichern, Anzeigen, Modellieren, Erfordernis, Mixins.

View.js- Es enthält den Schnittstellenteil der Anwendung, der dem Benutzer angezeigt wird. Ext JS verwendet verschiedene UI-Rich-Ansichten, die hier je nach Anforderung erweitert und angepasst werden können.

Store.js- Es enthält die lokal zwischengespeicherten Daten, die mit Hilfe von Modellobjekten in der Ansicht gerendert werden sollen. Store ruft die Daten mithilfe von Proxys ab, für die der Pfad definiert ist, damit Dienste die Backend-Daten abrufen können.

Model.js- Es enthält die Objekte, die die anzuzeigenden Speicherdaten binden. Es verfügt über die Zuordnung von Backend-Datenobjekten zur Ansicht dataIndex. Die Daten werden mit Hilfe des Speichers abgerufen.

Utils.js- Es ist nicht in der MVC-Architektur enthalten, aber eine bewährte Methode, um den Code sauber, weniger komplex und lesbarer zu machen. Wir können Methoden in diese Datei schreiben und sie bei Bedarf im Controller oder im View-Renderer aufrufen. Dies ist auch für die Wiederverwendbarkeit von Code hilfreich.

In der MVVM-Architektur wird der Controller durch ViewModel ersetzt.

ViewModel- Es vermittelt grundsätzlich die Änderungen zwischen Ansicht und Modell. Es bindet die Daten aus dem Modell an die Ansicht. Gleichzeitig hat es keine direkte Interaktion mit der Ansicht. Es hat nur Kenntnis des Modells.

Wie es funktioniert

Zum Beispiel, wenn wir ein Modellobjekt an zwei bis drei Stellen in der Benutzeroberfläche verwenden. Wenn wir den Wert an einer Stelle der Benutzeroberfläche ändern, können wir sehen, ohne diese Änderung zu speichern. Der Wert des Modells ändert sich und wird so an allen Stellen in der Benutzeroberfläche angezeigt, wo immer das Modell verwendet wird.

Dies macht den Aufwand des Entwicklers viel geringer und einfacher, da zum Binden von Daten keine zusätzliche Codierung erforderlich ist.