dojo框架简介

最新推荐文章于 2023-02-22 10:03:52 发布

乱术

最新推荐文章于 2023-02-22 10:03:52 发布

阅读量2.6k

点赞数

分类专栏：前端技术

前端技术专栏收录该内容

2 篇文章

订阅专栏

一.dojo介绍

dojo是一个js的工具集，一个面向对象的js框架(在widget中更能体现这点),根据功能分成多个module,每个module又分为多个package,可以根据程式的需要导入不同的package,类似于JAVA。
官方网站： http://dojotoolkit.org/
操作指南： http://manual.dojotoolkit.org/WikiHome

二.dojo体系结构

三.总结、介绍

1. dojo.io.bind常用属性或方法：
{url:,load:,error:,mimetype:,method:,transport:,formNode:}
load,error可由handle代替，在handle判断状态，根据不同的状态做不同的事。
transport指定由什么对象来传输，如XMLHttp,IFrameI/O,ScriptScrIO,etc,如果不指定，默认的为XMLHttp。
   (1).XMLHttp：是默认的传输对象，由于安全性问题：不能传送文件，不能跨越另外一个域请求数据,对file://protocol形式无效。
   (2).IFrameI/O：能够传送文件，响应类型可以是text,html,js/json
   (3).ScriptScrIO：能够传送文件，能跨越另外一个域请求数据，另外提供了好些属性和方法。
   (4).另外，dojo可通过远程过程调用协议访问远程方法；可通过iframe代理，利用XMLHttp访问另外一个域。

2.widget包有趣组件：
FisheyeList，Button，Menu2，Checkbox，ComboBox，DatePicker，DropdownDatePicker，Tooltip，TitlePane，SlideShow，ContentPane， ResizeHandle，ResizableTextarea，Tree，AccordionPane，etc。
可自定义组件，也可以继承已有的组件，重载父组件的属性和方法，例如：
dojo.widget.defineWidget("my.mybutton",dojo.widget.html.Button,{}),第一个参数为自定义的组件名，第二个参数为父组件,在第三个参数{}里重载父组件的属性或方法，也可定义一些额外的属性或方法。

dojo.io.bind()封装了XMLHttpRequset的创建过程，因此不必再用try...catch语句块来做cross-browser。dojo.io.bind()以一个哈希表作为参数,包括url:value, load:value, error:value, mimetype:value。其中url为必要，其余是可选的。
load和error的value分别是一个回调函数，其中可以以type,data,evt,error作为参数，分别对应回应是否正常、有效的回应文本、DOM事件及错误信息。而mimetype可以是text/plain、text/html以及灵活的text/JavaScript。

利用dojo实现异步提交表单
dojo.io.bind()在参数表中增加一项formNode，值为document.getElementById(FORM_ID)，应该是在表单需要提交时触发事件调用此方法（猜的，我还没有尝试）。

一定程度上解决前进后退按钮问题的方法
经过dojo的封装，下面的程序段将在相应的时候被执行：

backButton: function(){
//something to do
}
forwardButton: function(){
//something to do
}

dojo.io.bind()中还可以添加一个changeURL，取值可以是true或是字符串，用来在URL中添加"#时间戳"或是自定义的标识。

其他参数：
method: 用于指定是post还是get
content: 添加的请求参数
postContent: 仅在post时才添加的请求参数
sync: 指定同步或异步，默认为异步
useCache: 是否使用缓存
编写自己的dojo扩展

前言
dojo是时下非常流行的JavaScript框架，它在自己的Wiki上给自己下了一个定义，dojo是一个用JavaScript编写的开源的DHTML工具箱。
dojo很想做一个“大一统”的工具箱，不仅仅是浏览器层面的，野心还是很大的。不过dojo带来了JavaScript编程的一些新想法，其中引入包机制进行动态加载是一个不错的概念。
理解dojo的包机制
其实dojo只需要一些很小的加载代码就可以用来加载它的各种包，它的官方站点上提供的dojo-ajax下载中包含的dojo.js体积还是比较庞大的，因为它将一些常用的包都包含在了js中，但是很多时候我们并不需要这么多功能，还是按需加载比较好。
幸好在http://download.dojotoolkit.org/这个地址中我们还可以下载到dojo的各个自定义版本，其实包含的组件都是一样的，只不过dojo.js的大小有很大不同，那么，我们就从minimal版本下手。
下载之后会发现minimal版本包含的dojo.js只有18kb，里面仅仅包含了加载机制，非常不错。这样，我们就可以开始编写自己的dojo扩展。
dojo代码结构
解压缩后的目录里面包含src目录，src目录下存放有dojo的各个组件包，我们在这里面新建一个hello目录。
新建一个名为__package__.js文件，很类似Python的模块命名，这个__package__.js定义了在引入这个命名空间的时候默认导入多少类，以及这个命名空间的名字。
我们的目的是做一个dojo.hello.Echo扩展，那么在__package__.js中的代码应该这样：
// kwCompoundRequire 的作用是当你导入整个dojo.hello包的时候需要默认加载多少类
// 这些定义就在这个函数里面，common在这里表示默认的加载，这个参数不是固定的
// dojo希望自己是一个“大一统”的实现，所以考虑了非浏览器情况，可以有别的，譬如rhino
dojo.kwCompoundRequire({
  common: [
    "dojo.hello.Echo"
  ]
});
// 这个定义了包，默认这么写 | 原因嘛，当然是有的，看你的悟性了:-)
dojo.provide("dojo.hello.*");我们指定了默认加载的类Echo，那么我们就去写Echo类，在hello目录中新建Echo.js，代码如下：
// 类名定义，JavaScript写的变扭，其实就是直接定义类名
dojo.provide("dojo.hello.Echo");

// 类定义部分，非常熟悉的代码
dojo.hello.Echo = function() {
  this.name = "dojo.hello.Echo";
  this.sayHello = function(greeting) {
    return greeting;
  }
}扩展写好了，很简单，接下来就是掉用了，index.html如下。
<html>
<head>
<script language="javascript" src="dojo.js"></script>
<script language="javascript">
dojo.require("dojo.hello.*");
var echo = new dojo.hello.Echo();
document.write(echo.sayHello("Hello World"));
</script>
</head>
<body>

</body>
</html>注意dojo.require("dojo.hello.*")回去请求两个文件，首先是__package__.js，这样一来就得到了之前在dojo.kwCompoundRequire里面指定的类列表，然后去加载Echo.js。你也可以直接去加载Echo.js，只需要变成dojo.require("dojo.hello.Echo")。
更多内容
这个例子非常简单的介绍了一下dojo的包加载机制，当然这个包中的类并没有引用其它类，dojo还允许在代码中动态加载其它类，当然了，这些都是通过XmlHttp来实现的，因为是同步模式，所以请求的类比较多并且都没有包含在dojo.js中的时候会有页面停顿的现象，这点还是需要注意的。
文中的代码下载：，dojo-hello.tar.gz
一些dojo的资源：
dojo 官方站点
dojo 手册
dojo wiki