Ext.js - Architektura
Ext JS jest zgodny z architekturą MVC / MVVM.
MVC - Architektura kontrolera widoku modelu (wersja 4)
MVVM - Model Viewmodel (wersja 5)
Ta architektura nie jest obowiązkowa dla programu, jednak najlepszym rozwiązaniem jest przestrzeganie tej struktury, aby kod był wysoce konserwowalny i zorganizowany.
Struktura projektu z aplikacją 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 filesFolder aplikacji Ext JS będzie znajdować się w folderze JavaScript projektu.
Aplikacja będzie zawierała pliki kontrolera, widoku, modelu, sklepu i narzędzi z plikiem app.js.
app.js- Główny plik, z którego rozpocznie się przepływ programu, który powinien być zawarty w głównym pliku HTML za pomocą tagu <script>. Aplikacja wywołuje kontroler aplikacji dla pozostałych funkcji.
Controller.js- Jest to plik kontrolera architektury Ext JS MVC. Obejmuje to całą kontrolę nad aplikacją, detektory zdarzeń i większość funkcji kodu. Ma ścieżkę zdefiniowaną dla wszystkich innych plików używanych w tej aplikacji, takich jak przechowywanie, widok, model, wymagania, mieszanki.
View.js- Zawiera interfejsową część aplikacji, która jest wyświetlana użytkownikowi. Ext JS używa różnych widoków bogatych w interfejs użytkownika, które można tutaj rozszerzyć i dostosować zgodnie z wymaganiami.
Store.js- Zawiera dane przechowywane lokalnie w pamięci podręcznej, które mają być renderowane w widoku za pomocą obiektów modelu. Sklep pobiera dane za pomocą serwerów proxy, które mają ścieżkę zdefiniowaną dla usług do pobierania danych zaplecza.
Model.js- Zawiera obiekty, które wiążą dane sklepu do przeglądania. Ma mapowanie obiektów danych zaplecza do widoku dataIndex. Dane są pobierane za pomocą sklepu.
Utils.js- Nie jest uwzględniony w architekturze MVC, ale jest najlepszą praktyką, aby kod był czysty, mniej złożony i bardziej czytelny. Możemy zapisać metody w tym pliku i wywołać je w kontrolerze lub rendererze widoku, gdziekolwiek jest to wymagane. Jest to również przydatne w celu ponownego wykorzystania kodu.
W architekturze MVVM kontroler jest zastępowany przez ViewModel.
ViewModel- Zasadniczo pośredniczy w zmianach między widokiem a modelem. Wiąże dane z modelu do widoku. Jednocześnie nie ma bezpośredniej interakcji z widokiem. Ma tylko wiedzę o modelu.
Jak to działa
Na przykład, jeśli używamy jednego obiektu modelu w dwóch-trzech miejscach w interfejsie użytkownika. Jeśli zmienimy wartość w jednym miejscu interfejsu użytkownika, możemy zobaczyć, nawet nie zapisując tej zmiany. Wartość modelu zmienia się i jest odzwierciedlana we wszystkich miejscach w interfejsie użytkownika, gdziekolwiek model jest używany.
To sprawia, że wysiłek programisty jest znacznie mniejszy i łatwiejszy, ponieważ nie jest wymagane żadne dodatkowe kodowanie do wiązania danych.