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

最新推荐文章于 2023-09-20 19:52:52 发布
最新推荐文章于 2023-09-20 19:52:52 发布
阅读量87 收藏
点赞数
分类专栏： extJs资料 文章标签： EXT JavaScript CSS Dojo prototype ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_4507/article/details/82064008
版权

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

 

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

 

 

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

 

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

 

Here we go....

NameSpace

 

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

Html代码 复制代码  收藏代码
  1. <link type="text/css" rel="stylesheet" href="ext/resources/css/ext-all.css">  
  2. <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>  
  3. <script type="text/javascript" src="ext/ext-all.js"></script>   
<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代码 复制代码  收藏代码
  1. /* 定义命名空间 */  
  2. Ext.namespace("com.meizhi");   
  3.   
  4. /**  
  5.  * 定义一个类  
  6.  * 写法相当于com.meizhi.HelloWorld = new function() {};  
  7.  */  
  8. com.meizhi.HelloWorld = Ext.emptyFn;  
/* 定义命名空间 */
Ext.namespace("com.meizhi");

/**
 * 定义一个类
 * 写法相当于com.meizhi.HelloWorld = new function() {};
 */
com.meizhi.HelloWorld = Ext.emptyFn;

 

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

Js代码 复制代码  收藏代码
  1. <script type="text/javascript">   
  2.     new com.meizhi.HelloWorld();   
  3. </script>  
<script type="text/javascript">
	new com.meizhi.HelloWorld();
</script>

 

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

 

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

Js代码 复制代码  收藏代码
  1. namespace : function(){   
  2.         var a=arguments, o=null, i, j, d, rt;   
  3.         for (i=0; i<a.length; ++i) {   
  4.             d=a[i].split(".");   
  5.             rt = d[0];   
  6.             eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = ' + rt + ';');   
  7.             for (j=1; j<d.length; ++j) {   
  8.                 o[d[j]]=o[d[j]] || {};   
  9.                 o=o[d[j]];   
  10.             }   
  11.         }   
  12.     },   
  13.   
  14.     ...............   
  15.   
  16.     Ext.ns = Ext.namespace;   
  17.   
  18.     ...............   
  19.   
  20. Ext.ns("Ext", "Ext.util", "Ext.grid", "Ext.dd", "Ext.tree", "Ext.data",   
  21.                 "Ext.form", "Ext.menu", "Ext.state", "Ext.lib", "Ext.layout", "Ext.app", "Ext.ux");   
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代码 复制代码  收藏代码
  1. Mz = com.meizhi;  
Mz = com.meizhi;

 

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

 

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

Js代码 复制代码  收藏代码
  1. Ext.namespace("com.meizhi");   
  2.   
  3. //命名空间别名   
  4. Mz = com.meizhi;   
  5.   
  6. Mz.HelloWorld = Ext.emptyFn;  
Ext.namespace("com.meizhi");

//命名空间别名
Mz = com.meizhi;

Mz.HelloWorld = Ext.emptyFn;

 

 

 类别名

举例

Java代码 复制代码  收藏代码
  1. HW = com.meizhi.HelloWorld  
HW = com.meizhi.HelloWorld

 

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

 

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

 

类实例属性

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

 

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

 

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

Js代码 复制代码  收藏代码
  1. Ext.namespace("com.meizhi");   
  2.   
  3. com.meizhi.Person = Ext.emptyFn;   
  4.   
  5. Ext.apply(com.meizhi.Person.prototype,{   
  6.     name:"<SPAN style="BACKGROUND-COLOR: #ffff00"><SPAN style="BACKGROUND-COLOR: #ffffff">meizhi</SPAN>   
  7.   
  8. </SPAN>   
  9.   
  10. ",   
  11.     sex:"男"  
  12. });  
Ext.namespace("com.meizhi");

com.meizhi.Person = Ext.emptyFn;

Ext.apply(com.meizhi.Person.prototype,{
	name:"meizhi



",
	sex:"男"
});

 

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

 

来看一下调用：

