Dojo笔记01 - 类的声明，构造，继承

 

先叨叨两句

 

在之前的项目中使用到了Dojo框架，最主要用到了Dojo提供的两个Widget，日期控件和下拉菜单。

 

使用DateTextBox和TimeTextBox创建了很多种形式不同的日期控件，用FilteringSelect控件实现下拉菜单做了很多的工作，对FilteringSelect又做了一层的封装，本来FilteringSelect的功能已经很强大了，动态下拉菜单内容，下拉菜单支持翻页，类似google的输入提示，而且如果输入的值不存在在下拉菜单中，它还会给出智能的提示，变态的是这么强大的控件居然都没有满足需求，还要更加智能，不得已做了另一层的封装。后来又对这些控件做了一大堆的国际化工作，还有页面中生成控件数量比较多的时候，影响了访问的速度，还对Widget初始化操作做了一番研究，在这一过程中遇到了很多的问题，也学到了很多的知识，但是由于时间紧，对Dojo还存有太多的疑问。

 

现在终于有时间，想把Dojo的知识梳理一下，做项目的时候有点儿急功近利，对Dojo很多地方都不是很理解，只是用到了其中的一小部分，在接下来的时间准备系统的学习Dojo。

 

不得不提的是http://dojochina.com，里面有一些不错的学习资料，不过这个网站多少有些让人失望，以Dojo命名，现在确主打ExtJs，而且广告有点儿多，还有卖书卖视频，Dojo相关的技术还是老早以前的那些东西，好久没有更新过内容。

 

同时还有一个网站不得不说就是http://www.ibm.com/developerworks，IBM力推Dojo，自己的项目中也大量的选择Dojo，所以有很多的开发者对Dojo有深入的研究，里面有很多不错的文章，有些很值得借鉴，中文网站http://www.ibm.com/developerworks/cn/web/，直接搜索“Dojo”关键字即可。

 

 

准备工作 - 下载工具包和文档，开发工具

 

Dojo的最新版本已经是1.3.2，而且还在不断的发展壮大，开发很活跃。

 

工具包下载：http://dojotoolkit.org/downloads

 

下载页面分三部分

1. base部分压缩包 -- 基础部分，不包含widget高级应用的简便包
2. 开发工具包 Dojo+Dijit+DojoX -- 开发用的工具包，就下载它到本地
3. ShrinkSafe -- JavaScript压缩引擎，现在还用不到这一高级功能，用到的时候再说

值得庆幸的是API文档似乎有日趋完善的迹象，虽然API中只有类和属性，方法，没有多少介绍，更没有示例，但是比以前也是有了很大的进步了（当然直接看它的源代码最直接，而且demo中的例子也是很全的）。

 

Dojo的在线文档：http://api.dojotoolkit.org/

 

最近Dojo 的API文档出了绚丽的AIR版，有兴趣的朋友也可以下来看一下 

 

 

下载：http://download.dojotoolkit.org/toolbox/DojoToolbox.air

 

 

开发工具多种多样，Dreamweare，MyEclipse，Aptana都可以，刚开始的时候不涉及服务器后台交互，准备选择Aptana，因为它已经对内置Dojo插件的支持，使用起来应该相对方便一些。

 

下载Aptana，最新的版本是1.5.1，下载地址：http://www.aptana.com/studio/download

 

Aptana目前是支持Dojo1.2版本插件，这个版本学习起来已经够用，准备就此做起（不安装这个插件也是完全可以，开发没有任何问题，只是没有相关的语法提示而已）

 

插件的安装http://www.aptana.com/blog/lorihc/dojo1.2_in_aptana_studio

 

磨刀不误砍柴功，现在开动。

 

 

类的声明 

Dojo中类的声明通过 dojo.declare 方法实现。简单例子

 

dojo.declare('com.meizhi.Person', null, {
	name:'meizhi',
	print:function() {
		return "姓名:"+this.name;
	}
});

 

这样类声明的方式看起来ExtJs好像啊，看同样的声明用ExtJs是怎样实现的：

