Sencha Touch - 依赖项



Sencha Touch 定义了在应用程序内部和类内部声明依赖项的某些方式。

让我们看看定义依赖项的不同方法。

应用程序级依赖项

在这里,我们在创建 Ext.application 时声明所有依赖项。

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

现在,当应用程序加载时,所有依赖项将同时加载。其他文件的路径将为:

  • MyApp.views.StudentsView
  • MyApp.models.StudentsModel
  • MyApp.stores.StudentsStore 等。

以上声明方式不仅加载文件,还决定了应该保持哪个配置文件处于活动状态。加载控制器后,它会确保实例化它。商店加载后,它会实例化它们并在未给出 ID 的情况下提供一个 ID。

特定于配置文件的依赖项

当我们在应用程序中使用配置文件时,可能某些功能仅适用于某些特定配置文件。

特定于配置文件的依赖项是在配置文件本身中声明的,而不是在应用程序级声明中。

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

无论配置文件是否处于活动状态,依赖项都会加载。但是,根据活动配置文件,会发生进一步的处理,例如实例化控制器和商店。

嵌套依赖项

当我们拥有更大的应用程序时,我们有多个控制器、模型、视图和商店。

在较大的应用程序中保持模块化始终是一个好主意。为此,我们可以定义子文件夹,并在声明依赖项时使用子文件夹名称来声明。

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

在上述情况下,将加载以下文件:

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

外部依赖项

我们可以通过提供类的完全限定名称来在应用程序外部指定依赖项,例如:

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

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

在上述情况下,将加载以下文件:

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