扩展 Dojo 模块

最新推荐文章于 2019-02-26 09:29:00 发布

qingqingzijinxin

最新推荐文章于 2019-02-26 09:29:00 发布

阅读量302

点赞数

分类专栏： dojo学习文章标签： dojo

dojo学习专栏收录该内容

29 篇文章 1 订阅

订阅专栏

扩展 Dojo 模块

在 Dojo 中，定义一个新的模块是很容易的。我们来看一个简单的例子，假设我们要创建的新模块是 util.math.Calculator。先在 Dojo 安装目录下创建目录 util/math

在目录 util/math 下，创建一个叫 Calculator.js 的文件，在该文件中写入清单 4 所示的代码。

清单 4. Calculator.js

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

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

现在你就可以开始使用这个新的模块了，代码如清单 5 所示。

清单 5. 使用新模块

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

<!doctype html>
<html lang="en" dir="ltr">
	<head>
	    <title>Dijit</title>
		<link rel="stylesheet" href="dijit/themes/claro/claro.css" />
		<style type="text/css">
			body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
		</style>
				<script src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
		<script>
			dojo.require("dojo.parser");
			dojo.require("util.math.Calculator"); 
			dojo.addOnLoad(function() {  
				 var c=new util.math.Calculator(); 
				 alert(c.add(1,2)); 
				 alert(c.multiply(3,2));
			});  
			
		</script>	
	</head>
	<body class="claro">


	</body>
</html>

在清单 4 中，出现了 dojo.provide 和 dojo.declare 函数。dojo.provide 的功能是向 dojo 模块注册表中注册一个新的模块，dojo.declare 则是用来声明模块中的类。通过这个例子可以看出，在 Dojo 中创建一个新的模块是非常简单的。现在让我们来对清单 4 中的代码作些扩展，在 Calculator.js 中加入清单 6 中的代码。

清单 6. 扩展 Calculator

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

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

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

新的测试代码如清单 7 所示：

清单 7. 测试代码

 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();

<!doctype html>
<html lang="en" dir="ltr">
	<head>
	    <title>Dijit</title>
		<link rel="stylesheet" href="dijit/themes/claro/claro.css" />
		<style type="text/css">
			body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
		</style>
				<script src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
		<script>
			dojo.require("dojo.parser");
			dojo.require("util.math.Calculator"); 
			dojo.addOnLoad(function() {  
				  alert((new util.math.Calculator()).add(1,2)); 
				 alert((new util.math.Calculator2()).subtract(10,1)); 
				 alert(util.math.Calculator.subtract(10,5)); 
				 (new a.b()).hello();
			});  
			
		</script>	
	</head>
	<body class="claro">


	</body>
</html>

通过这个小修改，我们可以发现很多有趣的现象。第一，在一个模块中，不但可以定义 Dojo 类，还可以定义一个普通的函数，如本例中的 util.math.Calculator.subtract，这与 java 中的包是不一样的，java 的包中只能定义类；第二，在一个模块中，可以定义多个 Dojo 类，如本例中的 util.math.Calculator2 与 a.b，这与 java 的包类似；第三，模块的名字与 Dojo 中类的命名实际上没有必然的联系，两者在语法上并没有一致性的要求，但从代码的可维护性来考虑，建议保持模块名字与实际的类名一致。

Calculator.js

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

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

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

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