Sencha-touch-architecture

Sencha Touch-アーキテクチャ

モバイルアプリケーションの最下層はOSであり、その上に何かまたはすべてが構築されます。 次に、アプリケーションを実行するブラウザーがあります。 Chrome、Safari、IEなどがあります。 上位層はW3標準であり、これはすべてに共通です。 Sencha TouchはW3標準に基づいて構築されています。W3標準はHTML5に他なりません。これにより、単一のアプリケーションがさまざまなデバイスのさまざまなブラウザーと互換性を持ちます。

Sencha Touchは、ExtJ、JqTouch、Raphael（ベクター描画）の3つのフレームワークの組み合わせです。 MVCアーキテクチャに従います。 MVCはコードをより管理しやすいチャンクに分離します。

ただし、このプログラムにはアーキテクチャは必須ではありませんが、この構造に従ってコードのメンテナンス性と編成性を高めることをお勧めします。

Sencha Touchアプリのプロジェクト構造

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

Sencha Touchアプリフォルダーは、プロジェクトのJavaScriptフォルダーにあります。

アプリには、app.jsを含むコントローラー、ビュー、モデル、ストア、およびユーティリティファイルが含まれます。

*app.js* -プログラムのフローが開始されるメインファイル。 <script>タグを使用してメインHTMLファイルに含める必要があります。 アプリは、残りの機能のためにアプリケーションのコントローラーを呼び出します。

*Controller.js* -Sencha Touch MVCアーキテクチャのコントローラーファイルです。 これには、アプリケーションのすべての制御、イベントリスナー、およびコードのほとんどの機能が含まれます。 次のタスクを実行します：ルーティング、ビューとモデルの中間、イベントの実行。

*View.js* -アプリケーションのインターフェース部分が含まれ、ユーザーに表示されます。 Sencha Touchは、さまざまなUIリッチビューを使用します。これらのビューは、要件に応じて拡張およびカスタマイズできます。

*Store.js* -ローカルにキャッシュされたデータが含まれており、モデルオブジェクトの助けを借りてビューにレンダリングされます。 ストアは、プロキシを使用してデータを取得します。プロキシには、バックエンドデータを取得するサービス用に定義されたパスがあります。

*Model.js* -表示するストアデータをバインドするオブジェクトが含まれています。 これは、基本的にデータベースを扱う実世界のオブジェクトの表現です。

*Utils.js* -MVCアーキテクチャには含まれていませんが、これを使用してコードをクリーンで複雑さを抑え、読みやすくすることをお勧めします。 このファイルにメソッドを記述し、必要に応じてコントローラーまたはビューレンダラーでメソッドを呼び出すことができます。 コードの再利用性の目的にも役立ちます。