一、javascript类的定义
在javascript中,通过创建一个构造函数来定义一个类,然后通过prototype来扩展类的功能。假设我们定义一个螃蟹类:
Crab = function(){
this.legs = 10;
}
Crab.prototype = {
say: function(){
alert("我是一只螃蟹,我有" + this.legs + "只脚,横行霸道是我的天性");
}
};
//测试
var crab = new Crab();
alert(crab.legs);
crab.say();
prototype是javascript一个非常重要的功能,能动态的为对象添加任何新的方法。Extjs就是基于prototype实现的OOP机制。
二、Extjs命名空间的定义
命名空间(namespace)类似于java中的包,用来对工程中的类进行有效管理。命名空间的层次结构使用“.”来划分。Ext通过namespace()方法创建命名空间。
语法:Ext.namespace(“命名空间”)
示例:Ext.namespace("com.aptech");
三、Extjs OOP
在Extjs中创建类和javascript有些不同,我们会使用他封装好的东西,而不全是基于javascript语法。站在巨人的肩膀上,确实有些高处不胜寒。所以,深刻了解javascript基础对于日后的拓深十分必要,相信我吧。
我们通常会基于命名空间创建新类,按照java的设计思想,会有封装、继承和多态。Extjs也不例外,而且Extjs为OOP做了很多基础工作,使用起来非常模式化。一个类至少应该有private和public成员,且可以派生出子类,并能重写父类的方法。那么,让我们来看看Extjs是如何做到的。
Ext.namespace("com.aptech");
com.aptech.First = function(){
//私有成员
var kiss = "中华人民共和国";
//私有方法
//公有方法
return {
//公有成员
init: function(){
alert("init");
alert(kiss);
},
//公有成员
method: function(){
alert("method");
}
};
};
我们定义了一个类First,这实在是一个没有任何业务意义的类,只是为了说明方便。First位于com.aptech命名空间中,有一个私有成员kiss,并且向外部暴露了两个方法init()和method()。其实,在function和return之间定义的成员全总是private,而在ruturn内部定义的成员全部是public,如果大家的javascipt基础扎实的话,这段代码并不难理解,我们定义了一个匿名构造函数,函数中的变量是局部变量,外部无法访问,返回一个对象,对象是以json格式定义的,该对象中定义的方法自然可以访问了。
javascipt本身不支持继承,但是我们可以模拟。继承说穿了就是子类将父类的成员据为已有,专业点就是“成员复制”,即可以复制成员变量,也可以复制成员方法。我们定义下面的方法完成此功能:
var extend = function(child, father){
child.prototype = father.prototype;
}
现在,我们定义一个螃蟹的子类——蟹将,螃蟹成精变成了人,由原来的10只脚变成2只脚,但狗改不了吃屎,行为不会改变,依旧横行霸道。
GenCrab = function(){this.legs = 2;};
extend(GenCrab, Crab);
var gc = new GenCrab();
gc.say();
就这样,一个新类产生了。不过,在Extjs中有更加优雅的做法。
我们定义一个类Second,继承自First,看看Extjs是如何做的。
//创建子类
com.aptech.Second = function(){
com.aptech.Second.superclass.constructor.apply(this);//调用父类构造方法
}
//com.aptech.Second子类继承自父类com.aptech.First
Ext.extend(com.aptech.Second, com.aptech.First, {
//新方法
fun: function(i){
return i * i * i;
},
//重写的方法
method: function(){
alert("Second::method")
}
});
//测试
var second = new com.aptech.Second();
alert(second.fun(5));
second.method();
哈哈,简直太优雅了,不仅可以添加新方法,还可以重写父类的方法(话外音:这不是多态的表现形式吗?)。这一切都是由Ext.extend()搞定的,这个方法有点复杂,但他的实现原理是相同的。
转载地址:http://hi.baidu.com/ext_js/blog/item/968f0244745f1d2ecefca328.html