Dojo 1.1.1
1-什么是Dojo？
Dojo（日文解释：道场），Dojo是一个非常强大的面向对象的JavaScript工具箱，开发人员可以很方便的根据OO方式进行开发编码，它可以很方便的在短时间内构建重量级的JS应用，提供了强大的交互功能与界面编辑处理功能，可很方便的处理Ajax请求与漂亮的交互界面，满足Web2.0的要求。
2-Dojo如何安装与使用？
2-1下载下安装
Dojo可以从http://dojotoolkit.org/主站中下载到，将解压后的代码放到项目中相应目录即可。
2-2 Dojo的使用需要按照以下顺序进行使用。为了保证Html被载入后，保证Dojo中的如视图对应“widget”到网页中的对象，因此需要遵循以下顺序进行使用。
2-2-1 Dojo编码调用顺序
（1）设定djConfig变量；
（2）加载dojo.js文件；
（3）执行dojo.require加载相应Dojo功能；
（4）定义初始化函数init；
（5）使用Dojo的addOnload调用初始化函数。Dojo.addOnload(init)。
2-2-2 一个简单的Dojo应用程序（目录存放方式见上图）
[index.html]
<html>
<head>
<title>Dojo Toolkit Test Page</title>
<meta content="text/html; charset=UTF-8">
<!-- 1--配置dojo启动属性-->
<script type="text/javascript">
var djConfig = {
isDebug: true,
parseOnLoad: true,
bindEncoding: "UTF-8"
};
</script>
<!-- 2--加载dojo基本对象-->
<script type="text/javascript" src="js/dojo/dojo/dojo.js">
</script>
<script type="text/javascript">
// 3--加载相应工具包
dojo.require("dijit.form.Button");
dojo.require("dijit.TitlePane");
// 4--定义初始化函数
var init = function(){
var node = dojo.byId("testHeading");
dojo.connect(node, "onclick", function(){
dojo.byId("testHeading").innerHTML = "Hello,DojoWorld!";
});
var helloButton = dojo.byId("helloButton");
dojo.connect(helloButton, "onclick", "helloPress");
console.log("Require is done!");
}
function helloPress(){
console.log("Hello,Dojo World!");
}
// 5--使用dojo.addOnLoad调用初始化函数
dojo.addOnLoad(init);
</script>
</head>
<body>
<!-- this is a Typical WebPage starting point ... --><h1 id="testHeading">Dojo Skeleton Page</h1>
<div id="contentNode">
<p>
<button dojotype="dijit.form.Button" id="helloButton">
hello,Button
</button>
</p>
</div>
</body>
</html>
|
3-参照实例说明dojo使用
3-1 djConfig的设定
3-1-1 djConfig定义方式
在dojo中加载dojo.js前需要对dojo相关环境进行配置，在dojo中有两种定义方式，一种是定义djConfig方式，另一种是在加载dojo.js时加入djConfig属性方式。
（1）定义djConfig方式，如上例中
<!-- 1--配置dojo启动属性-->
<script type="text/javascript">
var djConfig = {
isDebug:true,
parseOnLoad:true,
bindEncoding:"UTF-8"
};
</script>
|
（2）加载时定义方式，代码如下
<!-- 2--加载dojo基本对象-->
<script type="text/javascript" src="js/dojo/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug:true"></script>
|
3-1-2 djConfig的参数
一个完整的djConfig对象定义如下（值均为dojo的默认值）
<script type="text/javascript">
var djConfig = {
isDebug: false,
debugContainerId: "",
bindEncoding: "",
allowQueryConfig: false,
baseScriptUri: "",
parseWidgets: true,
searchIds: [],
baseRelativePath: "",
libraryScriptUri: "",
iePreventClobber: false,
ieClobberMinimal: true,
preventBackButtonFix: true,
parseOnLoad: false
};
</script>
|
（1）isDebug：打开dojo的debug窗体；
（2）debugContainerId：默认为空，即让dojo直接使用document.write输出，这样可能会破坏页面的布局，可以指定一个html的元素ID作为输出；
（3）bindEncoding：设置默认的bind请求的编码方式（AJAX传递等）
（4）allowQueryConfig：个属性指明 dojo是否允许从页面url的参数中读取djConfig中的相关属性，当值为true时，dojo会优先从url参数中读取djConfig的其他属性，
比如：http://server/dojoDemo.htm?djConfig.debugContainerId=divDebug
（5）baseScriptUri：使用URI方式定义dojo的工作路径一般不需要设置，dojo会自动根据你引用dojo.js的路径设置这个值，比如，<script type="text/javascript" src="../dojo/dojo.js"></script>，自动获取的值便是 ../dojo/
如果你有多个工程需要同时引用dojo.js的话，建议也把dojo当作一个独立的工程，引用的时候采用绝对路径就可以了
（6）parseWidgets：这个是可以控制dojo是否自动解析具有dojoType的html元素为对应的widget，如果你没有使用任何Widget，建议设置为false以加快dojo的加载速度。
（7）searchIds：这是一个字符串数组，定义了所有需要解析为widget的html元素的ID，如果ID不在其中的html元素是不会被解析的，当数组为空数组时，则所有具有dojoType的元素都会被解析。
（8）baseRelativePath：采用绝对路径方式定义dojo的路径，如："c:/dojo"
（9）libraryScriptUri：设定dojo其他工具包的路径
（10）parseOnLoad：是否可以使用dojo.addOnLoad预先加载相应dojo对象与视图，如上例中。若去掉该项，则运行后，Button的效果将为默认form按钮。
（11）iePreventClobber：未知
（12）ieClobberMinimal：未知
（13）preventBackButtonFix：未知
（14）parseOnLoad：是否使用预加载方式
3-2 dojo.js的加载
dojo.js的加载可以分两种，一种是加载dojo后，放到工作路径中指定方式。
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
|
另一种为使用URL指定方式，可以直接指定AOL链接
<script type="text/javascript" src="http://o./dojo/0.4.3/dojo.js "></script>
|
3-3 dojo.requrie的实行
像java一样根据业务的不同加载相应的dojo工具包则就需要使用dojo.require进行加载。
*dojo使用空间命名方式，对于加载时，即使用相应目录为加载。如：
加载时有两种方式：一种为完全加载，另一种为部分加载
完全加载，即，加载dojo指定包中所有工具
dojo.require("dijit.form.*");
|
部分加载，即，加载dojo指定包中指定工具
dojo.require("dijit.form.Button");
|
3-4 初始化函数定义
初始化函数定义需要使用dojo的addOnLoad进行调用，用来处理那些Dojo的界面情况对带有dojotype的元素进行预先解释，否则带有dojotype的元素将仍保持使用html标准方式。
3-5 使用addOnLoad调用初始化函数
使用dojo.addOnLoad()，指定html页面读入后调用的函数。因为对于html的load来说没有完成的话，Widget对象不能被实例化因此需要使用预定义函数进行处理。
dojo.addOnLoad(object,"functionname");
|
*当不读入时使用addOnUnload函数。
|
