Sencha Touch-건축

모든 모바일 애플리케이션의 최하위 계층은 OS이며 그 위에는 모든 것이 구축됩니다. 그런 다음 응용 프로그램을 실행할 브라우저가 있습니다. 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− 여기에는 모델 객체의 도움으로 뷰에 렌더링되는 로컬 캐시 데이터가 포함됩니다. Store는 백엔드 데이터를 가져 오기 위해 서비스에 대해 정의 된 경로가있는 프록시를 사용하여 데이터를 가져옵니다.

Model.js−보기 위해 매장 데이터를 바인딩하는 객체를 포함합니다. 기본적으로 데이터베이스를 다루는 실제 객체의 표현입니다.

Utils.js− MVC 아키텍처에는 포함되어 있지 않지만 코드를 깔끔하고 덜 복잡하며 읽기 쉽게 만들기 위해 이것을 사용하는 것이 가장 좋습니다. 이 파일에 메서드를 작성하고 필요할 때마다 컨트롤러 또는 뷰 렌더러에서 호출 할 수 있습니다. 코드 재사용 목적에도 도움이됩니다.