Sencha Touch - Kiến trúc

Lớp dưới cùng của bất kỳ ứng dụng di động nào là Hệ điều hành, trên đó là bất kỳ thứ gì hoặc mọi thứ đều được xây dựng. Sau đó, chúng tôi có các trình duyệt mà chúng tôi sẽ chạy các ứng dụng. Nó có thể là Chrome, Safari, IE bất cứ thứ gì. Lớp trên là tiêu chuẩn W3, tiêu chuẩn chung cho tất cả mọi người. Sencha Touch là viết tắt của hoặc được xây dựng dựa trên tiêu chuẩn W3, không gì khác ngoài HTML5, giúp một ứng dụng tương thích với các trình duyệt khác nhau của các thiết bị khác nhau.

Sencha Touch là sự kết hợp của ba framework - ExtJs, JqTouch và Raphael (vẽ vector). Nó tuân theo kiến trúc MVC. MVC tách mã thành các phần dễ quản lý hơn.

Mặc dù kiến trúc 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 Sencha Touch

----------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 Sencha Touch 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 bắt đầu dòng chương trình. Nó 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- Đây là tệp điều khiển của kiến trúc Sencha Touch 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ó thực hiện các nhiệm vụ sau: định tuyến, trung gian giữa chế độ xem và mô hình, và thực thi các sự kiện.

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

Store.js- Nó chứa dữ liệu được lưu trong bộ nhớ cache cục bộ, sẽ được hiển thị trên chế độ xem 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ó là đại diện của đối tượng trong thế giới thực, về cơ bản xử lý cơ sở dữ liệu.

Utils.js- Nó không có trong kiến trúc MVC nhưng cách tốt nhất là sử dụng nó để làm cho mã sạch, ít phức tạp 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 xem trình kết xuất ở bất kỳ đâu cần thiết. Nó cũng hữu ích cho mục đích tái sử dụng mã.