Ext学习笔记01 - NameSpace，类实例属性，类实例方法，类静态方法

最新推荐文章于 2024-08-14 15:45:18 发布

lisatisfy

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量407

点赞数

分类专栏： Extjs Javascript 文章标签： ext javascript dojo java function themes

Javascript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

Extjs

1 篇文章 0 订阅

订阅专栏

从今天起开始学习ExtJs，在这里记录一些学习笔记，方便日后查看，有兴趣的朋友欢迎共同探讨，也请老鸟们多多指教，如果我的理解有什么不正确的地方，也请大家帮助也改正，帮我指出一条明路，先在这里谢过了。

学习过程是看DojoChina的陈治文老师讲解的视频（感谢陈治文老师的辛勤工作，这里先赞一下），不是自己原创，边学习边做笔记，不能算是剽窃吧，朋友们别骂我不厚道。

先把文档放在手边，Ext在线文档：http://extjs.com/deploy/dev/docs/

---------------------------------------------------------------------------------------------------------------------------------

Here we go....

NameSpace

HTML文件中引入基本的三个Ext文件：

    Html代码  
  
< link   type = "text/css"   rel = "stylesheet"   href = "ext/resources/css/ext-all.css" >     
< script   type = "text/javascript"   src = "ext/adapter/ext/ext-base.js" > </ script >     
< script   type = "text/javascript"   src = "ext/ext-all.js" > </ script >     

这点和Dojo一样，Dojo中也是需要引用一个统一的风格的样式（Dojo中有两个常用的themes，soria和tundra），不知道Ext中是不是也提供多样的UI显示主题，简单看了一下resources/css目录下面似乎没有像Dojo一样分层明确的themes，应该是采用其他的方式来实现的。

另外引入两个Ext基本的JS，Ext基本功能的封装。

把定义NameSpace的JS写到一个单独的js文件中

    Js代码  
  
/* 定义命名空间 */     
Ext.namespace("com.meizhi" );    
   
/**   
 * 定义一个类   
 * 写法相当于com.meizhi.HelloWorld = new function() {};   
 */     
com.meizhi.HelloWorld = Ext.emptyFn;   

然后就可以在通过new来创建HelloWorld类的一个实例

    Js代码  
  
<script type= "text/javascript" >    
    new  com.meizhi.HelloWorld();    
</script>   

OK，类的实例创建成功，当然，运行起来会没有任何反应，因为我们在类的定义中只给出了一个空的function。

看Ext是怎样实现NameSpace的，看源代码中的Ext.js

    Js代码  
  
namespace :  function (){    
        var  a=arguments, o= null , i, j, d, rt;    
        for  (i=0; i<a.length; ++i) {    
            d=a[i].split("." );    
            rt = d[0];   
            eval('if (typeof '  + rt +  ' == "undefined"){'  + rt +  ' = {};} o = '  + rt +  ';' );    
            for  (j=1; j<d.length; ++j) {    
                o[d[j]]=o[d[j]] || {};   
                o=o[d[j]];   
            }   
        }   
    },   
   
    ...............   
   
    Ext.ns = Ext.namespace;   
   
    ...............   
   
Ext.ns("Ext" ,  "Ext.util" ,  "Ext.grid" ,  "Ext.dd" ,  "Ext.tree" ,  "Ext.data" ,    
                "Ext.form" ,  "Ext.menu" ,  "Ext.state" ,  "Ext.lib" ,  "Ext.layout" ,  "Ext.app" ,  "Ext.ux" );    

通过arguments得到namespace方法的参数，然后用点号分割成数组，再依次把空对象递归赋值进去，这样Ext实现NameSpace的过程，而用点号进行连接，实际上就是对象的嵌套。

程序通过命名空间可以具有很好的组织形式，在java中命名空间的形式是通过package来实现的，Ext命名空间实际上是使用JavaScript的对象和对象属性级联来模拟的，和java的命名空间实现方式是不同的。将Ext的NameSpace用java的package来理解就容易多了。

命名空间别名

举例：

    Js代码  
  
Mz = com.meizhi;    

要求首字母必须大写，其他字母小写。

实际上就是通常命名空间是一个比较长的字符串，用一个缩写来代替。

    Js代码  
  
Ext.namespace( "com.meizhi" );    
   
//命名空间别名     
Mz = com.meizhi;   
   
Mz.HelloWorld = Ext.emptyFn;   

类别名

举例

    Java代码  
  
HW = com.meizhi.HelloWorld    

要求别名全部大写，用来区别NameSpace的别名。

别名用的情况不是很多，在读别人的代码的时候能够看明白是怎么回事就好了。

类实例属性

“类实例”感觉怪怪的，还是按照java中的概念来理解一下，java中类的一个实例，其实就是一个对象，java是面向对象的语言，Ext是用 JavaScript实现的面向对象（这样的说法不是很严谨，意会一下），那么这里的“类实例”其实就是我们通常所说的“对象”。

那么“类实例属性”，其实也就是对象的属性。

来看一下类实例属性的创建：

    Js代码  
  
Ext.namespace( "com.meizhi" );    
   
com.meizhi.Person = Ext.emptyFn;   
   
Ext.apply(com.meizhi.Person.prototype,{   
    name:"<span style=" background-color: #ffff00; "><span style=" background-color: #ffffff;">meizhi</span>    
   
</span>   
   
",   
    sex:"男"     
});   

prototype 是JavaScript中的函数原型，apply 方法是JavaScript中提供的对象绑定的方法（JavaScript中常用的对象绑定方法有两种：apply和call），Ext.apply是对 JavaScript提供的apply方法进行了一层封装，方便使用，如果不了解的朋友可以先自己查一下相关的资料（参考：http://virgos.javaeye.com/blog/222199 ），这里不做赘述。