Html代码 复制代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>NameSpace</title>  
  6. <link type="text/css" rel="stylesheet" href="ext/resources/css/ext-all.css">  
  7. <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>  
  8. <script type="text/javascript" src="ext/ext-all.js"></script>  
  9.   
  10. <script type="text/javascript" src="js/helloworld.js"></script>  
  11. <script type="text/javascript">  
  12.     var _person = new com.meizhi.Person();   
  13.     alert(_person.name);   
  14.     _person.name = "陈治文";   
  15.     alert(_person.name);   
  16. </script>  
  17. </head>  
  18. <body>  
  19.   
  20. </body>  
  21. </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代码 复制代码  收藏代码
  1. Ext.namespace("com.meizhi");   
  2.   
  3. com.meizhi.Person = Ext.emptyFn;   
  4.   
  5. Ext.apply(com.meizhi.Person.prototype,{   
  6.         name:"",   
  7.         sex:"",   
  8.         print:function(){   
  9.             alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));   
  10.         }   
  11.     });  
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代码 复制代码  收藏代码
  1. <script type="text/javascript">   
  2.     var person = new com.meizhi.Person();   
  3.        
  4.     //设置属性   
  5.     person.name = "<SPAN style="BACKGROUND-COLOR: #ffff00"><SPAN style="BACKGROUND-COLOR: #ffffff">meizhi</SPAN>   
  6.   
  7. </SPAN>   
  8.   
  9. ";   
  10.     person.sex = "男";   
  11.        
  12.     //调用方法   
  13.     person.print();   
  14.        
  15.     //为该对象再次设置属性   
  16.     person.name = "Katrana";   
  17.     person.sex = "女";   
  18.        
  19.     person.print();   
  20. </script>  
<script type="text/javascript">
	var person = new com.meizhi.Person();
	
	//设置属性
	person.name = "meizhi



";
	person.sex = "男";
	
	//调用方法
	person.print();
	
	//为该对象再次设置属性
	person.name = "Katrana";
	person.sex = "女";
	
	person.print();
</script>

 

 

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

 

 

类静态方法

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

 

来看定义

Js代码 复制代码  收藏代码
  1. Ext.namespace("com.meizhi");   
  2.   
  3. com.meizhi.Person = Ext.emptyFn;   
  4.   
  5. //这里定义的 print方法 是 类实例方法   
  6. Ext.apply(com.meizhi.Person.prototype,{   
  7.         name:"",   
  8.         sex:"",   
  9.         print:function(){   
  10.             alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));   
  11.         }   
  12.     });   
  13.   
  14. //这里定义的 print方法 是 类静态方法   
  15. com.meizhi.Person.print = function(_name, _sex){   
  16.     var _person = new com.meizhi.Person();   
  17.     _person.name = _name;   
  18.     _person.sex = _sex;   
  19.     _person.print();   
  20. }  
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代码 复制代码  收藏代码
  1. Person.print(String name, String sex) {   
  2.     Person person = new Person();   
  3.     person.setName(name);   
  4.     person.setSex(sex);   
  5.     person.print();   
  6. }  
Person.print(String name, String sex) {
	Person person = new Person();
	person.setName(name);
	person.setSex(sex);
	person.print();
}

 

 

调用

Js代码 复制代码  收藏代码
  1. <script type="text/javascript">   
  2.     new com.meizhi.Person.print("meizhi","男");   
  3.     new com.meizhi.Person.print("katrana","女");   
  4. </script>  
<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()方法。构造对象的过程是在静态方法内部完成的，这里需要好好的体会一下。

 

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

 

 两点多了，睡觉了，明天还要上班，今天先到这儿吧。

