通过对本系列文章的前六个部分的学习，你已经对 Dojo 的强大功能有所了解了。但有时候 Dojo 的一些功能并不能完全满足实际的要求，这时就需要对 Dojo 进行扩展了，比如可以对 Widget 进行扩展，使它以更加符合项目的要求展现或响应行为。本文将详细介绍 Dojo 的面向对象特性，以及如何在这个特性上开发新的 Dojo 模块，创建新的 Dijit，定义自己个性化的 Widget。

Dojo 类定义

JavaScript 基于原型的继承@H_403_2@@H_403_2@

JavaScript 是一门基于对象的语言，对象可以继承自其它对象，但是 JavaScript 采用的是一种基于原型的 (prototype based) 的继承机制，与开发人员熟知的基于类的 (class based) 继承有很大的差别。在 JavaScript 中，每个函数对象（实际上就是 JavaScript 中 function 定义代码）都有一个属性 prototype，这个属性指向的对象就是这个函数对象的原型对象，这个原型对象也有 prototype 属性，默认指向一个根原型对象。如果以某个特定的对象为原型对象，而这个对象的原型对象又是另一个对象，如此反复将形成一条原型链，原型链的末端是根原型对象。JavaScript 访问一个对象的属性时，首先检查这个对象是否有同名的属性，如果没有则顺着这条继承链往上找，直到在某一个原型对象中找到，而如果到达根原型对象都没有找到则表示对象不具备此属性。这样低层对象仿佛继承了高层对象的某些属性。下面通过一个例子说明基于原型的继承是如何工作的。

清单 1. 基于原型的继承@H_403_2@

 function Plane(w,s) { 
	 this.weight = w; 
	 this.speed = s; 
 } 
 Plane.prototype.name = ""; 
 function JetPlane() { 
	 this.seats = 0; 
	 this.construct = function(name,weight,speed,seats) { 
		 this.name = name; 
		 this.seats = seats; 
		 this.weight = weight; 
		 this.speed = speed; 
	 } 
 } 
 JetPlane.prototype.erased = true; 
 JetPlane.prototype = new Plane(); 
 var p1 = new Plane(2000,100); 
 p1.name = "Boeing"; 
 var j1 = new JetPlane(500,300); 
 j1.construct("F-22",500,2); 
 console.log("p1.weight:" + p1.weight + ",p1.speed:" +  p1.speed + ",p1.name:" + 
 p1.name); 
 console.log("j1.name:"+ j1.name + ",j1.weight:"+ j1.weight + ",j1.speed:"+ j1.speed + ",j1.seats:"+ j1.seats);

在这个例子中声明了两个函数对象 Plane 和 JetPlane，Plane 对象的属性有在构造函数中定义的 weight,speed，也有在 Plane 的 prototype 对象中定义的 name。这些属性在使用的时候没有区别，都可以通过【对象．属性】访问。JetPlane 中定义了两个属性 seats 和 construct，construct 的值是一个函数。JetPlane 的 prototype 对象增加了一个属性 erased，然后把 JetPlane 的 prototype 设为一个 Plane 对象，这样 JetPlane 就拥有了 Plane 的 prototype 对象（注意不是 Plane 对象）中所有的属性。随后的代码是使用 Plane 和 JetPlane 构造函数生成了一些对象，并输出对象的属性值。例子中的对象之间的关系如图 1 所示。

图 1. 对象图

绿颜色框表示的函数对象；蓝颜色框代表的是原型对象，每个函数对象都有一个原型对象，如 Plane 有 PlanPrototype，而 JetPlane 有 JetPlanePrototype。黄颜色框表示的普通对象。每个对象都有一个 Prototype 属性，指向一个原型对象。从图中可以看到各个对象的内部属性是如何分布的，Plane 对象中只有在自己的构造函数中定义的属性 weight，spead，name 存在于 Plane 的原型对象 PlanePrototype 中；p1 拷贝了 Plane 中的属性，而不会拷贝 PlanePrototype 中的属性。访 p1 的 name 属性时，JavaScript 解释器发现 p1 没有 name 属性，它会顺着 prototype 属性所指往上找，然后在 PlanePrototype 中发现了 name，所以实际上访问的是这里的 name。同理 j1 仅拷贝 JetPlane 中的 seats 和 construct，而 j1 的 prototype 有点特别；在语句 JetPlane.prototype = new Plane(); 执行之前，JetPlane 的 prototype 属性是指向 JetPlanePrototype 的，而当此语句执行之后，JetPlane 的 prototype 就被设为一个匿名的 Plane 对象，原来到 JetPlanePrototype 的链条被“剪断”了。访问 j1 的 weight 和 speed 时，实际上访问的是匿名 Plane 对象 [plane] 中的 weight 和 speed。简单的说，JavaScript 会在原型链上查找需要访问的属性，这就是 JavaScript 基于原型的继承的工作原理。

