Ext.js - Mimari

Ext JS, MVC / MVVM mimarisini takip eder.

MVC - Model View Controller mimarisi (sürüm 4)

MVVM - Model Görünümü Görünümü Modeli (sürüm 5)

Bu mimari, program için zorunlu değildir, ancak kodunuzu yüksek düzeyde bakım ve organize hale getirmek için bu yapıyı takip etmek en iyi uygulamadır.

Ext JS Uygulaması ile Proje Yapısı

----------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 uygulama klasörü, projenizin JavaScript klasöründe yer alacaktır.

Uygulama, app.js içeren denetleyici, görünüm, model, mağaza ve yardımcı program dosyalarını içerir.

app.js- <script> etiketi kullanılarak ana HTML dosyasına dahil edilmesi gereken program akışının başlayacağı ana dosya. Uygulama, işlevselliğin geri kalanı için uygulama denetleyicisini çağırır.

Controller.js- Ext JS MVC mimarisinin denetleyici dosyasıdır. Bu, uygulamanın tüm denetimini, olay dinleyicilerini ve kodun işlevlerinin çoğunu içerir. Bu uygulamada kullanılan diğer tüm dosyalar için depo, görünüm, model, gereksinim, karışımlar gibi tanımlanmış yola sahiptir.

View.js- Kullanıcıya gösterilen uygulamanın arayüz kısmını içerir. Ext JS, ihtiyaca göre burada genişletilebilen ve özelleştirilebilen çeşitli UI zengin görünümleri kullanır.

Store.js- Model nesneleri yardımı ile görünümde oluşturulacak yerel olarak önbelleğe alınan verileri içerir. Mağaza, hizmetlerin arka uç verilerini getirmesi için tanımlanmış yola sahip proxy'leri kullanarak verileri alır.

Model.js- Mağaza verilerini görüntülemek için bağlayan nesneleri içerir. Arka uç veri nesnelerinin view dataIndex ile eşlenmesine sahiptir. Veriler, mağaza yardımı ile getirilir.

Utils.js- MVC mimarisine dahil değildir, ancak kodu temiz, daha az karmaşık ve daha okunaklı hale getirmek için kullanılması en iyi uygulamadır. Bu dosyaya yöntemler yazabilir ve bunları denetleyicide veya gerekli olan her yerde görüntü oluşturucuda çağırabiliriz. Kodun yeniden kullanılabilirliği için de faydalıdır.

MVVM mimarisinde denetleyici, ViewModel ile değiştirilir.

ViewModel- Temelde görünüm ve model arasındaki değişikliklere aracılık eder. Modeldeki verileri görünüme bağlar. Aynı zamanda görüşle doğrudan bir etkileşimi yoktur. Sadece model hakkında bilgi sahibidir.

Nasıl çalışır

Örneğin, UI'da iki-üç yerde bir model nesne kullanıyorsak. Değeri kullanıcı arayüzünün bir yerinde değiştirirsek, bu değişikliği kaydetmeden görebiliriz. Modelin değeri değişir ve bu nedenle, modelin kullanıldığı her yerde kullanıcı arayüzünün tüm yerlerine yansıtılır.

Verileri bağlamak için ekstra kodlama gerekmediğinden geliştiricinin çabasını çok daha az ve daha kolay hale getirir.