iteye_4507
关注
专栏目录
Ext类静态方法
Donny的专栏
09-02 576
var Student = function(){} Ext.apply(Student.prototype,{ id:0, name:"", print:function(){ alert(String.format("id={0},na
你理解 PHP 中的静态方法吗?
weixin_43814458的博客
03-24 178
它仍然是一个有争议的话题。让我们尝试了解原因。 函数中的静态变量 您可能已经看过以下代码： function testStatic() { static $x = 0; $x++; return $x; } 在这里，我们每次调用testStatic()时，关键字static允许递增$x： testStatic(); testStatic(); ...
关于 Extjs 的 namespace
sandaray的专栏
11-23 393
命名空间(namespace)是Extjs组织代码的一个非常精巧的方式。通过这一方式，可以将数量庞大的js代码分类到不同的命名空间下，可以有效地解决js容易产生变量冲突的问题，让不同命名空间下的变量和对象的取名更自由而不受同名的约束。下面看看命名空间应用的例子：   Ext.namespace("App.common.util");      App.common.u
Ext学习笔记 - NameSpace，类实例属性，类实例方法，类静态方法
hexidlee的专栏
01-25 665
啊
Ext学习笔记02 - 构造方法，类继承，类实例方法重写
yujia博客
05-11 100
刚刚走了个大弯路，朋友们见笑，我这见识实在太少了，开始想找个有语法提示的IDE，就直接想到了Aptana，下载一个最新版本，然后就弹出来一大堆东西要更新，更新就更新吧，更新一半就报错，看他给的提示，说xxx本机已经装了不能再装，那个版本不新了不能装，好长的一溜，找了半天，终于把非法的插件都去掉了，安装了一半又出问题了，我倒，faint，怒了，又跑回MyEclipse安装Spket（参考：http:...
Android学习笔记--[1]硬件访问服务_基础知识
weixin_44524060的博客
09-20 107
应用程序——》硬件访问服务——》JNI——》硬件对于不同的硬件，构建不同的硬件访问服务。
EXT学习笔记-项目应用实践
03-15
这篇EXT学习笔记主要涵盖了EXTJS中面向对象编程的一些关键概念和实践，包括命名空间、类定义、构造函数、属性与方法的访问控制（私有和公有）、静态属性与方法以及继承机制。 1. **命名空间**：在EXTJS中，命名空间...
傻瓜式Nacos学习笔记----黑马程序员视频配套笔记
萌新Java工程师
04-28 1368
Nacos 什么是配置中心 什么是配置 应用程序在启动和运行的时候往往需要读取一些配置信息,配置基本上伴随着应用程序的整个生命周期,比如:数据库连接参数、启动参数等。 特点 配置是独立于程序的只读变量 配置对于程序是只读的,程序通过读取配置来改变自己的行为,但是程序不应该去改变配置 配置伴随应用的整个生命周期 配置贯穿于应用的整个生命周期,应用在启动时通过读取配置来初始化,在运行时根据配置调整行为。比如:启动时需要读取服务的端口号、系统在运行过程中需要读取定时策略执行定时任务等。 配置可以有多
Mybatis的学习笔记
m0_51452574的博客
04-04 312
MyBatis Mybatis是一款非常优秀的持久层框架，学习的目的是要掌握精通。 那么今天我们就来学习一下这个优秀的框架知识！ 此外，由于博主的水平的原因，文章的质量可能不会太高，请酌情观看。如果大家对这篇博客里的某些地方有更好的建议，或者是发现一些问题，亦或是有更好的方案，欢迎评论区里留言。 == 传送门== JDBC ： https://blog.csdn.net/m0_51452574/article/details/115393424 mysql ：https://blog.csdn
5253-微信小程序基于springboot汽车维修管理系统微信小程序springboot（源码+数据库+lun文）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
基于Matlab界面GUI设计的身份证号码识别源码[Matlab界面GUI设计].zip
09-15
基于
1.开源数据库MySQL DBA运维实战 第1章 部署.学习笔记整理分享给需要的同学
最新发布
09-15
1.开源数据库MySQL DBA运维实战 第1章 部署.学习笔记整理分享给需要的同学
java写s7和plc通讯
09-15
java写s7和plc通讯
EXT学习实例：入门教程与MessageBox功能详解
EXT学习实例是一系列针对初学者设计的文章，专注于帮助新手快速掌握基于ExtJs 2.0的技术。Ext Js是一个强大的JavaScript库，专用于构建富客户端应用程序，特别是用于开发高效且界面友好的Web应用。本文档主要关注四...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值