Dojo学习笔记（1）----什么是Dojo，如何安装使用

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>

var djConfig = {

isDebug: true,

parseOnLoad: true,

bindEncoding: "UTF-8"

};

</script>

</script>

// 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>

<h1 id="testHeading">Dojo Skeleton Page</h1>

<p>

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方式，如上例中

var djConfig = {

isDebug:true,

parseOnLoad:true,

bindEncoding:"UTF-8"

};

</script>

（2）加载时定义方式，代码如下

3-1-2 djConfig的参数

一个完整的djConfig对象定义如下（值均为dojo的默认值）

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后，放到工作路径中指定方式。

另一种为使用URL指定方式，可以直接指定AOL链接

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函数。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。