(:◎)≡会飞的章鱼

导航

JS 4 新特性:混合属性(mixins)

 

Ext JS4的新特征1:混合属性(mixins

 

       组合是Extjs4的新特性,可用于实现多继承的情况。该属性会以同步方式加载类文件,并实例化该类(译者推理其内部使用Ext.create方法)。直接上实例吧!

 

基本用法:

/*JS4新特性:混合属性(mixins)使用情况是用于同级类引用,很明显这是JS4的一种新的特性,完全不同于extend继承,A类、B类、C类为同一等级。C类可以任意调用它的mixins属性定义中的类函数。*/

Ext.onReady(function() {  
            
            Ext.define('MyClass.A', {
            
                    showA: function(){
                            console.log("输出A");
                    }
                });
            
            Ext.define('MyClass.B', {
            
                    showB: function(){
                            console.log("输出B");
                    }
             });
        
            Ext.define('MyClass.C', {
                    
                    mixins:{
                        classA : 'MyClass.A',
                        classB : 'MyClass.B',
                    },
                    
                    showC: function(){
                            console.log("输出C");
                    }
    
            });    
            
            var classc = Ext.create('MyClass.C');
            classc.showA();        //在控制台输出A
            classc.showB();        //在控制台输出B
            classc.showC();        //在控制台输出C
                
});

 结论一:定义了mixins类,C类很简单的就可以去调用A类、B类的中的任意函数了。

 

二、A类、B类、C类中具有相同的方法show()时,

/*JS4新特性:混合属性(mixins)使用情况2:第2种情况:C类也有show(),C类的mixins中的A类、B类也都拥有相同的方法show()时,自己最先

     C类没有show(),c.show()就会去它的父类CC.show().
            如果C类自己没有show(),父类也没有,就会去找mixins中的A类、B类的顺序寻找,
            这也是很好理解的。其执行顺序为:当前类->父类->mixins类。
*/

上代码了:

 1 Ext.onReady(function() {  
 2             
 3             Ext.define('MyClass.A', {
 4             
 5                     show: function(){
 6                             console.log("输出A");
 7                     }
 8                 });
 9             
10             Ext.define('MyClass.B', {
11             
12                     show: function(){
13                             console.log("输出B");
14                     }
15              });
16             
17             Ext.define('MyClass.CC', {
18             
19                     show: function(){
20                             console.log("输出C爸");
21                     }
22              });
23         
24             Ext.define('MyClass.C', {
25                     
26                     extend: 'MyClass.CC',
27                     
28                     mixins:{
29                         classA : 'MyClass.A',
30                         classB : 'MyClass.B',
31                     },
32                     
33                     show: function(){
34                             console.log("输出C");
35                     }
36     
37             });    
38             
39             var classc = Ext.create('MyClass.C');
40             classc.show();        //在控制台输出C
41             
42                 
43 });

结论二:方法的调用遵循最近优先原则,优先级顺序从自己到别人——首先是当前自己类、自己的父类、最后去找别人mixins类。

三、在当前类中引用mixins类中的方法

Ext.onReady(function() {  
            
            Ext.define('MyClass.A', {
            
                    show: function(){
                            console.log("输出A");
                    }
                });            
            
            Ext.define('MyClass.C', {
            
                    mixins:{
                        classA : 'MyClass.A'                        
                    },
                    
                    alert: function(){
                                this.mixins.classA.show();
                    }
    
            });    
            
            var classc = Ext.create('MyClass.C');
            classc.alert();        //在控制台输出A
            classc.show();        //这就是调用mixins的好处,简单一句话胜似多出转折。
            /*classc本身是没有show()函数的,就是没有加了mixins,所以它有了。*/
                
});

结论三:classc本身是没有show()函数的,就是因为加了mixins,所以它就非常简单了拥有了A类中的函数show()

 

 

posted on 2013-07-15 16:17  会飞的章鱼  阅读(1003)  评论(0编辑  收藏  举报