Ext.js - Kiến trúc

Ext JS tuân theo kiến trúc MVC / MVVM.

MVC - Kiến trúc Model View Controller (phiên bản 4)

MVVM - Model View Viewmodel (phiên bản 5)

Cấu trúc này không bắt buộc đối với chương trình, tuy nhiên, cách tốt nhất là tuân theo cấu trúc này để làm cho mã của bạn có thể bảo trì và tổ chức cao.

Cấu trúc dự án với ứng dụng 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

Thư mục ứng dụng Ext JS sẽ nằm trong thư mục JavaScript của dự án của bạn.

Ứng dụng sẽ chứa các tệp điều khiển, chế độ xem, mô hình, cửa hàng và tiện ích với app.js.

app.js- Tệp chính từ nơi dòng chương trình sẽ bắt đầu, tệp này phải được đưa vào tệp HTML chính bằng thẻ <script>. Ứng dụng gọi bộ điều khiển của ứng dụng cho phần còn lại của chức năng.

Controller.js- Nó là tệp điều khiển của kiến trúc Ext JS MVC. Điều này chứa tất cả các quyền kiểm soát ứng dụng, trình nghe sự kiện và hầu hết các chức năng của mã. Nó có đường dẫn được xác định cho tất cả các tệp khác được sử dụng trong ứng dụng đó như cửa hàng, chế độ xem, mô hình, yêu cầu, mixin.

View.js- Nó chứa phần giao diện của ứng dụng, hiển thị cho người dùng. Ext JS sử dụng các chế độ xem phong phú về giao diện người dùng khác nhau, có thể mở rộng và tùy chỉnh tại đây theo yêu cầu.

Store.js- Nó chứa dữ liệu được lưu trong bộ đệm cục bộ sẽ được hiển thị trên khung nhìn với sự trợ giúp của các đối tượng mô hình. Store tìm nạp dữ liệu bằng proxy có đường dẫn được xác định cho các dịch vụ để tìm nạp dữ liệu phụ trợ.

Model.js- Nó chứa các đối tượng liên kết dữ liệu cửa hàng để xem. Nó có ánh xạ các đối tượng dữ liệu phụ trợ đến chế độ xem dataIndex. Dữ liệu được tìm nạp với sự trợ giúp của lưu trữ.

Utils.js- Nó không có trong kiến trúc MVC nhưng là phương pháp hay nhất để sử dụng để làm cho mã sạch, ít phức tạp hơn và dễ đọc hơn. Chúng tôi có thể viết các phương thức trong tệp này và gọi chúng trong bộ điều khiển hoặc trình kết xuất chế độ xem ở bất kỳ nơi nào cần thiết. Nó cũng hữu ích cho mục đích tái sử dụng mã.

Trong kiến trúc MVVM, bộ điều khiển được thay thế bằng ViewModel.

ViewModel- Về cơ bản, nó làm trung gian cho những thay đổi giữa chế độ xem và mô hình. Nó liên kết dữ liệu từ mô hình với khung nhìn. Đồng thời, nó không có bất kỳ tương tác trực tiếp nào với chế độ xem. Nó chỉ có kiến thức về mô hình.

Làm thế nào nó hoạt động

Ví dụ: nếu chúng tôi đang sử dụng một đối tượng mô hình ở hai ba vị trí trong giao diện người dùng. Nếu chúng tôi thay đổi giá trị tại một vị trí của giao diện người dùng, chúng tôi có thể thấy mà không cần lưu thay đổi đó. Giá trị của mô hình thay đổi và do đó được phản ánh ở tất cả các vị trí trong giao diện người dùng, bất cứ nơi nào mô hình được sử dụng.

Nó làm cho nỗ lực của nhà phát triển ít hơn và dễ dàng hơn vì không cần thêm mã hóa cho dữ liệu ràng buộc.