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()