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类。
*/

上代码了:

 Ext.onReady(function() {  

             Ext.define('MyClass.A', {

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

结论二:方法的调用遵循最近优先原则,优先级顺序从自己到别人——首先是当前自己类、自己的父类、最后去找别人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()

JS 4 新特性:混合属性(mixins)的更多相关文章

  1. Ext JS 6 新特性和工具

    Ext JS 6 新特性和工具 Ext JS 6 带来很多新特性.工具和改进.以下是一些亮点: • 合并了 Ext JS & Sencha Touch - 在 Ext 6, 你可以访问 Ext ...

  2. Ext JS 4 新特性2:配置项属性(config)之二

    Ext JS 4 新特征2:配置项属性config之二 ☞ Config(自动的setters和getters) Ext JS 4介绍了config声明方式,在Ext JS 中也有几个例子:在运行程序 ...

  3. Ext JS 4 新特性2:配置项属性(config)之一

    Ext JS 4 新特征2:配置项属性config 最新版本的Ext JS 4.2的另外一个伟大的新特征就是增加了configuration配置项属性,当我们在创建一个新类的时候,经常性的要设置某某属 ...

  4. html5新特性contenteditable 属性更容易实现动态表单

    介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...

  5. css3的新特性选择器-------属性选择器

    自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a ...

  6. JS 4 新特性:混合属性(mixins)之二

    Mixins many classes[混合许多个类] 迄今为止,我们已经学会了简单的继承,我们还能够通过使用mixins处理机制来混合许多类.源于这种理念是非常简单的:我们能够把许多个类最终混合到一 ...

  7. C#语言的新特性及相关信息

     .ENT版本 NET 2.0 :CLR, WinForms ,Wed Services,ASP.NET NET 3.0 :WCF,WF,WPF,CardSpace NET 3.5 :LINQ ,AJ ...

  8. vs2015 新特性

    vs2015 新特性 自动属性的增强 http://www.kwstu.com/ArticleView/manong_201411200854239378

  9. css3新特性学习系列 -- border

    css3新特性 border属性(border-radius.border-image.box-shadow)详解 1.border-radius  圆角 支持:IE9+ 用法: border-rad ...

随机推荐

  1. gulp 基本使用

    1, gulp 依赖node, 使用gulp 之前,要先安装node.  Node 安装完成后,它自带npm. Npm: node package manager 就是node 包管理器. 用过jav ...

  2. scss/css 中添加ie hack

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10+ specific styles ...

  3. HAOI2012音量调节

    Description 一个吉他手准备参加一场演出.他不喜欢在演出时始终使用同一个音量,所以他决定每一首歌之前他都要改变一次音量.在演出开始之前,他已经做好了一个列表,里面写着在每首歌开始之前他想要改 ...

  4. windows插件框架

    X3C,张云贵,http://blog.csdn.net/clever101/article/details/8656720

  5. 初始Java DVD项目

    DVDSet 类: DVD DVD    删除功能 实现DVD借出功能 DVD还回功能

  6. 前端MV*框架的意义

    经常有人质疑,在前端搞MV*有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV*框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的 ...

  7. Asp.net有关GridView的使用

    一.带提示语句的删除 二.使用config里面的连接字符串 三.鼠标移到GridView某一行时改变该行的背景色方法 四.两个事件 五.GridView实现自动编号 不难写

  8. AngularJS的$watch用法

    $watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEqua ...

  9. 使用tomcat部署jsp程序

    安装java1.6.0到默认目录 下载apache-tomcat-6.0.32-windows-x86.zip,解压到D:\soft目录下 配置环境变量 JAVA_HOME C:\Program Fi ...

  10. Asp.net MVC3表格共用分页功能

    在建立的mvc3项目中,在Razor(CSHTML)视图引擎下,数据会在表格中自动的生成,但分页没有好的控件实现,这里我们开发了设计了一个分页的模板,适合于没有数据提交和有数据提交的分页的分页. 第一 ...