Ext.js-아키텍처

Ext JS는 MVC / MVVM 아키텍처를 따릅니다.

MVC − Model View Controller 아키텍처 (버전 4)

MVVM − Model View Viewmodel (버전 5)

이 아키텍처는 프로그램에 필수는 아니지만 코드를 유지 관리하고 체계적으로 만들기 위해이 구조를 따르는 것이 좋습니다.

Ext JS 앱을 사용한 프로젝트 구조

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

Ext JS 앱 폴더는 프로젝트의 JavaScript 폴더에 있습니다.

앱에는 app.js가있는 컨트롤러,보기, 모델, 저장소 및 유틸리티 파일이 포함됩니다.

app.js− 프로그램의 흐름이 시작되는 메인 파일. <script> 태그를 사용하여 메인 HTML 파일에 포함되어야합니다. 앱은 나머지 기능을 위해 애플리케이션의 컨트롤러를 호출합니다.

Controller.js− Ext JS MVC 아키텍처의 컨트롤러 파일입니다. 여기에는 응용 프로그램의 모든 제어, 이벤트 리스너 및 대부분의 코드 기능이 포함됩니다. store, view, model, require, mixin과 같이 해당 응용 프로그램에서 사용되는 다른 모든 파일에 대해 정의 된 경로가 있습니다.

View.js− 사용자에게 표시되는 응용 프로그램의 인터페이스 부분을 포함합니다. Ext JS는 다양한 UI 리치 뷰를 사용하며, 요구 사항에 따라 여기에서 확장하고 사용자 지정할 수 있습니다.

Store.js− 여기에는 모델 객체의 도움으로 뷰에 렌더링 될 로컬로 캐시 된 데이터가 포함됩니다. Store는 백엔드 데이터를 가져 오기 위해 서비스에 대해 정의 된 경로가있는 프록시를 사용하여 데이터를 가져옵니다.

Model.js−보기 위해 매장 데이터를 바인딩하는 객체를 포함합니다. 백엔드 데이터 개체를 view dataIndex에 매핑합니다. 데이터는 저장소의 도움으로 가져옵니다.

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

MVVM 아키텍처에서 컨트롤러는 ViewModel로 대체됩니다.

ViewModel− 기본적으로 뷰와 모델 간의 변화를 중재합니다. 모델의 데이터를 뷰에 바인딩합니다. 동시에 뷰와 직접적인 상호 작용이 없습니다. 모델에 대한 지식 만 있습니다.

작동 원리

예를 들어 UI의 2 ~ 3 곳에서 하나의 모델 객체를 사용하는 경우입니다. UI의 한 곳에서 값을 변경하면 해당 변경 사항을 저장하지 않고도 볼 수 있습니다. 모델의 값은 변경되므로 모델이 사용되는 모든 위치에 UI의 모든 위치에 반영됩니다.

데이터 바인딩에 추가 코딩이 필요하지 않으므로 개발자의 노력이 훨씬 줄어들고 쉬워집니다.