Ext.namespace("com.meizhi");   
  
com.meizhi.Person = Ext.emptyFn;   
  
Ext.apply(com.meizhi.Person.prototype,{   
        name:"meizhi",   
        print:function(){   
            alert("姓名:"+this.name);
        }   
    });  

 

看，基本上就是一样的，区别在Ext对NameSpace有明确的定义，而Dojo支持了NameSpace，但是没有明确的去定义它，代码更简单，而Ext的声明方式结构上看起来更加清晰，二者没有谁好谁坏，仁者见仁智者见智吧。

 

来看一下 Dojo 类声明中的参数：

1. 第一个参数'com.meizhi.Person'，是声明的类名
2. 第二个参数“null”， 是指明类的父类，如果有父类就给出类名（全名哦，包括命名空间），没有父类就是null了
3. 第三个参数是定义了类的一系列属性，写法很灵活，没有固定的参数个数限制，可以是属性，也可以是方法

 

类的继承

 和类的声明相似，只要在声明的方法中用第二个参数指明父类即可

dojo.declare('com.meizhi.man', com.meizhi.Person, {
	name:'meizhi',
	sex:'男',
	print:function() {
		return "姓名:"+this.name +", 性别:" + this.sex;
	}
});

 

com.meizhi.man 继承自 com.meizhi.Person，man 覆盖了Person中的成员方法，并添加了自己的成员属性。

 

注意：第二个参数是没有引号的哦。

 

 

类的多继承

Dojo的多继承不是真正意义上的多继承，它使用JavaScript模拟了多继承效果，具体的细节以后使用到再详细讨论，先看一下写法：

dojo.declare('com.meizhi.man', [com.meizhi.Person, com.meizhi.base], {
	name:'meizhi',
	sex:'男',
	print:function() {
		return "姓名:"+this.name +", 性别:" + this.sex;
	}
});

 

这样com.meizhi.man类就继承自com.meizhi.Person和com.meizhi.base，同时具有了他们的属性和方法。

 

 

调用父类方法

来看例子

dojo.declare('com.meizhi.man', com.meizhi.Person, {
	name:'meizhi',
	sex:'男',
	print:function() {
		return this.inherited('print', arguments) +", 性别:" + this.sex;
	}
});

 this.inherited('print', arguments) ，是Dojo对调用父类方法的一层封装，其中有两个参数，第一个调用父类中的方法名，第二个参数arguments是print方法中的参数。

 

简单介绍一下arguments，当进行函数调用时，除了指定的参数外，还创建一个隐含的对象——arguments。arguments是一个类似数组但不是数组的对象，说它类似是因为它具有数组一样的访问性质，可以用arguments[index]这样的语法取值，拥有数组长度属性length。因此，在定义函数的时候，即使不指定参数列表，仍然可以通过arguments 引用到所获得的参数，这给编程带来了很大的灵活性。

  

 

类的构造方法

类的构造函数使用 initializer 属性进行声明

dojo.declare('com.meizhi.Person', null, {
	initializer: function(arg) {
		this.name = 'person's name initialized';
	},
	name:'meizhi',
	print:function() {
		return "姓名:"+this.name;
	}
});

 

继承情况下，子类对象实例会首先调用父类的构造函数，然后再调用子类的构造函数。如

dojo.declare('com.meizhi.man', com.meizhi.Person, {
	initializer: function(arg) {
		this.name = 'man's name initialized';
	},
	....
});

 

声明静态成员

静态成员是在该类的所有对象实例中共享的成员，通过 dojo.declare 声明的成员都是类的实例成员，每一个对象的实例成员都是独立的，而不能是所有对象实例共享。

 

这个概念和Ext中类静态方法的概念相同。

 

举例

dojo.declare('com.meizhi.Person', null, {
	initializer: function(arg) {
		this.name = 'person's name initialized';
	},
	name:'meizhi',
	print:function() {
		return "姓名:"+this.name;
	},
	statics: {
		staticInt: 0,
		staticString: "test",
		staticFunc: function() {
			...
		}
	}
});