写写就发现,有些代码不查查源头,不明白是怎么回事?搜到这篇文章觉得还是收益匪浅,更容易读懂代码。

Classes in Ext JS 4: Under the hood

Countdown to Ext JS 4: Dynamic Loading and New Class System[官网]

整理如下:

简单回顾一下,新的Class System (类系统),使我们能够这样定义类:

Ext.define('Ext.Window', {
extend: 'Ext.Panel',
requires: 'Ext.Tool',
mixins: {
draggable: 'Ext.util.Draggable'
},
config: {
title: "Window Title"
}
});

这里,我们建立一个Ext.Window类的稍微简化版本。设置Window是Panel的子类,宣称需要Ext.Tool类,以及混合Ext.util.Draggable类的的某些功能。
让我们一句一句分析。'extend'声明你所期望的--Window必须是Panel的子类。
'requires'声明意味着命名类-Ext.Tool必须在Window类被视为可用之前[即将用]就已经存在。如果你用SeaJS的require话就明白时机啦,简单说就是Window要应用了,Ext.Tool必须在。
'mixins'这个在SASS(CSS预处理器)中有应用。在ExtJS4中,'minxin'(混合声明)是个全新的概念。一个mixin仅仅是一组函数(有时候是一组属性)被合并成到一个类中。比如,Ext.util.Draggable类中有个'startDragging'的功能,这就被复制到Window类中,我们能在Window的实例中应用'startDragging'功能。

定义startDragging方法:

Ext.define('Ext.util.Draggable', {
startDragging: function() {
console.log('started dragging');
}
});

实例化

var win = Ext.create('Ext.Window');
win.startDragging(); //"started dragging"

  当一个类需要继承多个特性时,Minins就非常有用啦!而这对传统的单继承机制来说不易。例如,Ext.Windows是一个可拖动的组件,比如有Sliders,Grid headers和其他非常多的UI元素。因为这种动作发生在不同的地方,把这种拖拽行为归到单独一个父级类是不可行的。因为并非所有这些UI元素都以个共同的父级类。创建一个可团拽的Minxin解决了这个问题,仅需几行代码现在任何元素都可以变为可拖动的。

  最后一个新的功能块,是'config'配置。ExtJS中的大多数类都需要配置参数,其中很多在运行时改变。上面的例子中,我们声明了Ext.Window有个'title'配置,默认值是'Window Title'。通过上面的这种设置,我们免费得到4种方法,getTtiel,setTitle,resetTitle,applyTitle.

getTitle – 返回当前title值
setTitle – 设置新的title
resetTitle – 重置title值,此处为'Window Title'
applyTitle – 这是一个模板方法,你可以选择定义。当setTitle触发的时候,applyTitle触发。

applyTitle功能是当title改变时,调用其它需要改动的逻辑。比如:当更换一个title的时候我们可能想更新某个DOM元素。

Ext.define(‘Ext.Window’, {
//..as above,
config: {
title: 'Window Title'
},
//updates the DOM element that contains the window title
applyTitle: function(newTitle) {
this.titleEl.update(newTitle);
}
});

这种方式节省了大量的时间和代码,同时提供所有configuration配置选项一致的API-双赢。

深入研究

为了实现这神奇的功能,ExtJS 4引入4个新类。
Ext.Base-所有的类都继承自Ext.Base.它为所有类提供基本的低级别的功能。
Ext.Class-产生新类的工厂。
Ext.ClassLoader-负责确认class可用,如果页面上不存在,加载他们。
Ext.ClassManager-揭开类创建的序幕和管理依赖关系
这些在幕后齐心协力,大部分时间当你定义和使用类的时候,你不需要知道什么被调用了。常用的两个方法是Ext.define和Ext.create,在引擎中都触发Ext.ClassManager,这反过来又利用其它三个类把一切融合在一起。
Ext.Class和Ext.Base的区别是非常重要的。Ext.Base是顶层的父类,它定义了每个类,每个类都继承自Ext.Base在某些时候。Ext.Class代表类本身,每一个你定义的类都是Ext.Class的实例,并且是Ext.Base的子类。
为了说明这一点,假设我们创建MyClass的类,它并不扩展其他类。

Ext.define('MyClass', {
  someFunction: function() {
    console.log('Ran some function');
  }
});

MyClass的直接父类是Ext.Base,因为我们并没有扩展其他。

类的继承层次中,根始终是Ext.Base,也就是说每个类始终都是继承自Ext.Base.所以每个类是Ext.Base的子类,是Ext.Class的实例。这就意味着在之后很容易修改类,比如混合附加功能

//可以在定义类的时候就增加混合功能
Ext.define('MyClass', {
mixins: {
observable: 'Ext.util.Observable'
}
});
//也可以在类定义之后增加
MyClass.mixin('draggable', 'Ext.util.Draggable');

这种架构开辟了都动态创建类和元编程的新的可能性,这在早期版本是非常困难得。

