Sencha Touch 架構

任何移動應用程式的底層都是作業系統，在此之上構建任何或所有內容。然後我們有將執行應用程式的瀏覽器。它可以是 Chrome、Safari、IE 等任何瀏覽器。上層是 W3 標準，對所有瀏覽器都是通用的。Sencha Touch 基於或構建在 W3 標準之上，它就是 HTML5，這使得單個應用程式與不同裝置的不同瀏覽器相容。

Sencha Touch 結合了三個框架：ExtJs、JqTouch 和 Raphael（向量繪圖）。它遵循 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 架構中，但使用它是最佳實踐，以便使程式碼簡潔、不太複雜且更易於閱讀。我們可以在此檔案中編寫方法，並在控制器或檢視渲染器中根據需要呼叫它們。它也有助於程式碼重用。