Sencha Touch - Architektur

Die unterste Ebene für jede mobile Anwendung ist das Betriebssystem. Darüber hinaus wird alles oder jedes erstellt. Dann haben wir die Browser, auf denen wir die Anwendungen ausführen werden. Es könnte Chrome, Safari, IE alles sein. Die obere Schicht ist ein W3-Standard, der allen gemeinsam ist. Sencha Touch steht oder basiert auf W3-Standards, die nichts anderes als HTML5 sind. Dadurch ist eine einzelne Anwendung mit verschiedenen Browsern verschiedener Geräte kompatibel.

Sencha Touch ist eine Kombination aus drei Frameworks - ExtJs, JqTouch und Raphael (Vektorzeichnung). Es folgt der MVC-Architektur. MVC unterteilt den Code in besser verwaltbare Abschnitte.

Obwohl die Architektur für das Programm nicht obligatorisch ist, empfiehlt es sich, diese Struktur zu befolgen, um Ihren Code in hohem Maße wartbar und organisiert zu machen.

Projektstruktur mit Sencha Touch 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 Sencha Touch-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 beginnt. Es sollte mit dem <script> -Tag in die Haupt-HTML-Datei aufgenommen werden. App ruft den Controller der Anwendung für den Rest der Funktionalität auf.

Controller.js- Dies ist die Controller-Datei der Sencha Touch MVC-Architektur. Dies enthält die gesamte Steuerung der Anwendung, die Ereignis-Listener und die meisten Funktionen des Codes. Es führt die folgenden Aufgaben aus: Routing, Zwischenansicht zwischen Ansicht und Modell, und führt Ereignisse aus.

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

Store.js- Es enthält die lokal zwischengespeicherten Daten, die mit Hilfe von Modellobjekten angezeigt werden sollen. Store ruft die Daten mithilfe von Proxys ab, wobei der Pfad für Dienste zum Abrufen der Backend-Daten definiert ist.

Model.js- Es enthält die Objekte, die die anzuzeigenden Speicherdaten binden. Es ist die Darstellung des realen Objekts, die sich im Wesentlichen mit der Datenbank befasst.

Utils.js- Es ist nicht in der MVC-Architektur enthalten, es wird jedoch empfohlen, dies zu verwenden, 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 View Renderer aufrufen. Dies ist auch für die Wiederverwendbarkeit von Code hilfreich.