34、Ext基础架构--define定义一个类

如果要学好ExtJS,对于javascript是必须的,也就是说,对于理解ExtJS底层基础架构的理解也是必须的。那么我们现在就开始学习ExtJS的基础架构。
如何创建一个Ext的类、创建类的复杂流程
- Ext.js和Ext-more.js深入解析
- Ext对原生javascript类的扩展
- Ext操作Dom

- Ext开始响应事件

定义类的方法:define
对于Ext4.X版本来说,采用了新定义类的define方法,而不是延续旧版本的extend方法,那么对于定义一个新的类。我们来了解下define的使用。
Ext.define(classname,properties,callback);
- classname:要定义的新类的类名
- properties:新类的配置对象
- callback:回调函数,当类创建完后执行该函数

对于Ext定义一个新的类,那么我们可以想象到,既然是利用Ext.define去创建类,那么创建的类一定是Ext所特有的类,不同于传统的javascript创建一个类,也就是说我们要对于define方法的第二个参数properties配置项进行配置,需要找到Ext对于类支持的API并进行配置

  1. Ext.onReady(function(){  
  2.   
  3.     //在Ext中如何定义一个类:Ext.define(className,properties,callback)  
  4.     Ext.define('Person',{  
  5.     //这里是是对于这个类的一些配置信息(看Ext.Class的configs)  
  6.         //config属性就是配置当前类的属性内容,并且会加上get和set方法  
  7.         config:{  
  8.             name:'z3',  
  9.             age:20  
  10.         },  
  11.         //自己定义的方法  
  12.         say:function(){  
  13.             alert('我是方法。。。');  
  14.         },  
  15.         //给当前定义的类加一个构造器,目的就是为了初始化信息  
  16.         constructor:function(config){  
  17.             var me = this;  
  18.             for(var attr in config){   //循环显示传递进来的参数  
  19.                 alert(attr + ':' + config[attr]);  
  20.             }  
  21.             me.initConfig(config);   //真正的初始化传递进来参数  
  22.         }  
  23.     });  
  24.       
  25.     var p = new Person();  
  26. //  alert(p.name);  
  27. //  alert(p.age);  
  28.     alert(p.getName());  
  29.     p.say();  
  30.       
  31.     var p1 = new Person({name:'li4',age:25});  
  32. //  alert(p.name);  
  33. //  alert(p.age);  
  34.     alert(p1.getName());  
  35.     p1.say();  
  36.       
  37.     //Ext.create 实例化一个对象  
  38.     var p2 = Ext.create('Person',{  
  39.     name:'wang5',  
  40.     age:40  
  41.     });  
  42.     alert(p2.getName());  
  43.     p2.say();  
  44. }); 
对于configs:
- extend:用于继承
- alias:类的别名
- alternateClassName:备用名,与alias差不多
- requires:需要使用到的类名数组,在动态加载时会根据该属性去下载类,注意需要的类是在当前类之前被加载
- uses:与requires类似 但是被引用的类可以在该类之后才加载
- constructor:构造器属性,一般用来初始化类的配置和调用其父类的方法
- mixins:混入属性,多继承
- config:定义类的配置项,会把config里的每个属性加上get和set方法
- statics:定义静态方法,属性不能被子类继承
- inheritableStatics:与statics类似,但是其属性可被子类继承
- singleton:设置该类为单件模式

继承:

  1. Ext.onReady(function(){  
  2.   
  3. //extend  
  4. //sup class  
  5.     Ext.define('Person',{  
  6.         config:{  
  7.             name:'zzz'  
  8.         },  
  9.         constructor:function(config){  
  10.             var me = this;  
  11.             me.initConfig(config);  
  12.         }  
  13.     });  
  14.       
  15. //sub class  
  16.     Ext.define('Boy',{  
  17.         //使用Ext的继承  
  18.         extend:'Person',  
  19.         config:{  
  20.             sex:'男',  
  21.             age:20  
  22.         }  
  23.     });  
  24.       
  25.     var b = Ext.create('Boy',{  
  26.         name:'赵六',  
  27.         age:50  
  28.     });  
  29.       
  30.     alert(b.getName());  
  31.     alert(b.sex);  
  32.     alert(b.getAge());  
  33.       
  34.       
  35. });  