Dojo.declare: Dojo 中定义类的利器@H_403_2@@H_403_2@

使用 Prototype based 的继承有几个缺点：

1. prototype 只能设为某一个对象，而不能设为多个对象，所以不支持多重继承。
2. prototype 中的属性为多个子对象共享，如果某个子对象修改了 prototype 中的某一属性值，则其他的子对象都会受影响，所谓牵一发而动全身。
3. prototype 的设置只能发生在两个对象都构造完之后，这会造成在子对象的构造函数中无法修改父对象的属性，而在 class based 的继承中，子类对象在自己的构造函数中可以调用父对象的构造函数。所以在清单 1 中又定义了一个 construct 方法来完成属性的初始化，

为了解决上述问题，Dojo 对 JavaScript 已有的 prototype based 的继承机制进行了包装，使其更容易理解，使用。在 Dojo 中可以使用 Dojo.declare 函数来定义普通类，单继承的类，甚至是多重继承的类（虽然笔者认为 dojo.declare 定义的只是对象，在 Dojo 的官方文档中把 Dojo.declare 定义为声明为类的函数，所以这里也采用这一定义），一切都在 Dojo.declare 中。同样我们通过一个例子来说 dojo.declare 是如何工作的。

清单 2 dojo.declare@H_403_2@

 dojo.declare("Plane",null,{ 
		 name:"",constructor:function(n,w,s) { 
				 this.name = n; 
				 this.weight = w; 
				 this.speed = s; 
			 } 
	 }); 
	
 dojo.declare("JetPlane",Plane,{ 
	
		 constructor:function(name,seats) { 
				 this.seats = seats; 
			 } 
	 }) ; 
 dojo.declare("Helicopter",{ 
		 propellers : 0,constructor : function (name,placeholder,propellers ) { 
				 this.propellers = propellers; 
			 } 
	 }); 
 dojo.declare("Jetocopter",[JetPlane,Helicopter],{ 
		 constructor : function(name,seats,propellers) { 
				 this.lifelong = 10; 
			 } 
	 }); 
 var p1 = new Plane("Boeing",2000,100); 
 var j1 = new JetPlane("F-22",2); 
 var h1 = new Helicopter("Apache",200,3); 
 var jh1 = new Jetocopter("X2",400,3,4); 
 //output every property value pair of obj 
 function output(obj) { 
		 var message = ""; 
		 for (var p in obj){ 
			 if (p[0] != '_' && p!="inherited" && p!="constructor"
				 &&p!="preamble" && p != "declaredClass") 
				 message += p + ":" + obj[p] + ","; 
			 } 
			 console.log(message); 
	 } 
 output(p1);output(j1);output(h1);output(jh1); 
 console.log("jh1 is instance of JetPlane: " + (jh1 instanceof JetPlane)); 
 console.log("jh1 is instance of Helicopter: " + (jh1 instanceof Helicopter));

这个例子与清单 1 中例子相似，但是使用了 dojo.declare 来定义类。JetPlane 和 Helicopter 继承自 Plane，而 Jetocopter 继承自 JetPlane 和 Helicopter。从这四个类的定义代码不难看出 dojo.declare 函数的一共有三个参数：

className：自定义类的类名

superClass：父类，可以为空，某一个类（单一继承），或者是一个对象数组（多重继承）。

hash props：类定义代码，比如类有那些属性，方法等。其中名为 constructor 的属性比较特殊，它是类的构造函数，每次创建一个新的对象时，它都会被调用。

这段代码的输出如下：

name:Boeing,weight:2000,speed:100,

name:F-22,weight:500,speed:500,seats:2,34); line-height:1.5em; font-size:1.166em!important"> name:Apache,weight:200,speed:200,propellers:3,34); line-height:1.5em; font-size:1.166em!important"> name:X2,speed:400,seats:3,propellers:4@H_403_2@,lifelong:10,34); line-height:1.5em; font-size:1.166em!important"> jh1 is instance of JetPlane:true@H_403_2@

jh1 is instance of Helicopter:false@H_403_2@

使用 Dojo.declare 可以非常简单高效的定义各种想要的类，再也不用为没有地方初始化父类属性而发愁，类定义代码具有很好的可读性，类之间的继承关系一望便知，而且继承关系在声明时就可以确定的，而不是等到类构造完之后再去指定。究竟 Dojo.declare 是如何实现的，使得能有这么多优点？

