ExtJS在面向对象所作出的努力

ExtJS在面向对象所作出的努力

1：支持命名空间 

  < script type = " text/javascript " >
      // 定义一个命名空间
     Ext.namespace( " Ext.wentao " );
      // 在命名空间上定义一个类
     Ext.wentao.helloworld  =  Ext.emptyFn;
     
      // 创建一个类的实例
      new  Ext.wentao.helloworld();       
  </ script >

 其中

Ext.wentao.helloworld  =  Ext.emptyFn;

等价于

Ext.wentao.helloworld  =  function() {} ;

2：支持类实例属性

< script type = " text/javascript " >
    Ext.namespace( " Ext.wentao " );  // 自定义一个命名空间
    Ext.wentao.Person  =  Ext.emptyFn;  // 在命名空间上自定义一个类

     // 为自定义的类 增加一个 name 属性，并赋值
    Ext.apply(Ext.wentao.Person.prototype,  {
        name:"刘文涛"
    } )
    
    var _person  =   new  Ext.wentao.Person(); // 实例化 自定义类
    alert(_person.name);
    _person.name  =   " 张三 " ; // 修改类name属性
    alert(_person.name);
</ script >

 
3：支持类实例方法 

< script type = " text/javascript " >
    Ext.namespace( " Ext.wentao " );  // 自定义一个命名空间
    Ext.wentao.Person  =  Ext.emptyFn;  // 在命名空间上自定义一个类

     // 演示类实例方法
    Ext.apply(Ext.wentao.Person.prototype,  {
        name:"刘文涛",
        sex:"男",
        print:function(){
            alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
        }
    } )

    var _person  =   new  Ext.wentao.Person(); // 实例化 自定义类
    _person.print();
</ script >

4：支持类静态方法 

< script type = " text/javascript " >
    Ext.namespace( " Ext.wentao " );  // 自定义一个命名空间
    Ext.wentao.Person  =  Ext.emptyFn;  // 在命名空间上自定义一个类

     // 演示类实例方法
    Ext.apply(Ext.wentao.Person.prototype,  {
        name:"刘文涛",
        sex:"男",
        print:function(){
            alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
        }
    } )
    
     // 演示 类静态方法
    Ext.wentao.Person.print  =  function(_name,_sex) {
        var _person = new Ext.wentao.Person();
        _person.name = _name;
        _person.sex = _sex;
        _person.print(); //此处调用类 实例方法，上面print是类 静态方法
    }

    Ext.wentao.Person.print( " 张三 " , " 女 " );  // 调用类 静态方法
</ script >

5：支持构造方法 

< script type = " text/javascript " >
    Ext.namespace( " Ext.wentao " );  // 自定义一个命名空间

     // 构造方法
    Ext.wentao.Person  =  function(_cfg) {
        Ext.apply(this,_cfg);
    }

     // 演示类实例方法
    Ext.apply(Ext.wentao.Person.prototype,  {
        print:function(){
            alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
        }
    } )
    
     // 演示 类静态方法
    Ext.wentao.Person.print  =  function(_name,_sex) {
        var _person = new Ext.wentao.Person({name:_name,sex:_sex});
        _person.print(); //此处调用类 实例方法，上面print是类 静态方法
    }

    Ext.wentao.Person.print( " 张三 " , " 女 " );  // 调用类 静态方法
</ script >

6：支持类继承 

< script type = " text/javascript " >
    Ext.namespace( " Ext.wentao " );  // 自定义一个命名空间

     // *******************父类*********************
     // 构造方法
    Ext.wentao.Person  =  function(_cfg) {
        Ext.apply(this,_cfg);
    }

     // 演示类实例方法
    Ext.apply(Ext.wentao.Person.prototype,  {
        job:"无",
        print:function(){
            alert(String.format("姓名:{0},性别:{1},角色:{2}",this.name,this.sex,this.job));
        }
    } )

     // *******************子类1*********************

    Ext.wentao.Student  =  function(_cfg) {
      Ext.apply(this,_cfg);
    }

   Ext.extend(Ext.wentao.Student,Ext.wentao.Person, {
       job:"学生"
   } )

    var _student  =   new  Ext.wentao.Student( {name:"张三",sex:"女"} );
   _student.print();  // 调用 父类方法
</ script >

7：支持类实例方法重写 

< script type = " text/javascript " >
    Ext.namespace( " Ext.wentao " );  // 自定义一个命名空间

     // *******************父类*********************
     // 构造方法
    Ext.wentao.Person  =  function(_cfg) {
        Ext.apply(this,_cfg);
    }

     // 演示类实例方法
    Ext.apply(Ext.wentao.Person.prototype,  {
        job:"无",
        print:function(){
            alert(String.format("姓名:{0},性别:{1},角色:{2}",this.name,this.sex,this.job));
        }
    } )

     // *******************子类1*********************

    Ext.wentao.Student  =  function(_cfg) {
      Ext.apply(this,_cfg);
    }

     // 重写父类的  实例 方法
   Ext.extend(Ext.wentao.Student,Ext.wentao.Person, {
       job:"学生",
        print:function(){
            alert(String.format("{0}是一位{1}{2}",this.name,this.sex,this.job));
        }
   } )

    var _student  =   new  Ext.wentao.Student( {name:"张三",sex:"女"} );
   _student.print();  // 调用 父类方法
</ script >

8：支持命名空间别名 

< script type = " text/javascript " >
    Ext.namespace( " Ext.wentao " );  // 自定义一个命名空间

    Wt  =  Ext.wentao;  // 命名空间的别名

     // *******************父类*********************
     // 构造方法
    Wt.Person  =  function(_cfg) {
        Ext.apply(this,_cfg);
    }

     // 演示类实例方法
    Ext.apply(Wt.Person.prototype,  {
        job:"无",
        print:function(){
            alert(String.format("姓名:{0},性别:{1},角色:{2}",this.name,this.sex,this.job));
        }
    } )

     // *******************子类1*********************

    Wt.Student  =  function(_cfg) {
      Ext.apply(this,_cfg);
    }

     // 重写父类的  实例 方法
   Ext.extend(Wt.Student,Ext.wentao.Person, {
       job:"学生",
        print:function(){
            alert(String.format("{0}是一位{1}{2}",this.name,this.sex,this.job));
        }
   } )

    var _student  =   new  Wt.Student( {name:"张q三",sex:"女"} );
   _student.print();  // 调用 父类方法
</ script >

9：支持类别名

< script type = " text/javascript " >
    Ext.namespace( " Ext.wentao " );  // 自定义一个命名空间

    Wt  =  Ext.wentao;  // 命名空间的别名

     // *******************父类*********************
     // 构造方法
    Wt.Person  =  function(_cfg) {
        Ext.apply(this,_cfg);
    }

    PN  =  Wt.Person;  // 类别名

     // 演示类实例方法
    Ext.apply(PN.prototype,  {
        job:"无",
        print:function(){
            alert(String.format("姓名:{0},性别:{1},角色:{2}",this.name,this.sex,this.job));
        }
    } )

     // *******************子类1*********************

    Wt.Student  =  function(_cfg) {
      Ext.apply(this,_cfg);
    }

    ST  =  Wt.Student;

     // 重写父类的  实例 方法
   Ext.extend(ST,PN, {
       job:"学生",
        print:function(){
            alert(String.format("{0}是一位{1}{2}",this.name,this.sex,this.job));
        }
   } )

    var _student  =   new  ST( {name:"张q三",sex:"女"} );
   _student.print();  // 调用 父类方法
</ script >