转ExtJs5——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并进行配置

[javascript]view plain copy
Ext.onReady(function(){  
  
    //在Ext中如何定义一个类：Ext.define(className,properties,callback)  
    Ext.define('Person',{  
    //这里是是对于这个类的一些配置信息（看Ext.Class的configs）  
        //config属性就是配置当前类的属性内容，并且会加上get和set方法  
        config:{  
            name:'z3',  
            age:20  
        },  
        //自己定义的方法  
        say:function(){  
            alert('我是方法。。。');  
        },  
        //给当前定义的类加一个构造器,目的就是为了初始化信息  
        constructor:function(config){  
            var me = this;  
            for(var attr in config){   //循环显示传递进来的参数  
                alert(attr + ':' + config[attr]);  
            }  
            me.initConfig(config);   //真正的初始化传递进来参数  
        }  
    });  
      
    var p = new Person();  
//  alert(p.name);  
//  alert(p.age);  
    alert(p.getName());  
    p.say();  
      
    var p1 = new Person({name:'li4',age:25});  
//  alert(p.name);  
//  alert(p.age);  
    alert(p1.getName());  
    p1.say();  
      
    //Ext.create 实例化一个对象  
    var p2 = Ext.create('Person',{  
    name:'wang5',  
    age:40  
    });  
    alert(p2.getName());  
    p2.say();  
});  

对于configs：
- extend：用于继承
- alias:类的别名
- alternateClassName：备用名，与alias差不多
- requires：需要使用到的类名数组，在动态加载时会根据该属性去下载类，注意需要的类是在当前类之前被加载
- uses：与requires类似但是被引用的类可以在该类之后才加载
- constructor：构造器属性，一般用来初始化类的配置和调用其父类的方法
- mixins：混入属性，多继承
- config：定义类的配置项，会把config里的每个属性加上get和set方法
- statics：定义静态方法，属性不能被子类继承
- inheritableStatics：与statics类似，但是其属性可被子类继承
- singleton：设置该类为单件模式

继承：

[javascript]view plain copy
Ext.onReady(function(){  
  
//extend  
//sup class  
    Ext.define('Person',{  
        config:{  
            name:'zzz'  
        },  
        constructor:function(config){  
            var me = this;  
            me.initConfig(config);  
        }  
    });  
      
//sub class  
    Ext.define('Boy',{  
        //使用Ext的继承  
        extend:'Person',  
        config:{  
            sex:'男',  
            age:20  
        }  
    });  
      
    var b = Ext.create('Boy',{  
        name:'赵六',  
        age:50  
    });  
      
    alert(b.getName());  
    alert(b.sex);  
    alert(b.getAge());  
      
      
});  

对于javascript的原型prototype及继承（理解它来理解Ext的继承）

[javascript]view plain copy
    //javascript  :  prototype(原型)  :所有类的实例对象所共享  
//  function Person(name){  
//      this.name = name;  
//      this.sayName = function(){  
//          alert(this.name);  
//      }  
//  };  
//  var p = new Person('涨3');  
//  p.sayName();  
//    
//  var p2 = new Person('涨3');  
//  p2.sayName();  
//    
//  alert(p.sayName == p2.sayName);  //这里是false  
      
    function Person(name){  
        this.name = name;  
//      <span style="color:#3366ff;">this.sayName = sayName;//使用在类外部定义一个方法，类内引用，alert(p.sayName == p2.sayName);为true</span>  
    };  
      
//  <span style="color:#3366ff;">function sayName(){  
//          alert(this.name);  
//      };</span>  
        //使用prototype（原型）增加方法，alert(p.sayName == p2.sayName);为true，推荐使用  
        <span style="color:#ff0000;">Person.prototype.sayName = function(){  
            alert(this.name);  
        };</span>  
          
    var p = new Person('涨3');  
    p.sayName();  
      
    var p2 = new Person('涨3');  
    p2.sayName();  
      
    alert(p.sayName == p2.sayName);  //这里是true  

javascript的继承：

[javascript]view plain copy
    //javascript  :  prototype(原型) :实现继承  
    //supclass  
    var Person = function(name){  
        this.name = name;  
    };  
      
    alert(Person.prototype.constructor);   //原型对象的构造器。默认是当前的类的模板  
    //上面返回：  
    //  function(name){  
    //      this.name = name;  
    //  }  
    //supclass prototype object    
    //扩展类的属性：使用简单原型对象的方法  
    Person.prototype = {  
        constructor:Person,  
        id:100  
    };  
      
//  //subclass  
//  var Boy = function(sex,age){  
//      this.sex = sex;  
//      this.age = age;  
//  };  
//    
//  //实现原型继承  ：一般写法就是子类.prototype = 父类的一个实例  
//  //实现原型继承：继承了父类的模板和父类的原型对象  
//  Boy.prototype = new Person('里');  //这里别扭的是父类参数的输入要在这里  
//    
//  var b = new Boy('男',25);  
//  alert(b.name);  
//  alert(b.sex);  
//  alert(b.id);  
//    
//  //希望的：var b = new Boy('张三','男',40);  
      
        //subclass:改造一下  
    var Boy = function(name,sex,age){  
        //借用构造函数继承的方法  
        Person.call(this,name);  //call方法，将父类的模板绑定到当前类  
        this.sex = sex;  
        this.age = age;  
    };  
      
    //实现原型继承  ：一般写法就是子类.prototype = 父类的一个实例  
    //实现原型继承：继承了父类的模板和父类的原型对象  
    Boy.prototype = new Person();  //这里别扭的是父类参数的输入要在这里  
      
    var b = new Boy('李四','男',25);  
    alert(b.name);  
    alert(b.sex);  
    alert(b.id);  

这是ExtJs的extend的底层实现

[javascript]view plain copy
//superclass  
var Person = function(name){  
    this.name = name;  
};  
Person.prototype = {  
    constructor:Person,  
    id:100  
};  
//subclass  
var Boy = function(name,sex,age){  
    Person.call(this,name);  
    this.sex = sex;  
    this.age = age;  
};  
<span style="color:#ff6666;">//自己实现extend的方法</span>  
function myextend(sub,sup){  
    var F = function(){},               //定义一个空函数为中转函数  
            subclassProto,              //子类的原型  
            superclassProto = sup.prototype;  //把父类的原型对象交给superclassProto变量  
              
    F.prototype = superclassProto;    //做中转的位置：把父类的原型对象赋值给了F这个空函数的原型对象  
    subclassProto = sub.prototype = new F();   //进行原型继承  
    subclassProto.constructor = sub;      //还原构造器  
    sub.superclass = superclassProto;     //做了一个保存，保存了父类的原型对象  
      
    //目的是为了防止大意，在还原父类  
    if(superclassProto.construtctor === Object.prototype.constructor){  
        superclassProto.constructor = sup;  
    }  
      
};  
  
//实现继承  
<span style="color:#ff0000;">myextend(Boy,Person);</span>     
  
<span style="color:#3333ff;">var b = new Boy('李四','男',25);</span>  
alert(b.name);  
alert(b.age);  
alert(b.sex);  
alert(b.id);  
      

上面的继承以及实例化一个子类的方式同java继承类似了。

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

[javascript]view plain copy
    Ext.define("User",{  
        config:{  
            name:'222zzzzz',  
            age:100  
        },  
//      alias:'uu',           //给类起别名Ext.ClassManager  
        alternateClassName:'uuu',   //给当前类一个备用名  底层代码在Ext.ClassManager  
        constructor:function(config){  
            var me = this;  
            me.initConfig(config);  
        }  
    });  
      
//  var u = Ext.create('User');  
    var u = Ext.create('uuu');    
    alert(u.name);  
    alert(u.age);  

静态属性或方法：

[javascript]view plain copy
//statics（子类不能继承）和inheritablestatics（子类可继承） 给当前类定义静态方法和属性  
  
    Ext.define('Person',{  
    config:{  
        name:'我是父类'  
    },  
    statics:{       //静态的方法或属性  
        id:'我是Person的static id，不能被子类继承'  
    },  
    inheritableStatics:{    //静态的方法或属性  
        idi:'我是inheritablestatics id，可以被子类继承'  
    },  
    constructor:function(config){  
        var me = this;  
        me.initConfig(config);  
    }  
    });  
      
    Ext.define('User',{  
        extend:'Person',  
        config:{  
            age:20  
        }  
    });  
      
    //一定注意：！！！！  
    var p = Ext.create('Person');  
    alert('id' + p.id);       //实例对象是无法使用静态属性或方法  
    //用类名去使用静态属性或方法  
    alert(Person.id);  
    alert(Person.idi);  
      
    alert('zilei');  
    alert(User.id);    //alert undefine  
    alert(User.idi);    //alert 我是inheritablestatics id，可以被子类继承  
      

混入：mixins

[javascript]view plain copy
//mixins 混入（混合）的配置项，可以多继承的配置  
Ext.define('Sing',{  
    canSing:function(){  
    alert('cansing...');  
    }  
});  
Ext.define('Say',{  
    canSay:function(){  
    alert('cansay...');  
    }  
});  
  
Ext.define('User1',{  
    mixins:{  
        sing:'Sing',  
        say:'Say'  
    }  
});  
  
var u1 = Ext.create('User1');  
u1.canSay();  
u1.canSing();  

关于requires 和uses 以及singleton的简要说明

[javascript]view plain copy
//requires 和 uses 以及singleton  
Ext.define('MyComponent',{  
//可能需要Ext或者是其他的类做支持  
    //reuqires加载需要的类时机是：当前类初始化之前被加载  
    requires:['Ext.window.Window','Ext.button.Button']  
    //uses加载需要的类时机是：当前类初始化之后被加载  
    uses:['Ext.form.Panel','Ext.grid.Panel']  
      
    singleton:true    //当前的类就被当做一个单例对象  
});  

一个类定义加载的流程：

用别名的方式创建：（xtype属性）
Ext.widget或Ext.createWidget方法的使用

转ExtJs5——Ext基础架构--define定义一个类

猜你喜欢