Dojo.declare 完成的工作是根据它的参数情况构造出一个构造函数对象，并把这个对象作为 JavaScript Global 对象的一个属性，这样就可以在 JavaScript 代码中调用这个对象。以清单 2 中的 Plane 定义为例，它和清单 1 中 Plane 的定义代码是等价的；这种情况下，dojo.declare 做的就是根据第三个参数 hash props 构造出一个临时构造函数，它的内容和清单 1 中的 Plane 一样。过程大致为首先把 hash props 中的 constructor 函数定义的属性拷贝到临时构造函数中，然后把 hash props 中的其他属性拷贝到临时构造函数的原型对象中去，最后在 Global 对象中增加一个属性 className，值为这个临时构造函数。如果是单一继承或者多重继承，过程稍微复杂一点，因为要维护继承关系。在后续文章中会有更详细的介绍。

Dojo.declare 模拟了 class based 继承机制中大部分特性，但是仍然有些地方还不够完善，比如清单 2 中最后两行代码是测试 jh1 的类型，按照 class based 继承，jh1 应该即是 JetPlane 类型，又是 Helicopter 类型，但是测试结果中 jh1 只是 JetPlane 型，而不是 Helicopter 型。因为在多重继承时，虽然在 dojo.declare 的第二个参数可以指定多个父类，但是只有第一个父类是真正的父类，其他的都不是，所以 jh1 只是 JetPlane 型。

此外使用 Dojo.declare 时需要注意第三个参数中的 constructor 函数的参数顺序，这关系到父类对象的属性是否能被正确初始化。在清单 2 的代码中，JetoHelicopter 并没有显式调用 JetPlane 或 Helicopter 的 constructor 函数，但是父类的属性依然能被正确的初始化。这是因为 dojo.declare 在调用 JetoHelicopter 的 constructor 函数时会先调用 JetPlane 和 Helicopter 的 constructor 函数，并把所有的参数传递给他们，而被调用的函数是按顺序接收所有传进来的参数，多余的参数会被忽略掉。所以 Helicopter 的 constructor 函数的参数中，有一个 placeholder，这个 placeholder 参数仅仅是为了占个位置，以使得来自 JetoHelicopter 的第 5 个参数 propeller 能正确的传递给 Helicopter 的 constructor 的第 5 个参数。

Dojo.declare 这些“瑕疵”是由 JavaScript 语言的特性造成的，dojo.declare 提供的功能已经很强大，开发人员大可不必纠缠于这些细节，重要的是使用 dojo 开发出漂亮的应用。

回页首

Dojo 的模块化

在本系列文章的第一部分就提到，Dojo 是基于“包”结构进行组织的，就像面向对象语言一样。严格意义上来讲，这个“包”并非 java 中 package，Dojo 的官方文档中称之为模块 (Module)，但在使用中，却与 java 或 C# 很像，这样做的好处之一是使得熟悉面向对象的编程人员能够很快熟悉 Dojo；另外，模块化把 Dojo 的代码按照功能划分为不同的逻辑单元；最后也是最大的好处是，Dojo 引擎可以实现按需载入，也就是说，Dojo 并不会一开始就把所有的功能都载入到客户端的浏览器上，它只会把用到的模块发送给客户端。

通常情况一下，Dojo 的模块结构与 Dojo 的目录结构是一样的，如图一所示，最上面的有三个目录是 dijit,dojo 和 dojox，目前 Dojo 中所有的模块的前缀都是这三者之中一个。在 Dojo 中，模块与子模块之间用 “.”进行分隔，对应到目录中，就是目录与子目录。

图 2. Dojo 目录结构

在代码中使用某一模块前，要先显式地用 dojo.require 导入该模块，用法与 java 中的 import 非常类似，如清单 3 所示。

清单 3. dojo.require

 dojo.require("dijit.form.Button");

Dojo 引擎一碰到 require 函数，但会把相应的 js 文件载入，上例中所对应的 js 文件是 <DOJO HOME>/dijit/form/Button.js。如果所引入的包还依赖于其它包，dojo.require 也会把所依赖的包载入。如果所要求的包已经载入，dojo.require 不会重复载入，它保证所有了包只会被载入一次。

 // 注册模块名
 dojo.provide("util.math.Calculator"); 

 // 声明 Dojo 类
 dojo.declare("util.math.Calculator",{ 
    add:function(a,b){ 
    	   return a+b; 
    },multiply:function(a,b){ 
    	 return a*b; 
    } 
 });

 dojo.require("util.math.Calculator"); 
		
 var c=new util.math.Calculator(); 
 alert(c.add(1,2)); 
 alert(c.multiply(3,2));

 util.math.Calculator.subtract=function(a,b){ 
	 return a-b; 
 }; 

 dojo.declare("util.math.Calculator2",{ 
    subtract:function(a,b){ 
    	 return a-b; 
    } 
 }); 

 dojo.declare("a.b",{ 
    hello:function(){ 
    	 alert("Hello"); 
    } 
 });

 dojo.require("util.math.Calculator"); 
		
 alert((new util.math.Calculator()).add(1,2)); 
 alert((new util.math.Calculator2()).subtract(10,5)); 
 alert(util.math.Calculator.subtract(10,5)); 
 (new a.b()).hello();

 <div class="memo"> 
  <div class="title">${title}</div> 
  <div class="close" dojoAttachEvent="onclick:_onClose">X</div> 
  <div class="contents" dojoAttachPoint="containerNode"></div> 
 </div>