ExtJS学习之路第三步:理解引擎之下,ExtJS4中的类的更多相关文章

  1. ExtJS学习之路第八步:Window组件

    一个专门Panel用作程序窗口.默认的,Window可以是浮动的(floated).可缩放(resizable)以及可拖动的(draggable).Window能够被最大化适应可视窗口,(restor ...

  2. ExtJS学习之路第六步:深入讨论组件Panel用法

    Panel加载页面 var myPanel=Ext.create('Ext.panel.Panel',{ bodyPadding: "15px 10px 0 10px", titl ...

  3. ExtJS学习之路第五步:认识最常见组件Panel

    文档中描述 Panel(面板)是一个容器,它具有特定的功能和结构部件,这使它成为面向应用用户界面的完美基石.面板,继承自Ext.container.Container,能够配置布局以及子组件(Chil ...

  4. ExtJS学习之路第四步:看源码,实战MessageBox

    可以通过看MessageBox.js的源码来深入认识,记住它的主要用法.Ext.MessageBox是实用类,用于生成不同风格的消息框,它是Singleton(单例),别名Ext.Msg.注意Mess ...

  5. ExtJS学习之路第七步:contentEl与renderTo的区别

    上回在Panel的应用中我们应该能大致区分开conteEl和renderTo,这回我们从定义中区分. 在Panel的API中, contentEl:String指定一个现有的HTML元素或者id作为此 ...

  6. ExtJs 学习之开篇(三)Ext.grid.Panel表格中的处理

    Ext.grid.Panel Ext.create('Ext.grid.Panel',{        title:'测试表格',        width:400,        height:20 ...

  7. [转]Spark学习之路 (三)Spark之RDD

    Spark学习之路 (三)Spark之RDD   https://www.cnblogs.com/qingyunzong/p/8899715.html 目录 一.RDD的概述 1.1 什么是RDD? ...

  8. 微软企业库5.0 学习之路——第六步、使用Validation模块进行服务器端数据验证

    前端时间花了1个多星期的时间写了使用jQuery.Validate进行客户端验证,但是那仅仅是客户端的验证,在开发项目的过程中,客户端的信息永远是不可信的,所以我们还需要在服务器端进行服务器端的验证已 ...

  9. 微软企业库5.0 学习之路——第五步、介绍EntLib.Validation模块信息、验证器的实现层级及内置的各种验证器的使用方法——下篇

    一.独立验证器 我上篇中我将AndCompositeValidator和OrCompositeValidator归为独立验证器,这2个验证器主要是为了第一类验证服务,可以进行多种验证组合在一起进行复杂 ...

随机推荐

  1. 《Linux内核设计与实现》课程学习重点问题总结

    (问题均是同学提出或是老师上课重点讲解的部分内容,根据自身理解和笔记总结出自己的答案.如有不对,还请指教.) week2 [Q1]命令qemu -kernel 内核可执行文件 -initrd root ...

  2. Linux内核分析——第八周学习笔记20135308

    第八周 进程的切换和系统的一般执行过程 一.进程切换的关键代码switch_to分析 1.进程调度与进程调度的时机分析 (1)进程分类 第一种分类 I/O-bound:等待I/O CPU-bound: ...

  3. 动画:UIKitAnimation 简单动画学习 iOS (一) 渐变 、 移动 、翻页、来回翻转 ——转载

    转载请说明(谢谢) http://blog.csdn.net/a21064346/article/details/7851695 点击打开链接 以下 一个系列的 动画效果 在 UIView.h文件中可 ...

  4. Mac无法找到摄像头问题解决

    facetime显示“未检测到摄像头”之类的,重启后可能摄像头有工作正常了,摄像头不稳定 重置 NVRAM后恢复正常,据说机器卡的时候,此法也可以使用. https://support.apple.c ...

  5. css基本的东西

    0 css本来也是一个比较乱的东西,我们需要在最恰当的情况下,写出最杂乱的效果.1 面对body设置了 -webkit-font-smoothing:antialiased (默认值为subpixel ...

  6. u11-nav02

    header:before, header:after ,.navigation:before, .navigation:after,.nav-row:before, .nav-row:after,. ...

  7. overlay-2

    <script src="/jquery.js"></script><script type="text/javascript"& ...

  8. zabbix_agent安装(Centos+Ubuntu)

      Centos安装 安装依赖包    yum -y install mysql-devel libcurl-devel net-snmp-devel 添加用户 groupadd zabbix use ...

  9. Java编程思想学习(八) 内部类

    可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类的定义是简单的,但是它的语法确实很是复杂,让人不是很好理解.下面就内部类做一个小结. 一.内部类的分类 总的来讲内部类分为普通内部类,匿 ...

  10. BZOJ4196 软件包管理器

    Description Linux用户和OSX用户一定对软件包管理器不会陌生. 通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖 ...