Extjs的extend方法是框架本身的一个基础方法,用于形成所有组件之间的继承结构。如果要理解extend方法实现,必须要理解javascript面向对象基础(可参考此文)。
先写一个extend方法具体应用的例子:
Person = function(atts){
if(atts){
this.id = atts.id;
this.name = atts.name;
this.age = atts.age;
}
};
Person.prototype.sayName = function(){
alert(this.name);
};
Programmer = Ext.extend(Person,{
language : null,
constructor : function(atts){
this.language = atts.language;
Programmer.superclass.constructor.call(this,atts);
this.name +='&';
},
sayLan : function(){
alert(this.language);
},
sayName : function(){
alert('My name is: ' + this.name);
}
});
new Person({
id : '1',
name : 'empty',
age : 26
}).sayName();
var programer = new Programmer({
id : '2',
name : 'alex',
age : 26,
language : 'javascript'
});
programer.sayName();
programer.sayLan();
这是对extend方法一个简单的应用,实现了person和programmer的继承,同时实现了对属性的扩展、父类属性的修改、方法的重写、方法的扩展。
重点需要关注supperclass、constructor属性。同时,在constructor的call方法之后有一句this.name +='&';,如果放在call方法之前就起不到修改name属性的效果。
以下为对Extjs中extend方法加了注解之后的源码。
/**
* 创建一个属性拷贝的方法,用于设置子类的override方法
* @param {} o
*/
var io = function(o){
for(var m in o){
this[m] = o[m];
}
};
var oc = Object.prototype.constructor;
return function(sb, sp, overrides){
/**
* 判断sp是否是一个对象,如果是对象,这表示只有两个参数,其中第二参数为需要覆盖的属性或方法。
* 将sb转化为构造方法。
*/
if(Ext.isObject(sp)){
overrides = sp;
sp = sb;
sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);};
}
var F = function(){},
sbp,
spp = sp.prototype;
F.prototype = spp;
/**
* 实现设置sb的prototype为sp,这里通过一个构造方法为空的F类进行赋值,很妙
*/
sbp = sb.prototype = new F();
/**
* 将子类的构造方法设置到子类的prototype的constructor。
*/
sbp.constructor=sb;
/**
* 设置子类superclass属性为父类的prototype
*/
sb.superclass=spp;
/**
* 设置父类prototype的constructor
*/
if(spp.constructor == oc){
spp.constructor=sp;
}
/**
* 设置子类的override方法
*/
sb.override = function(o){
Ext.override(sb, o);
};
/**
* 子类的prototype的superclass赋值为父类的prototype,superclass还有个简写supr
* 不知道为什么?
*/
sbp.superclass = sbp.supr = (function(){
return spp;
});
/**
* 设置子类的prototype的override方法
*/
sbp.override = io;
/**
* 实现属性和方法的重写
*/
Ext.override(sb, overrides);
/**
* 设置子类的extend方法
*/
sb.extend = function(o){return Ext.extend(sb, o);};
return sb;
};
阅读源码时可以理解部分逻辑,但由于javascript功底有限,有些处理方式还是不知所以然。
分享到:
相关推荐
ASP.NET源码——ResviewCRM的ExtJS页面程序.zip
JSP源码——ExtJS 2.2 开源网络硬盘系统_dogdisk.zip
JSP信息办公类实例开发源码——ExtJS 图书管理系统.zip
ASP.NET源码——[博客空间]ExtJs单用户Blog系统后台源码.zip
extjs 源码,有兴趣的可以学习下
JSP源码——[信息办公]ExtJS 2.2 图书管理系统_bmsh.zip
extjs 3 源码,包含文档,代码示例
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
ext 学习资料 内部学习使用。
资源名称:Ext JS源码分析与开发实例宝典内容简介:本书全面系统地剖析了ExtJS 3.0的架构设计原理。通过对源码的“抽丝剥茧”,读者可以掌握Ext JS架构的精妙,从原理层面用活Ext JS。此外,本书还提出了大量的解决...
ExtJS3.0 源码分析与开发实例宝典
EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册...
extjs下载 extjs源码 extjsApi,全部包括在这里面
extJS myeclipse源码示例
ExtJS源码分析与开发实例宝典完整版 1、JS画图部分代码在IE8上看不到效果,因为IE8不支持VML。 2、扩展的组件为作者独立完成,仅供学习之用,一些组件并没有经过严格的测试。 如果需要用到项目之中,请自行测试。 ...