.memo { background: yellow;font-family: cursive;width: 10em;position:absolute;
         top:5px;right:5px;z-index:100;} 
.title { font-weight: bold;text-decoration: underline;float: left;} 
.close { float: right;background: black;color: yellow;font-size: x-small;
           cursor: pointer;}.contents { clear: both;font-style: italic;} 
.close_focus { float: right;background: red;color: yellow;
     font-size: x-small;cursor: pointer;}

 dojo.provide("ibm.dijit.Reminder"); 
 dojo.require("dijit._Templated"); 
 dojo.require("dijit._Widget"); 
 dojo.declare( 
	"ibm.dijit.Reminder",[dijit._Widget,dijit._Templated],{ 
		 title:"Reminder",templatePath: dojo.moduleUrl("ibm.dijit","templates/Reminder.html"),_onClose: function(){this.destroy();} 
 });

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 <head> 
 <title>Dojo toolkit</title> 
 <style type="text/css"> 
    @import "dojo/resources/dojo.css"; 
    @import "dijit/themes/tundra/tundra.css"; 
	  @import "ibm/dijit/templates/Reminder.css"; 
    #mainDiv { 
		 width: 100%; height: 500px; 
		 border: 0; padding: 0; margin: 0; 
	 } 
 </style>     
 <script type="text/javascript" src="dojo/dojo.js" djConfig="parSEOnLoad: true,isDebug: false"></script> 
 <script language="JavaScript" type="text/javascript"> 
	 dojo.require("ibm.dijit.Reminder"); 
 </script> 
 </head> 

 <body class="tundra"> 
 <div dojoType="ibm.dijit.Reminder" title="IBM Reminder"> 
	 Pick up milk on the way home. 
 </div> 
 </body> 
 </html>

 <div class="memo"> 
  <div class="title">${title}</div> 
  <div class="close" dojoAttachPoint="focusNode" dojoAttachEvent="onclick:_onClose,onmouSEOver:_onMouSEOver,onmouSEOut:_onMouSEOut">X</div> 
  <div class="contents" dojoAttachPoint="containerNode"></div> 
 </div>

SEOver: function(){ 
		 // 鼠标移过时，把关闭节点的 class 设为 close_focus,close_focus 设的 backgroud 是红芭
			  dojo.removeClass(this.focusNode,"close"); 
			  dojo.addClass(this.focusNode,"close_focus"); 
			 },_onMouSEOut: function(){ 
                             // 鼠标移出时恢复原状
			  dojo.removeClass(this.focusNode,"close_focus"); 
			  dojo.addClass(this.focusNode,"close"); 
			 } 
 });

 <head> 
 <title>Introduction to Dojo toolkit</title> 
 <style type="text/css"> 
    @import "dojo/resources/dojo.css"; 
    @import "dijit/themes/tundra/tundra.css"; 
	  @import "ibm/dijit/templates/Reminder.css"; 
    #mainDiv { 
		 width: 100%; height: 500px; 
		 border: 0; padding: 0; margin: 0; 
	 } 
 </style>     
 <script type="text/javascript" src="dojo/dojo.js" djConfig="parSEOnLoad: true,isDebug: false"></script> 
 <script language="JavaScript" type="text/javascript"> 
	 dojo.require("dijit.Declaration"); 
 </script> 
 </head> 

 <body class="tundra"> 
 <div dojoType="dijit.Declaration"
       widgetClass="ibm.dijit.Reminder"
       mixins="dijit._Widget,dijit._Templated"
 ><div class="memo"> 
  <div class="title">${title}</div> 
  <div class="close" dojoAttachPoint="focusNode"> 	
  X 
  </div> 
  <div class="contents" dojoAttachPoint="containerNode"></div> 
  </div> 	
 </div> 


 <div dojoType="ibm.dijit.Reminder" title="IBM Reminder"> 
	 Pick up milk on the way home. 
 </div> 
 </body> 
 </html>

• 上一篇：掌握 Dojo 工具包，第 6 部分: Doj下一篇：掌握 Dojo 工具包，第 8 部分: 明日