sencha touch 入门系列 （八）sencha touch类系统讲解（下）

时间：2022-06-29 18:34:35

　　接着上一讲，我们通过一组代码来讲解一下st的类的一些属性：

 
Ext.define("MyConfig",{
           config:{
               website:"http://127.0.0.1"
           },
           speak: function() {
               console.log("speak12345");
           }
        });

        Ext.define("Ext.ux.Util",{
           alias:"widget.util",//等同xtype:"util"
           alternateClassName:"Util",//项目的替代类名，

           //把类MyConfig并入该类
           mixins:{
               myConfig:"MyConfig"
           }
        });

        var complete = Ext.create("Ext.ux.Util");
        var mine = Ext.create("Util");
        var widget = Ext.widget("util");//对应设置的alias别名

        mine.speak();//speak12345
        console.log(mine);
        console.log(mine.config.website);//http://127.0.0.1
        console.log(mine.getWebsite());//undefined

 

 如上代码，我定义了两个对象，一个是Myconfig（假定为我的配置文件）,一个是Ext.ux.Util（假定为我的工具类）

 首先我们先看下第10行开始的工具类定义，跟上一讲有些不同，

 我们在类的定义中加入了alias，alternateClassName 和 mixin属性，下面我们来详细讲解下这三个属性

 首先是alias,我们一般称之为别名，它的定义方式如下：

 alias：“widget.自定义的别名”，官方api中的写法

 这个属性的定义等同于 xtype:"自定义的别名"，不过这种定义别名的方式一般只会在官方源码中见到，一般xtype只是用来引入组件的

 接着我们看看别名的作用，

 1.当一个视图组件需要引入子组件的时候，使用alias定义过别名的组件就可以使用xtype:"自定义的别名"来引入,假设我在main视图中引入一个自定义别名为login的组件，那么引入代码如下

Ext.define('CCICloud.view.Main', {
    extend: 'Ext.Container',
    alias: "widget.main",
    config: {
        items: [
            {
                xtype: "login"
            }
        ]
    }

});

使用xtype引入组件的好处就是延迟创建，只有当该组件需要被渲染显示出来的时候它才会被创建，这样可以有效地控制内存的占用。

 

2.alias的第二个作用是，

使用别名定义过的组件都可以使用Ext.widget("自定义的别名")来实例化该类，效果等同于Ext.create("类名")

上面定义的util类就可以通过别名来实例化，代码如下

var widget = Ext.widget("util");

 

接着我们看另一个属性:

alternateClassName

这个属性的作用是给你的类设定一个可替换的类名，如上所示，我们给Ext.ux.Util类还定义了一个
alternateClassName：“Util”

这相当于给我们这个类又定义了一个新的类名Util且跟define的类名是共存的，

  这就意味着你可以使用Ext.create("Util")来实例化这个类，当你定义的类名太长时，你可以给它自定义一个或多个替代类名来给自己使用

  这个属性很简单，我们就不多讲了

 

 

下面是minxins属性

　　

　　　　　　
//把类MyConfig并入该类
mixins:{
       myConfig:"MyConfig"
 }

这个属性的作用是把其他类合并过来，上面的定义把MyConfig类的内容合并到Util中来了，

当我们实例化Util类的时候，我们就可以通过util类来调用MyConfig中的属性跟方法了

 

var mine = Ext.create("Util");
mine.speak();//MyConfig中的speak()方法,输出speak12345
console.log(mine);//Util对象
console.log(mine.config.website);//输入http://127.0.0.1

 

上面三个属性介绍完了，不过一般情况下，如果我们要将一个类作为工具类来使用，上面这么写调用起来是十分不方便的，下面我们介绍两种比较特殊的用法，方便我们来调用工具类：

1.静态属性

我们把上面的代码改成如下:

　　　　
Ext.define("Ext.ux.Util",{
            alias:"widget.util",
            alternateClassName:"Util",

            statics: {
                myConfig: {
                   website:"http://127.0.0.1"
                },
                speak:function() {
                    console.log("speak");
                }
            }

        });

        Util.speak();//输出speak
        console.log(Util.myConfig.website);//输出http://127.0.0.1

在静态属性中定义的方法和对象都会在该类被定义的时候就会被创建，这样，在调用工具类的时候，你就可以直接使用类名.属性来调用了，不用每次使用都进行一次实例化

 

2.使用单例的方式创建类，代码如下:

　　

 
Ext.define("Ext.ux.Util", {
            alternateClassName: "Util",
            singleton: true,

            config: {
                website: "http://127.0.0.1"
            },

            speak: function () {
                console.log("speak");
            },

            constructor: function (config) {
                this.initConfig(config);
            }
        });

        Util.speak();//输出speak
        console.log(Util.getWebsite());//输出http://127.0.0.1

这种方式创建的类不需要你手动去进行实例化，在这个类被定义出来并且配置了

singleton: true

 

的情况下，这个类会自动被创建出来且只会被创建一次，这时，你就可以直接使用类名用类的操作方式来操作类中的任意属性和方法，

这样类的基本属性跟特殊用法我们就讲完了，接着我们再提下类文件的依赖加载

 

类文件的依赖加载（延迟加载）

　　在很多情况下，一个类文件可能还要依赖其他的类文件才能运行，如下代码所示:

<span style="white-space:pre"></span>Ext.define('Human', {
    <span style="white-space:pre"></span>    extend: 'Animal',

            requires: 'Ext.MessageBox',

            speak: function() {
        <span style="white-space:pre"></span>Ext.Msg.alert(this.getName(), "Speaks...");
    <span style="white-space:pre"></span>    }
<span style="white-space:pre"></span>});

　　这里我们的speak方法中调用了Ext的弹窗函数Ext.Msg.alert,

这个方法是定义在Ext.MessageBox.js中的，但是因为sencha-touch.js这个核心代码库中并不包含这个js文件，所以，我们需要在这里引入这个js文件，

这里使用了requires属性定义了我们要引入的js，

requires: 'Ext.MessageBox'

如果是多个js文件，我们可以用数组的方式进行引入,如下:

requires: [
        'Ext.MessageBox',
        'Ext.field.Password',
        'Ext.form.FieldSet',
        'Ext.TitleBar'
]

使用requires属性引入的js有个特点，就是只有在引用该js文件的类文件被实例化的时候才会被加载引入，也就是我们所说的延迟加载，

如果该js文件已经被引入了，那么该js文件不会被反复引入，只引入一次，

而且在使用sencha cmd的指令打包压缩项目时，requires的js文件内容会被压缩到app.js中

 

 

接下来的课程我们要开始讲解试图组件以及事件的控制等相关内容

 

 

标签：

相关文章