Sencha Touch - Sự phụ thuộc

Có một số cách được định nghĩa trong Sencha Touch để khai báo các phần phụ thuộc, một bên trong ứng dụng và một bên trong các lớp.

Chúng ta hãy xem xét các cách khác nhau để xác định các phụ thuộc.

Mức độ phụ thuộc của ứng dụng

Ở đây, chúng tôi khai báo tất cả các phụ thuộc khi chúng tôi tạo Ext.application.

Ext.application({
   name: 'MyApp',
   views: ['StudentsView'],
   models: ['StudentsModel'],
   controllers: ['StudentsController'],
   stores: ['StudentsStore'],
   profiles: ['Phone', 'Tablet']
});

Bây giờ, khi ứng dụng được tải, tất cả các phụ thuộc sẽ được tải cùng một lúc. Đường dẫn của các tệp khác sẽ là:

  • MyApp.views.StudentsView
  • MyApp.models.StudentsModel
  • MyApp.stores.StudentsStore, v.v.

Cách khai báo trên không chỉ tải tệp mà còn quyết định hồ sơ nào sẽ được giữ là hoạt động. Sau khi tải bộ điều khiển, nó đảm bảo khởi tạo nó. Sau khi các cửa hàng được tải, nó khởi tạo chúng và cung cấp một id nếu chưa được cung cấp.

Sự phụ thuộc theo cấu hình cụ thể

Khi chúng ta đang sử dụng hồ sơ trong một ứng dụng, có thể có một vài chức năng chỉ được yêu cầu cho một số hồ sơ cụ thể.

Các phụ thuộc cụ thể của cấu hình được khai báo trong chính cấu hình thay vì khai báo mức ứng dụng.

Ext.define('MyApp.profile.Tablet', {
   extend: 'Ext.app.Profile', config: {
      views: ['StudentView'], controllers: ['StudentController'], models: ['StudentModel']
   }
});

Các phụ thuộc được tải bất kể cấu hình đang hoạt động hay không. Tuy nhiên, dựa trên cấu hình hoạt động, quá trình xử lý tiếp theo như khởi tạo bộ điều khiển và các cửa hàng sẽ xảy ra.

Sự phụ thuộc lồng nhau

Khi chúng tôi có ứng dụng lớn hơn, chúng tôi có nhiều bộ điều khiển, mô hình, chế độ xem và cửa hàng.

Luôn luôn tốt để duy trì tính mô-đun trong các ứng dụng lớn hơn. Vì vậy, chúng ta có thể định nghĩa các thư mục con và trong khi khai báo các phụ thuộc, chúng ta có thể sử dụng tên thư mục con để khai báo.

Ext.application({
   name: 'MyApp',
   controllers: ['Controller', 'nested.NewController'],
   views: ['class.Cview', 'SView']
});

Trong trường hợp trên, các tệp sau sẽ được tải:

  • MyApp.controllers.Controller
  • MyApp.controllers.nested.NewController
  • MyApp.Views.Sview
  • MyApp.Views.class.Cview

Sự phụ thuộc bên ngoài

Chúng ta có thể chỉ định các phụ thuộc bên ngoài ứng dụng bằng cách đặt tên đủ điều kiện của các lớp là:

Ext.Loader.setPath({
   'Class': 'Class'
});

Ext.application({
   views: ['Class.view.LoginForm', 'Welcome'],
   controllers: ['Class.controller.Sessions', 'Main'],
   models: ['Class.model.User']
});

Trong trường hợp trên, các tệp sau sẽ được tải:

  • Class/view/LoginForm.js
  • Class/controller/Sessions.js
  • Class/model/User.js
  • app/view/Welcome.js
  • app/controller/Main.js