ExtJS学习之路第三步:理解引擎之下,ExtJS4中的类
写写就发现,有些代码不查查源头,不明白是怎么回事?搜到这篇文章觉得还是收益匪浅,更容易读懂代码。
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中的类的更多相关文章
- ExtJS学习之路第八步:Window组件
一个专门Panel用作程序窗口.默认的,Window可以是浮动的(floated).可缩放(resizable)以及可拖动的(draggable).Window能够被最大化适应可视窗口,(restor ...
- ExtJS学习之路第六步:深入讨论组件Panel用法
Panel加载页面 var myPanel=Ext.create('Ext.panel.Panel',{ bodyPadding: "15px 10px 0 10px", titl ...
- ExtJS学习之路第五步:认识最常见组件Panel
文档中描述 Panel(面板)是一个容器,它具有特定的功能和结构部件,这使它成为面向应用用户界面的完美基石.面板,继承自Ext.container.Container,能够配置布局以及子组件(Chil ...
- ExtJS学习之路第四步:看源码,实战MessageBox
可以通过看MessageBox.js的源码来深入认识,记住它的主要用法.Ext.MessageBox是实用类,用于生成不同风格的消息框,它是Singleton(单例),别名Ext.Msg.注意Mess ...
- ExtJS学习之路第七步:contentEl与renderTo的区别
上回在Panel的应用中我们应该能大致区分开conteEl和renderTo,这回我们从定义中区分. 在Panel的API中, contentEl:String指定一个现有的HTML元素或者id作为此 ...
- ExtJs 学习之开篇(三)Ext.grid.Panel表格中的处理
Ext.grid.Panel Ext.create('Ext.grid.Panel',{ title:'测试表格', width:400, height:20 ...
- [转]Spark学习之路 (三)Spark之RDD
Spark学习之路 (三)Spark之RDD https://www.cnblogs.com/qingyunzong/p/8899715.html 目录 一.RDD的概述 1.1 什么是RDD? ...
- 微软企业库5.0 学习之路——第六步、使用Validation模块进行服务器端数据验证
前端时间花了1个多星期的时间写了使用jQuery.Validate进行客户端验证,但是那仅仅是客户端的验证,在开发项目的过程中,客户端的信息永远是不可信的,所以我们还需要在服务器端进行服务器端的验证已 ...
- 微软企业库5.0 学习之路——第五步、介绍EntLib.Validation模块信息、验证器的实现层级及内置的各种验证器的使用方法——下篇
一.独立验证器 我上篇中我将AndCompositeValidator和OrCompositeValidator归为独立验证器,这2个验证器主要是为了第一类验证服务,可以进行多种验证组合在一起进行复杂 ...
随机推荐
- 安装mysql(zip格式安装包)
mysql下载地址:http://www.mysql.com/ 一. zip格式,解压缩之后要进行配置.解压之后可以将该文件夹改名,放到合适的位置,比如把文件夹改名为MySQL Server 5.6( ...
- 利用Gulp优化部署Web项目[长文慎入]
Gulp Gulp是一款项目自动化的构建工具,与Grunt一样可以通过创建任务(Task)来帮助我们自动完成一些工作流的内容.当然,今天我们的内容并不是讨论这二者的区别,仅仅是介绍介绍如何利用Gulp ...
- 腾讯的一个移动端测试小工具GT
上周末参加了Ministar北京的测试聚会.腾讯的MIG专项测试组的组长给大家介绍了他们最近开发出来的手机测试工具GT. 下面是GT的官方说明: GT(随身调)是APP的随身调测平台,它是直接运行在手 ...
- Xilinx命名规则
xilinx公司的FPGA种类繁多,知道了命名规则,看起来应该会舒服很多. 1.xilinx的FPGA命名规则 Xilinx的ug112第一章中介绍了Xilinx公司的FPGA命名规则.一般而言,大的 ...
- JavaScript split() 方法
split() 方法用于把一个字符串分割成字符串数组.
- Android--按钮点击事件
Android中Button的点击事件非常简单,主要是一个内部类的问题 在界面上存在两个按钮和一个文本框,点击不同按钮的时候文本框中显示不同按钮的文字信息 <?xml version=" ...
- 编写高质量代码改善C#程序的157个建议[用抛异常替代返回错误、不要在不恰当的场合下引发异常、重新引发异常时使用inner Exception]
前言 自从.NET出现后,关于CLR异常机制的讨论就几乎从未停止过.迄今为止,CLR异常机制让人关注最多的一点就是“效率”问题.其实,这里存在认识上的误区,因为正常控制流程下的代码运行并不会出现问题, ...
- [C#]AES加密算法实现
密码学中的高级加密标准(Advanced Encryption Standard,AES),又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这个标准用来替代原先的DES,已经被多方分 ...
- PHP函数可变参数列表的具体实现方法介绍
PHP函数可变参数列表可以通过_get_args().func_num_args().func_get_arg()这三个函数来实现.我们下面就对此做了详细的介绍. AD:2014WOT全球软件技术峰会 ...
- hdu1561 树形dp + 背包
#include<cstdio> #include<cstring> #include<iostream> #define INF 999999999 using ...