Ext.js - Arsitektur

Ext JS mengikuti arsitektur MVC / MVVM.

MVC - Arsitektur Model View Controller (versi 4)

MVVM - Model View Viewmodel (versi 5)

Arsitektur ini tidak wajib untuk program, namun, praktik terbaiknya adalah mengikuti struktur ini agar kode Anda dapat dipelihara dan diatur dengan baik.

Struktur Proyek dengan Aplikasi 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

Folder aplikasi Ext JS akan berada di folder JavaScript proyek Anda.

Aplikasi akan berisi file controller, view, model, store, dan utility dengan app.js.

app.js- File utama dari mana aliran program akan dimulai, yang harus dimasukkan dalam file HTML utama menggunakan tag <script>. Aplikasi memanggil pengontrol aplikasi untuk fungsi lainnya.

Controller.js- Ini adalah file pengontrol arsitektur Ext JS MVC. Ini berisi semua kontrol aplikasi, event listener, dan sebagian besar fungsionalitas kode. Ini memiliki jalur yang ditentukan untuk semua file lain yang digunakan dalam aplikasi itu seperti store, view, model, require, mixins.

View.js- Berisi bagian antarmuka dari aplikasi, yang ditampilkan kepada pengguna. Ext JS menggunakan berbagai tampilan kaya UI, yang dapat diperluas dan disesuaikan di sini sesuai dengan kebutuhan.

Store.js- Ini berisi data yang di-cache secara lokal yang akan ditampilkan pada tampilan dengan bantuan objek model. Store mengambil data menggunakan proxy yang memiliki jalur yang ditentukan untuk layanan guna mengambil data backend.

Model.js- Berisi objek yang mengikat data penyimpanan untuk dilihat. Ini memiliki pemetaan objek data backend ke view dataIndex. Data diambil dengan bantuan toko.

Utils.js- Ini tidak termasuk dalam arsitektur MVC tetapi merupakan praktik terbaik yang digunakan untuk membuat kode bersih, tidak rumit, dan lebih mudah dibaca. Kita bisa menulis metode dalam file ini dan memanggilnya di controller atau penyaji tampilan jika diperlukan. Ini juga berguna untuk tujuan penggunaan kembali kode.

Dalam arsitektur MVVM, pengontrol diganti dengan ViewModel.

ViewModel- Ini pada dasarnya memediasi perubahan antara tampilan dan model. Ini mengikat data dari model ke tampilan. Pada saat yang sama, tidak ada interaksi langsung dengan tampilan. Ia hanya memiliki pengetahuan tentang modelnya.

Bagaimana itu bekerja

Misalnya, jika kita menggunakan satu objek model di dua-tiga tempat di UI. Jika kita mengubah nilai di satu tempat UI, kita bisa melihat bahkan tanpa menyimpan perubahan itu. Nilai model berubah dan tercermin di semua tempat di UI, di mana pun model tersebut digunakan.

Itu membuat upaya pengembang jauh lebih sedikit dan lebih mudah karena tidak ada pengkodean tambahan yang diperlukan untuk mengikat data.