来看一下调用：

    Html代码  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >     
< html >     
< head >     
< meta   http-equiv = "Content-Type"   content = "text/html; charset=UTF-8" >     
< title > NameSpace </ title >     
< link   type = "text/css"   rel = "stylesheet"   href = "ext/resources/css/ext-all.css" >     
< script   type = "text/javascript"   src = "ext/adapter/ext/ext-base.js" > </ script >     
< script   type = "text/javascript"   src = "ext/ext-all.js" > </ script >     
   
< script   type = "text/javascript"   src = "js/helloworld.js" > </ script >     
< script   type = "text/javascript" >     
    var _person  =  new  com.meizhi.Person();    
    alert(_person.name);   
    _person.name  =  "陈治文" ;    
    alert(_person.name);   
</ script >     
</ head >     
< body >     
   
</ body >     
</ html >     

结果：当进入页面的时候，会弹出对话框，内容是“meizhi ”，点击确定以后又弹出对话框，内容是“陈治文”。这是因为在创建类Person的时候，创建了name属性，并赋给它一个默认值“ meizhi ”，在调用的时候我们更改了_person对象的name属性，并赋值“陈治文”，这样两次alert的结果就不相同了。

这里给对象属性赋值操作体现了JavaScript的特性，在Java中我们如果在给对象属性取值和赋值的时候，都是会用到getters和setters 方法（每个POJO中都会有一大堆的属性，然后用eclipse自动生成一大堆的getters和setters方法），而JavaScript的处理方式更加灵活，当然，这两种方式各有利弊，需要在其中找到一个平衡点。

类实例方法

理解了Ext的类实例属性，那么类实例方法就好理解了，就是类里面的一个方法。

    Js代码  
  
Ext.namespace( "com.meizhi" );    
   
com.meizhi.Person = Ext.emptyFn;   
   
Ext.apply(com.meizhi.Person.prototype,{   
        name:"" ,    
        sex:"" ,    
        print:function (){    
            alert(String.format("姓名:{0},性别:{1}" , this .name, this .sex));    
        }   
    });   

"String.format"是Ext封装的一个字符串处理方法，在Ext中有很多类似的工具方法（这一点Dojo中也是这样做的，似乎框架中都会封装一些常用的工具方法，方便使用）。

"String.format"方法中的参数格式，写法很方便，不用做繁琐的字段拼接。

上面代码中Person类中定义了两个类实例属性name和sex，并且它们的默认值为空，在构造Person对象实例的时候可以为它们进行赋值操作。提供了一个类实例方法，将属性输出。

现在的代码就有点儿像java中的类了，呵呵

来看调用：

    Js代码  
  
<script type= "text/javascript" >    
    var  person =  new  com.meizhi.Person();    
       
    //设置属性     
    person.name = "<span style=" background-color: #ffff00; "><span style=" background-color: #ffffff;">meizhi</span>    
   
</span>   
   
";   
    person.sex = "男" ;    
       
    //调用方法     
    person.print();   
       
    //为该对象再次设置属性     
    person.name = "Katrana" ;    
    person.sex = "女" ;    
       
    person.print();   
</script>   

可以看到弹出对话框中显示：“姓名：meizhi ，性别：男”和“姓名：Katrana，性别：女”，是经过格式化以后的文本输出样式，也就是类实例方法中定义的样式，从这里也可以看到Ext封装的"String.format"方法的使用效果。

类静态方法

定义:在一个类级别上的共享方法。

来看定义

    Js代码  
  
Ext.namespace( "com.meizhi" );    
   
com.meizhi.Person = Ext.emptyFn;   
   
//这里定义的 print方法 是 类实例方法     
Ext.apply(com.meizhi.Person.prototype,{   
        name:"" ,    
        sex:"" ,    
        print:function (){    
            alert(String.format("姓名:{0},性别:{1}" , this .name, this .sex));    
        }   
    });   
   
//这里定义的 print方法 是 类静态方法     
com.meizhi.Person.print = function (_name, _sex){    
    var  _person =  new  com.meizhi.Person();    
    _person.name = _name;   
    _person.sex = _sex;   
    _person.print();   
}   

对照Java代码来看一下，理解的更快一些：

    Java代码  
  
Person.print(String name, String sex) {    
    Person person = new  Person();    
    person.setName(name);   
    person.setSex(sex);   
    person.print();   
}   

调用

    Js代码  
  
<script type= "text/javascript" >    
    new  com.meizhi.Person.print( "meizhi" , "男" );    
    new  com.meizhi.Person.print( "katrana" , "女" );    
</script>   

调用的过程是 new com.meizhi.Person.print(name, sex)，而不是先new com.meizhi.Person()，在调用它的print()方法。构造对象的过程是在静态方法内部完成的，这里需要好好的体会一下。

结果和上面的例子是一样的。

lisatisfy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ext学习笔记01 - NameSpace，类实例属性，类实例方法，类静态方法

从今天起开始学习ExtJs，在这里记录一些学习笔记，方便日后查看，有兴趣的朋友欢迎共同探讨，也请老鸟们多多指教，如果我的理解有什么不正确的地方，也请大家帮助也改正，帮我指出一条明路，先在这里谢过了。学习过程是看DojoChina的陈治文老师讲解的视频（感谢陈治文老师的辛勤工作，这里先赞一下），不是自己原创，边学习边做笔记，不能算是剽窃吧，朋友们别骂我不厚道。先把文档放
复制链接

扫一扫

专栏目录