对于javascript的原型prototype及继承(理解它来理解Ext的继承)

  1.  //javascript  :  prototype(原型)  :所有类的实例对象所共享  
  2. //  function Person(name){  
  3. //      this.name = name;  
  4. //      this.sayName = function(){  
  5. //          alert(this.name);  
  6. //      }  
  7. //  };  
  8. //  var p = new Person('涨3');  
  9. //  p.sayName();  
  10. //    
  11. //  var p2 = new Person('涨3');  
  12. //  p2.sayName();  
  13. //    
  14. //  alert(p.sayName == p2.sayName);  //这里是false  
  15.       
  16.     function Person(name){  
  17.         this.name = name;  
  18. //      <span style="color:#3366ff;">this.sayName = sayName;//使用在类外部定义一个方法,类内引用,alert(p.sayName == p2.sayName);为true</span>  
  19.     };  
  20.       
  21. //  <span style="color:#3366ff;">function sayName(){  
  22. //          alert(this.name);  
  23. //      };</span>  
  24.         //使用prototype(原型)增加方法,alert(p.sayName == p2.sayName);为true,推荐使用  
  25.         <span style="color:#ff0000;">Person.prototype.sayName = function(){  
  26.             alert(this.name);  
  27.         };</span>  
  28.           
  29.     var p = new Person('涨3');  
  30.     p.sayName();  
  31.       
  32.     var p2 = new Person('涨3');  
  33.     p2.sayName();  
  34.       
  35.     alert(p.sayName == p2.sayName);  //这里是true  
javascript的继承:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1.     //javascript  :  prototype(原型) :实现继承  
  2.     //supclass  
  3.     var Person = function(name){  
  4.         this.name = name;  
  5.     };  
  6.       
  7.     alert(Person.prototype.constructor);   //原型对象的构造器。默认是当前的类的模板  
  8.     //上面返回:  
  9.     //  function(name){  
  10.     //      this.name = name;  
  11.     //  }  
  12.     //supclass prototype object    
  13.     //扩展类的属性:使用简单原型对象的方法  
  14.     Person.prototype = {  
  15.         constructor:Person,  
  16.         id:100  
  17.     };  
  18.       
  19. //  //subclass  
  20. //  var Boy = function(sex,age){  
  21. //      this.sex = sex;  
  22. //      this.age = age;  
  23. //  };  
  24. //    
  25. //  //实现原型继承  :一般写法就是子类.prototype = 父类的一个实例  
  26. //  //实现原型继承:继承了父类的模板和父类的原型对象  
  27. //  Boy.prototype = new Person('里');  //这里别扭的是父类参数的输入要在这里  
  28. //    
  29. //  var b = new Boy('男',25);  
  30. //  alert(b.name);  
  31. //  alert(b.sex);  
  32. //  alert(b.id);  
  33. //    
  34. //  //希望的:var b = new Boy('张三','男',40);  
  35.       
  36.         //subclass:改造一下  
  37.     var Boy = function(name,sex,age){  
  38.         //借用构造函数继承的方法  
  39.         Person.call(this,name);  //call方法,将父类的模板绑定到当前类  
  40.         this.sex = sex;  
  41.         this.age = age;  
  42.     };  
  43.       
  44.     //实现原型继承  :一般写法就是子类.prototype = 父类的一个实例  
  45.     //实现原型继承:继承了父类的模板和父类的原型对象  
  46.     Boy.prototype = new Person();  //这里别扭的是父类参数的输入要在这里  
  47.       
  48.     var b = new Boy('李四','男',25);  
  49.     alert(b.name);  
  50.     alert(b.sex);  
  51.     alert(b.id);  
这是ExtJs的extend的底层实现

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. //superclass  
  2. var Person = function(name){  
  3.     this.name = name;  
  4. };  
  5. Person.prototype = {  
  6.     constructor:Person,  
  7.     id:100  
  8. };  
  9. //subclass  
  10. var Boy = function(name,sex,age){  
  11.     Person.call(this,name);  
  12.     this.sex = sex;  
  13.     this.age = age;  
  14. };  
  15. <span style="color:#ff6666;">//自己实现extend的方法</span>  
  16. function myextend(sub,sup){  
  17.     var F = function(){},               //定义一个空函数为中转函数  
  18.             subclassProto,              //子类的原型  
  19.             superclassProto = sup.prototype;  //把父类的原型对象交给superclassProto变量  
  20.               
  21.     F.prototype = superclassProto;    //做中转的位置:把父类的原型对象赋值给了F这个空函数的原型对象  
  22.     subclassProto = sub.prototype = new F();   //进行原型继承  
  23.     subclassProto.constructor = sub;      //还原构造器  
  24.     sub.superclass = superclassProto;     //做了一个保存,保存了父类的原型对象  
  25.       
  26.     //目的是为了防止大意,在还原父类  
  27.     if(superclassProto.construtctor === Object.prototype.constructor){  
  28.         superclassProto.constructor = sup;  
  29.     }  
  30.       
  31. };  
  32.   
  33. //实现继承  
  34. <span style="color:#ff0000;">myextend(Boy,Person);</span>     
  35.   
  36. <span style="color:#3333ff;">var b = new Boy('李四','男',25);</span>  
  37. alert(b.name);  
  38. alert(b.age);  
  39. alert(b.sex);  
  40. alert(b.id);  
  41.       
上面的继承以及实例化一个子类的方式同java继承类似了。

其他配置项:别名与备用名

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1.     Ext.define("User",{  
  2.         config:{  
  3.             name:'222zzzzz',  
  4.             age:100  
  5.         },  
  6. //      alias:'uu',           //给类起别名Ext.ClassManager  
  7.         alternateClassName:'uuu',   //给当前类一个备用名  底层代码在Ext.ClassManager  
  8.         constructor:function(config){  
  9.             var me = this;  
  10.             me.initConfig(config);  
  11.         }  
  12.     });  
  13.       
  14. //  var u = Ext.create('User');  
  15.     var u = Ext.create('uuu');    
  16.     alert(u.name);  
  17.     alert(u.age);  
静态属性或方法:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. //statics(子类不能继承)和inheritablestatics(子类可继承) 给当前类定义静态方法和属性  
  2.   
  3.     Ext.define('Person',{  
  4.     config:{  
  5.         name:'我是父类'  
  6.     },  
  7.     statics:{       //静态的方法或属性  
  8.         id:'我是Person的static id,不能被子类继承'  
  9.     },  
  10.     inheritableStatics:{    //静态的方法或属性  
  11.         idi:'我是inheritablestatics id,可以被子类继承'  
  12.     },  
  13.     constructor:function(config){  
  14.         var me = this;  
  15.         me.initConfig(config);  
  16.     }  
  17.     });  
  18.       
  19.     Ext.define('User',{  
  20.         extend:'Person',  
  21.         config:{  
  22.             age:20  
  23.         }  
  24.     });  
  25.       
  26.     //一定注意:!!!!  
  27.     var p = Ext.create('Person');  
  28.     alert('id' + p.id);       //实例对象是无法使用静态属性或方法  
  29.     //用类名去使用静态属性或方法  
  30.     alert(Person.id);  
  31.     alert(Person.idi);  
  32.       
  33.     alert('zilei');  
  34.     alert(User.id);    //alert undefine  
  35.     alert(User.idi);    //alert 我是inheritablestatics id,可以被子类继承  
  36.       
混入:mixins

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. //mixins 混入(混合)的配置项,可以多继承的配置  
  2. Ext.define('Sing',{  
  3.     canSing:function(){  
  4.     alert('cansing...');  
  5.     }  
  6. });  
  7. Ext.define('Say',{  
  8.     canSay:function(){  
  9.     alert('cansay...');  
  10.     }  
  11. });  
  12.   
  13. Ext.define('User1',{  
  14.     mixins:{  
  15.         sing:'Sing',  
  16.         say:'Say'  
  17.     }  
  18. });  
  19.   
  20. var u1 = Ext.create('User1');  
  21. u1.canSay();  
  22. u1.canSing();  
关于requires 和uses 以及singleton的简要说明

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. //requires 和 uses 以及singleton  
  2. Ext.define('MyComponent',{  
  3. //可能需要Ext或者是其他的类做支持  
  4.     //reuqires加载需要的类时机是:当前类初始化之前被加载  
  5.     requires:['Ext.window.Window','Ext.button.Button']  
  6.     //uses加载需要的类时机是:当前类初始化之后被加载  
  7.     uses:['Ext.form.Panel','Ext.grid.Panel']  
  8.       
  9.     singleton:true    //当前的类就被当做一个单例对象  
  10. });  
一个类定义加载的流程:

用别名的方式创建:(xtype属性)
Ext.widget或Ext.createWidget方法的使用


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值