Dojo学习笔记

Dojo学习笔记(1. 模块与包)

Intro:

Dojo是一个非常强大的面向对象的JavaScript的工具箱,建议读者能够去补充一下JavaScript下如何
使用OO进行编程的,这对于你以后阅读Dojo Source有很大的用处.

请大家下载dojo 0.3.1,以下的说明均针对此版本

翻译自http://manual.dojotoolkit.org/WikiHome/DojoDotBook/BookUsingDojo

Getting Started

1: 把Dojo加入到我们的Web程序中

1. 标志

2. 引用 dojo 的启动代码

3. 声明你所要用到的包

2. 针对不同需求提供的预整合包

Dojo本身是由许多模块所组合而成的,但是由于用户需求的多样性,dojo针对不同的需求而提供了不同的
版本,用户在下载dojo的时候就看见可以选择很多的版本,比如Ajax版和Widget版,每个版本最重要的区
别就在于dojo.js文件,但是除此之外,每一个版本都是全功能的,dojo.js根据版本的不同而整合进了不
同的模块

3. 直接获取Dojo的最新源代码

首先你必须安装 Subversion,当Subversion在你的电脑上能够正常工作后,你就可以通过如下命令下载
dojo的源代码:

svn co http://svn.dojotoolkit.org/dojo/trunk/
这会在你的当前目录下创建一个 trunk 的目录; 如果你希望直接Get到当前目录,用这个命令:

svn co http://svn.dojotoolkit.org/dojo/trunk/ .
或者你希望Get到当前目录下的 MyDir 目录,51); font-family:Arial; font-size:14px; line-height:26px"> svn co http://svn.dojotoolkit.org/dojo/trunk/ MyDir

模块与包

模块

Dojo的代码被划分为逻辑单元称之为模块,这有点类似于Java中的package,除了dojo的模块能够包含类
(类似于java中的classes)和简单函数

比如: 模块"dojo.html"包含了一系列的函数,比如dojo.html.getContentBox(),模块"dojo.dnd"包含
了一系列的HtmlDragObject的类

注意名称约定,函数的首字母为小写字母,类的首字母为大写

模块也可以称之为"命名空间"

包

在多数情况下,dojo的模块只需要定义在一个文件就可以了,但有时,一个模块可能划分到多个文件,
比如: 模块dojo.html,本来是定义在一个文件中,可是由于功能的增强,文件逐渐变大,我们不得不
将其拆分为多个文件,这主要是为性能考虑,以便浏览器可以只下载其需要用到的代码,不幸的是其
实现细节对于dojo的用户看起来不那么透明,你必须知道你想要用到的功能到底是包含在哪个文件,
然后才能require并使用它

这样的每一个文件都称之为一个包

dojo.require("dojo.html.extras")
将引用文件 src/html/extras.js,这将定义模块 dojo.html 的若干(并非所有)函数

据我所知,尽管单个文件可以定义包里的多个类,单个脚本文件不能定义多个模块 (在Java可以等效于
在一个文件中定义2个类),并且,包的名称和模块的名称可以不同,比如: 包dojo.widget.Button定义
了dojo.widget.html.Button

基本上你应该这样认为,包和模块尽管密切相关,但是是两个完全不同的实体

为什么会有模块和包这样的概念?

为什么会有模块和包这样的概念? 为了满足你的应用程序只需要加载其所用到的东西的需求,充分利用
模块化设计的优点,dojo维护了最小的足印以便仍能提供你所需要的功能,为什么要你的用户浪费时间
去下载用不到的JavaScript,当一个包就是一个js文件时,一个模块本质上就是一个命名空间,比如:
dojo.style 或 dojo.html.extras
多数简单情况下,一个包包含了一个模块,但更常见的是,一个模块可能被拆分为几个包文件

利用包和模块,将能确保你能够交付最相关的功能代码,最小程度的减少代码的膨胀和消除由此带来的
不好的用户体验,这就是模块设计的主要目标,通过模块化,你能够引入自定义模块(你自己拥有的
JavaScript 工具),并且维护模块对于核心代码库基本不会产生什么影响

另外,Dojo的模块系统也提供了内建的机制来使用代码提供命名空间,比如,通过模块dojo.event定义
的Dojo的事件系统

怎样引用

设置引用语句

你怎样才能知道该引用哪个包到dojo.require()?

1. 模块

首先,确定你要使用什么模块,这个例子我们假定你要使用 dojo.lfx.html

2. 包

搜索代码后你发现dojo.lfx.html定义在2个文件:

src/lfx/html.js
src/lfx/extras.js
根据你要用到的功能,你可以

dojo.require("dojo.lfx.html");
或

dojo.require("dojo.lfx.html");
dojo.require("dojo.lfx.extras");

通配符

新用户可能会对dojo.lfx.*这样就可以替代上面2句而感到诧异,实际上,__package__.js 中已经定义
了通配符可以代替的语句,并且这样可以让dojo根据当时的环境而决定加载具体的模块

/////////////////////////////////////////////////////////////////////////////////////////
Dojo学习笔记(2. djConfig解说)

djConfig是dojo内置的一个全局设置对象，其作用是可以通过其控制dojo的行为

首先我们需要在引用dojo.js前声明djConfig对象，以便在加载dojo.js的时候才能够取得所设置的值，
虽然在0.3版本以后dojo支持在加载后设置，但是强烈建议你把声明djConfig的代码作为第一段script

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

debugContainerId同样也是与调试有关的，如果不指定的话，调试信息将会直接利用 document.write输出，
这样可能会破坏页面的整体布局，所以你可以指定任何一个可以作为容器的html元素的id作为调试信息输
出容器

allowQueryConfig，这个属性指明 dojo是否允许从页面url的参数中读取djConfig中的相关属性，当值为
true时，dojo会优先从url参数中读取djConfig的其他属性，
比如: http://server/dojoDemo.htm?djConfig.debugContainerId=divDebug

baseScriptUri，一般不需要设置，dojo会自动根据你引用dojo.js的路径设置这个值，比如，
<script type="text/javascript" src="../dojo/dojo.js"></script>，自动获取的值便是 ../dojo/
ps: 如果你有多个工程需要同时引用dojo.js的话，建议也把dojo当作一个独立的工程，引用的时候采用
绝对路径就可以了

parseWidgets，这个是可以控制dojo是否自动解析具有dojoType的html元素为对应的widget，如果你没有
使用任何Widget，建议设置为false以加快dojo的加载速度

searchIds，这是一个字符串数组，定义了所有需要解析为widget的html元素的ID，如果ID不在其中的html
元素是不会被解析的，当数组为空数组时，则所有具有dojoType的元素都会被解析

还有一个bindEncoding，是用来设置默认的bind请求的编码方式

至于其它的属性，不是用处不大，就是不知道有什么作用

在实际开发中，可以把djConfig的定义放在一个js文件里，并将其作为第一个引用的js文件，这样应该是
最方便的。

////////////////////////////////////////////////////////////////////////////////////////
Dojo学习笔记(3. Dojo的基础对象和方法)

这里所说的基础对象和方法是指的不Require任何包就能够调用的对象和方法

匿名函数

在开始前，我想介绍一下js里的匿名函数，这个在阅读dojo的源代码的时候，会发现到处都有匿名函数

;(function(){
alert(123);
})();
//前面的分号是一个空语句，是可以不要的
匿名函数。一个匿名函数就是一个没有名字的函数。

你可以认为他们是一次性函数。当你只需要用一次某个函数时，他们就特别有用。通过使用匿名函数，
没有必要把函数一直放在内存中，所以使用匿名函数更加有效率。

当然你也可以根本不定义函数，但是使用匿名函数可以把你的代码分段，就像C#中的#region一样

dojo.byId

非常有用的一个方法，与prototype.js的著名的$一样

似乎以前的版本还有dojo.byIdArray,不过最新的版本已经找不到这个函数了(除了src/compat/0.2.2.js)

如果有多个元素具有指定的id，则返回的是一个集合

Usage Example:

dojo.byId("divTest");
dojo.byId("divTest",document);
dojo.byId(document.getElementById("divTest"));

dojo.version

dojo的版本，可以取得major,minor,patch,flag和revision

这个对象没什么太大用处，除非你要根据dojo的版本选择执行你的代码

dojo.raise

抛出一个异常

dojo.errorToString

将异常转换为字符串

try
{
dojo.raise("打印失败",new Error("文件不存在"));
}
catch(e)
{
alert(dojo.errorToString(e));
}

dojo.render

系统环境对象

dojo.render.name 返回 browser ，说明是工作在浏览器下
dojo.render.ver 返回 4 ，似乎没什么用
dojo.os.win 返回true说明操作系统是Windows
dojo.os.linux 返回true说明操作系统是Linux
dojo.os.osx 返回true说明操作系统是MacOS
dojo.html.ie 返回true说明浏览器是Internet Explorer
dojo.html.opera 返回true说明浏览器是Opera
dojo.html.khtml 返回true说明浏览器是Konqueror
dojo.html.safari 返回true说明浏览器是Safari
dojo.html.moz 返回true说明浏览器是Mozilla FireFox
dojo.svg.capable 返回true说明浏览器支持svg
dojo.vml.capable 返回true说明浏览器支持vml
dojo.swf.capable 返回true说明浏览器支持swf
dojo.swt.capable 返回true说明浏览器支持swt (IBM开发的Standard Widget Toolkit)
如果dojo.html.ie为true的话

dojo.html.ie50 返回true说明浏览器是IE 5.0
dojo.html.ie55 返回true说明浏览器是IE 5.5
dojo.html.ie60 返回true说明浏览器是IE 6.0
dojo.html.ie70 返回true说明浏览器是IE 7.0

dojo.addOnLoad

可以加载指定函数到window.load时执行，好处就是可以很方便的在window.load时执行多个函数

Usage Example:

dojo.addOnLoad(init); //init是一个函数
dojo.addOnLoad(myObject,init); //init是myObject对象的一个方法

dojo.require

如果你想调用一个模块的对象的时候，你应该首先用dojo.require来请求这个模块，dojo会根据你的
请求自动取得相应的js文件，并加载到内存中，这样你才能调用或创建其中的对象

dojo会自动维护已加载的模块列表，所以是不会重复加载模块的

dojo.require("dojo.event");
dojo.requireIf=dojo.requireAfterIf

可以根据指定的条件来决定是否加载指定的模块

dojo.requireIf(dojo.html.ie,"dojo.html"); //如果dojo.html.ie为true，才会加载dojo.html模块

dojo.provide

除非你要开发自己的模块，不然是用不到这个方法的，你可以这句看成是向系统注册这个模块名称

dojo.provide("dojo.custom");
dojo.exists

判断指定对象是否具有指定名称的方法

dojo.exists(dojo,"exists"); //will return true

dojo.hostenv.getText

返回指定url的内容

PS: 由于浏览器的安全限制，因此只能用于取得同域名的url的内容，否则会报告权限不够

aSync = false; //同步，确保返回内容不为null
silent = true; //不抛出错误
s = dojo.hostenv.getText("http://www.google.com/",aSync,silent); //返回Google的首页的HTML
alert(s);
dojo.debug

输出调试信息，如果在djConfig中指定了debugContainerId，则输出到指定的console容器中，否则
直接document.write

所有的调试信息均以 DEBUG: 开头

dojo.debug("这是调试信息");

dojo.hostenv.println

与dojo.debug类似，不同的是，输出内容没有 DEBUG:

dojo.hostenv.println("这是一般的输出信息");

dojo.debugShallow

输出指定对象的全部信息(Shallow说明并不会遍历到下一级别的对象属性)以供调试

dojo.debugShallow(dojo.render.html);

//////////////////////////////////////////////////////////////////////////////////////////

Dojo学习笔记(4. dojo.string & dojo.lang)

模块：dojo.string.common / dojo.string
dojo.string.common 和 dojo.string 是一样的，只要require其中一个就可以使用以下方法
dojo.string.trim
去掉字符串的空白
Usage Example:
s = " abc ";dojo.string.trim(s); //will return "abc"dojo.string.trim(s,0);
//will return "abc"dojo.string.trim(s,1); //will return "abc "dojo.string.trim(s,-1);
//will return " abc"

dojo.string.trimStart
去掉字符串开头的空白
Usage Example:
s = " abc ";dojo.string.trimStart(s); //will return "abc "
dojo.string.trimEnd
去掉字符串结尾的空白
Usage Example:
s = " abc ";dojo.string.trimEnd(s); //will return " abc"
dojo.string.repeat
生成由同一字符(串)重复组成的字符串
Usage Example:
dojo.string.repeat("a",4); //will return "aaaa"dojo.string.repeat("1234",3,"-");
//will return "1234-1234-1234"
dojo.string.pad
使用字符补齐字符串
Usage Example:
dojo.string.pad("100",6); //will return "000100"dojo.string.pad("100",6,"0",1);
//will return "000100"dojo.string.pad("100",-1); //will return "100000"

dojo.string.padLeft
使用字符补齐字符串开头
Usage Example:
dojo.string.padLeft("100",6); //will return "000100"
dojo.string.padRight
使用字符补齐字符串结尾
Usage Example:
dojo.string.padRight("100",6); //will return "100000"

模块：dojo.lang.common / dojo.lang
dojo.lang.common 和 dojo.lang 是一样的，只要require其中一个就可以使用以下方法
dojo.lang.mixin
将一个对象的方法和属性增加到另一个对象上
Usage Example:
var s1 = {name: "TestObj",test1: function(){alert("this is test1!");}}
var s2 = {value: 1000,test2: function(){alert("this is test2!");}}
var d = {};dojo.lang.mixin(d,s1,s2);
//执行后d就具备了s1和s2的所有属性和方法d.test1();
dojo.lang.extend
为指定类的原型扩展方法与属性
Usage Example:
TestClass = function() {};
dojo.lang.extend(TestClass,{name: "demo",test: function(){alert("Test!");}});
var o = new TestClass();
//TestClass本来是没有test方法的，但是extend以后就有test方法了o.test();
dojo.lang.find=dojo.lang.indexOf
查找指定对象在指定数组中的位置
Usage Example:
var arr = [1,2,1];dojo.lang.find(arr,2);
//will return 1dojo.lang.find(arr,true);
//will return 1dojo.lang.find(arr,"2",true);
//will return -1dojo.lang.find(arr,false);
//will return 1dojo.lang.find(arr,true,true);
//will return 4
dojo.lang.findLast=dojo.lang.lastIndexOf
查找指定对象在指定数组中的位置，从后往前查
Usage Example:
var arr = [1,1];dojo.lang.findLast(arr,2);
//will return 4dojo.lang.findLast(arr,true);
//will return 4dojo.lang.findLast(arr,true);
//will return -1dojo.lang.findLast(arr,false);
//will return 4
dojo.lang.inArray
查找指定对象是否在指定数组中
Usage Example:
var arr = [1,3];dojo.lang.inArray(arr,1);
//will return truedojo.lang.inArray(arr,4);
//will return false
dojo.lang.isObject
判断输入的类型是否为对象
Usage Example:
dojo.lang.isObject(new String());
//will return truedojo.lang.isObject("123"));
//will return false
dojo.lang.isArray
判断输入的类型是否为数组
Usage Example:
dojo.lang.isArray({a:1,b:2});
//will return falsedojo.lang.isArray([1,3]);
//will return true
dojo.lang.isFunction
判断输入的类型是否为函数
Usage Example:
dojo.lang.isFunction(function() {});
//will return true
dojo.lang.isString
判断输入的类型是否为字符串
Usage Example:
dojo.lang.isString("");
//will return truedojo.lang.isString(0);
//will return false
dojo.lang.isAlien
判断输入的类型是否为系统函数
Usage Example:
dojo.lang.isAlien(isNaN); //will return true
dojo.lang.isBoolean
判断输入的类型是否为布尔类型
Usage Example:
dojo.lang.isBoolean(2>1); //will return true
dojo.lang.isNumber
判断输入的类型是否为数值，根据注释所说，此函数使用不太可靠，但是可替换使用的系统函数isNaN
也不太可靠
dojo.lang.isUndefined
判断输入是否为未定义，根据注释所说，此函数有可能会导致抛出异常，推荐使用
typeof foo == "undefined" 来判断
模块：dojo.lang.extras
dojo.lang.setTimeout
延迟指定时间后执行指定方法
Usage Example:
function onTime(msg){dojo.debug(msg)}dojo.lang.setTimeout(onTime,1000,"test");
//1秒后会输出调试信息"test"dojo.lang.setTimeout(dojo,"debug","test");
//1秒后会输出调试信息"test"
dojo.lang.getNameInObj
获得指定项目在指定对象中的名称
Usage Example:
dojo.lang.getNameInObj(dojo,dojo.debug); //will return "debug"
dojo.lang.shallowCopy
返回指定对象的浅表复制副本
Usage Example:
dojo.lang.shallowCopy({}); //will return a 空对象
dojo.lang.firstValued
返回第一个存在定义的参数
Usage Example:
var a;dojo.lang.firstValued(a,3); //will return 2

/////////////////////////////////////////////////////////////////////////////////////////////
Dojo学习笔记(5. dojo.lang.array & dojo.lang.func & dojo.string.extras)

模块：dojo.lang.array

dojo.lang.has
判断对象是否具有指定属性，不过这个方法有用吗，不如直接使用 if(name in obj)
Usage Example:
dojo.lang.has(dojo.lang,"has"); //will return true

dojo.lang.isEmpty
判断对象或数组是否为空
Usage Example:
dojo.lang.isEmpty({a: 1}); //will return false
dojo.lang.isEmpty([]); //will return true

dojo.lang.map
调用指定的方法处理指定的数组或字符串
Usage Example:
dojo.lang.map([1,4,5],function(x) { return x * x;});
//will return [1,9,16,25]

dojo.lang.forEach
遍历指定的数组或字符串，并对其中的元素调用指定的方法
Usage Example:
dojo.lang.forEach("abc",function(x) { alert(x); });

dojo.lang.every
检查指定的数组是否全部满足指定方法的条件
Usage Example:
dojo.lang.every([1,-2,3],function(x) { return x > 0; });
//指定的数组不是全大于0的，因此返回false

dojo.lang.some
检查指定的数组是否部分满足指定方法的条件
Usage Example:
dojo.lang.some([1,function(x) { return x > 0; });
//指定的数组有大于0的元素，因此返回true

dojo.lang.filter
根据指定的方法来过滤指定的数组
Usage Example:
dojo.lang.filter([1,function(x) { return x > 0; }); //will return [1,3]

dojo.lang.unnest
把指定的参数或数组转换为一维数组
Usage Example:
dojo.lang.unnest(1,3); //will return [1,3]
dojo.lang.unnest(1,[2,[3],[{4}]]); //will return [1,4]

dojo.lang.toArray
将输入转换为数组
Usage Example:
function test()
{
return dojo.lang.toArray(arguments,1);
}
test(1,5); //will return [2,5]

模块：dojo.lang.func
dojo.lang.hitch
将指定的方法挂在指定的对象下并返回该方法
Usage Example:
func = {test: function(s) {alert(s)}};
dojo.lang.mixin(func,{demo: dojo.lang.hitch(func,"test")});
func.demo("demo and test are same method");

dojo.lang.forward
返回自身对象的指定名称的方法引用
Usage Example:
func = {test: function(s) {alert(s)},demo: dojo.lang.forward("test")};
func.demo("demo and test are same method");

dojo.lang.curry
What is curry? 请参阅这篇文章：http://www.svendtofte.com/code/curried_javascript/
Usage Example:
function add(a,b)
{
return a + b;
}
dojo.lang.curry(null,add,3); //will return 5
dojo.lang.curry(null,2)(3); //will return 5
dojo.lang.curry(null,add)(2)(3); //will return 5
dojo.lang.curry(null,add)()(2)(3); //will return 5

dojo.lang.curryArguments
与dojo.lang.curry类似，但是可以选择忽略掉前n个参数
Usage Example:
function add(a,b)
{
return a + b;
}
dojo.lang.curryArguments(null,[1,2); //will return 5 (= 2 + 3)

dojo.lang.tryThese
测试参数指定所有函数，并返回第一个返回值不为0的函数值
from seno:
dojo.lang.tryThese方法和prototype中的Try.these()方法是一样的，
xmlNode.text在一些浏览器中好用，但是xmlNode.textContent在另一些浏览器中正常工作。
使用Try.these()方法我们可以得到正常工作的那个方法的返回值。
<script>
function getXmlNodeValue(xmlNode){
return Try.these(
function() {return xmlNode.text;},
function() {return xmlNode.textContent;)
);
}

dojo.lang.delayThese
没看懂这个函数怎么用

模块：dojo.string.extras

dojo.string.substituteParams
类似C#中的String.Format函数
%{name}要保证与传入的对象的名称大小写一致，否则会出异常
Usage Example:
dojo.string.substituteParams("%{0} - %{1} - %{2}","a","b","c");
//will return "a - b - c"
dojo.string.substituteParams("%{name}: %{value}",{name:"名称",value:"值"});
//will return "名称: 值"

dojo.string.capitalize
把每一个单词的首字母大写
Usage Example:
dojo.string.capitalize("show me love"); //will return "Show Me Love"

dojo.string.isBlank
判断输入字符串是否为空或全是空白字符，如果传入对象为非字符串则也会返回true
Usage Example:
dojo.string.isBlank(" 1 "); //will return false

dojo.string.escape
参数1为type，可传值为: xml/html/xhtml,sql,regexp/regex,javascript/jscript/js,ascii
将按照所传type对字符串进行编码
Usage Example:
dojo.string.escape("html","<input type='text' value='' />"); //will return "<input
type='text' value='' />"

dojo.string.encodeAscii
dojo.string.escapeXml
dojo.string.escapesql
dojo.string.escapeRegExp
dojo.string.escapeJavaScript
dojo.string.escapeString
这些函数也就是 dojo.string.escape 所调用的，这里无需多说

dojo.string.summary
取得输入字符串的缩略版本
Usage Example:
dojo.string.summary("1234567890",5); //will return "12345..."

dojo.string.endsWith
判断输入字符串是否以指定的字符串结尾
Usage Example:
dojo.string.endsWith("abcde","E"); //will return false
dojo.string.endsWith("abcde","E",true); //will return true

dojo.string.endsWithAny
判断输入字符串是否以指定的任意字符串结尾
Usage Example:
dojo.string.endsWithAny("abcde","e"); //will return true

dojo.string.startsWith
判断输入字符串是否以指定的字符串开头
Usage Example:
dojo.string.startsWith("abcde","A"); //will return false
dojo.string.startsWith("abcde","A",51); font-family:Arial; font-size:14px; line-height:26px"> dojo.string.startsWithAny
判断输入字符串是否以指定的任意字符串开头
Usage Example:
dojo.string.startsWithAny("abcde","a"); //will return true

dojo.string.has
判断输入字符串是否含有任意指定的字符串
Usage Example:
dojo.string.has("abcde","1","23","abc"); //will return true

dojo.string.normalizeNewlines
按要求转换回车换行的格式
Usage Example:
dojo.string.normalizeNewlines("a/r/nb/r/n","/r"); //will return "a/rb/r"

dojo.string.splitEscaped
将字符串按分隔符转换为数组
Usage Example:
dojo.string.splitEscaped("a//_b_c",'_'); //will return ["a//_b","c"]

////////////////////////////////////////////////////////////////////////////////////////////

Dojo学习笔记(6. dojo.io.IO & dojo.io.BrowserIO)
模块：dojo.io.IO

dojo.io.bind

处理请求取回需要的数据并处理

这个函数是AJAX中最为重要和有用的函数，dojo.io.bind这个类是用来处理客户端与服务器间通讯的，
需要通讯的参数由对象dojo.io.Request所定义，具体通讯的方法则由另外一个对象Transport所提供。

因此，我们如果需要与服务器通讯，则应该定义一个Request对象，其中包括服务器地址及回调函数，
例子中Requset都是以匿名对象方式定义的

虽然我们可以定义一个自己的Transport，但是显然不如直接利用现成的Transport方便。

Dojo里提供了一个同时兼容IE和Firefox的dojo.io.XMLHTTPTransport，但是这个对象位于
dojo.io.BrowserIO，因此，一般require dojo.io.IO时，还应该require dojo.io.BrowserIO

dojo.io.bind({
url: "http://localhost/test.html",//要请求的页面地址
mimetype: "text/html",//请求的页面的类型，应该设置为与你请求页面类型对应的mimetype，
默认为 "text/plain"
method："GET",//默认为"GET"
sync: false,//默认为异步执行
useCache: false,//默认为不使用页面缓存，注意这里的缓存并不是浏览器的缓存，
而是Dojo自身所维护的页面缓存
preventCache: false,//默认为启用浏览器缓存，否则将通过自动增加不同的参数来确保浏览器缓存失效
timeoutSeconds: 3000,//3秒后超时，如果为0则永不超时

load: function(type,data,evt) { alert(data); },//type should be "load",data is that we wanted
error: function(type,error) { alert(error.message); },//error is dojo.io.Error
timeout: function(type) { alert("请求超时！"); }
});

你也可以用一个handle来处理所有的事件

页面的类型，应该设置为与你请求页面类型对应的mimetype
timeoutSeconds: 3000,//3秒后超时，如果为0则永不超时
handle: function(type,evt){
if(type == "load") { alert(data); } //data is that we wanted
else if (type == "error") { alert(data.message); } //data is the error object
else { ; } //other events maybe need handled
}
});

如果没有在Request中指定所用的transport，则Dojo会自动的在已注册的transports中寻找能够处理
这个Request的transport，如果不能找到，则返回指定的Request。下面是一个指定了transport的例子:

//error is dojo.io.Error
timeout: function(type) { alert("请求超时！"); }
});

你还可以利用bind来得到一个JavaScript所定义的对象（注意mimetype必须要定义为"text/javascript"）

testObj = dojo.io.bind({
url: "http://localhost/test.js",//test.js里定义了一个对象
mimetype: "text/javascript",evt){
if(type == "load") { alert(data); } //data is a object or value
else if (type == "error") { alert(data.message); } //data is the error object
else { ; } //other events maybe need handled
}
});

下面是一个Post的例子:

dojo.io.bind({
url: "http://localhost/test.aspx",//要提交的页面地址
mimetype: "text/html",//3秒后超时，如果为0则永不超时
method: "POST",
formNode: dojo.byId("myForm"),//指定提交的Form名称

另一个Post的例子(without Form to post):

dojo.io.bind({
url: "http://localhost/test.aspx",
content: {a: 1,b: 2},//要提交的数据

dojo.io.queueBind

有时，我们需要一次发出多个网页请求，则应该使用dojo.io.queueBind，因为浏览器可能只允许
同时发出有限个数的请求，如果是使用dojo.io.bind的话，则有可能会申请不到新的XMLHttp对象而
导致出错。

用法与dojo.io.bind是一样的。

dojo.io.argsFromMap

用来把对象转换为URL的参数形式

Usage Example:

dojo.io.argsFromMap({a:1,b:2,c:3}); //will return "c=3&b=2&a=1"
dojo.io.argsFromMap({name:"名称",value:"值"},"utf");
//will return "value=%E5%80%BC&name=%E5%90%8D%E7%A7%B0",有中文的话应该指定utf格式，
//否则dojo.string.encodeAscii返回的编码是很怪异的
dojo.io.argsFromMap({a:1,c:3},"utf","c");
//will return "b=2&a=1&c=3"，最后一个参数可以控制指定名称的值出现在最后

dojo.io.setIFrameSrc

设置IFrame的Src

Usage Example:

dojo.io.setIFrameSrc(dojo.byId("myFrame"),"http://localhost/test.htm");
//myFrame打开指定的网页
dojo.io.setIFrameSrc(dojo.byId("myFrame"),"http://localhost/test.htm",true);
//myFrame打开指定的网页，并覆盖浏览器的历史记录

TODO: 补充一个kwArgs的例子，我之前在网上看见过，可是现在无论如何也找不到相关的页面了，
只好以后在举例了

模块：dojo.io.BrowserIO

基本上就提供了dojo.io.XMLHTTPTransport这个对象

XMLHTTPTransport一般能够满足我们的需求，但是其有几个限制：它不能传输文件，不能够成功执行跨
域名的远程请求，并且不支持 file:// 这样的协议

因此，根据应用要求，我们可能会需要选用其它的transport: dojo.io.IframeTransport,
dojo.io.repubsubTranport,dojo.io.ScriptSrcTransport,ShortBusTransport

dojo.io.IframeTransport，用法与xmlhttp是一样的，其优点就是可以跨域，不存在任何的安全问题
如果Request指定的mimetype是text或javascript，返回的内容应该是放在第一个textarea里的内容，
如果指定的mimetype是html，则IFrame里的html则是需要的内容。因为浏览器兼容的原因，
IframeTransport不能正确处理返回类型为XML的请求。

关于Rpc，这个类似于Remoting的东西，也将在以后对其进行介绍。

//////////////////////////////////////////////////////////////////////////////////////////
Dojo学习笔记(7. dojo.dom)

模块：dojo.dom

dojo.dom.isNode

测试指定对象是否为节点

dojo.dom.isNode(dojo.byId('edtTitle'));

dojo.dom.getUniqueId

取得唯一id

dojo.dom.getUniqueId(); //will return dj_unique_#

dojo.dom.firstElement = dojo.dom.getFirstChildElement

取得指定节点下的第一个满足指定Tag条件的子节点

dojo.dom.firstElement(parentNode,'SPAN');

dojo.dom.lastElement = dojo.dom.getLastChildElement

取得指定节点下的最后一个满足指定Tag条件的子节点

dojo.dom.lastElement(parentNode,51); font-family:Arial; font-size:14px; line-height:26px"> dojo.dom.nextElement = dojo.dom.getNextSiblingElement

取得指定节点的下一个满足指定Tag条件的子节点

dojo.dom.nextElement(node,51); font-family:Arial; font-size:14px; line-height:26px"> dojo.dom.prevElement = dojo.dom.getPrevIoUsSiblingElement

取得指定节点的前一个满足指定Tag条件的子节点

dojo.dom.prevElement(node,51); font-family:Arial; font-size:14px; line-height:26px"> dojo.dom.moveChildren

把指定节点下的所有子节点移动到目标节点下，并返回移动的节点数

dojo.dom.moveChildren(srcNode,destNode,true); //仅移动子节点，srcNode中的文字将被丢弃
dojo.dom.moveChildren(srcNode,false);//包括文字和子节点都将被移动到目标节点下

dojo.dom.copyChildren

把指定节点下的所有子节点复制到目标节点下，并返回复制的节点数

文字将被忽略
dojo.dom.moveChildren(srcNode,false);//包括文字和子节点都将被复制到目标节点下

dojo.dom.removeChildren

删除指定节点下的所有子节点，并返回删除的节点数

dojo.dom.moveChildren(node);

dojo.dom.replaceChildren

用指定的新节点替换父节点下的所有子节点

dojo.dom.replaceChildren(node,newChild); //目前还不支持newChild为数组形式

dojo.dom.removeNode

删除指定的节点

dojo.dom.removeNode(node);

dojo.dom.getAncestors

返回指定节点的父节点集合

dojo.dom.getAncestors(node,null,false); //返回所有的父节点集合（包括指定的节点node）
dojo.dom.getAncestors(node,true); //返回最近的一个父节点
dojo.dom.getAncestors(node,function(el){/* 此处增加过滤条件 */return true},false);
//返回所有满足条件的父节点集合

dojo.dom.getAncestorsByTag

返回所有符合指定Tag的指定节点的父节点集合

dojo.dom.getAncestorsByTag(node,'span',false); //返回所有的类型为SPAN的父节点集合
dojo.dom.getAncestorsByTag(node,true); //返回最近的一个类型为SPAN的父节点

dojo.dom.getFirstAncestorByTag

返回最近的一个符合指定Tag的指定节点的父节点

dojo.dom.getFirstAncestorByTag(node,'span'); //返回最近的一个类型为SPAN的父节点

dojo.dom.isDescendantOf

判断指定的节点是否为另一个节点的子孙

dojo.dom.isDescendantOf(node,ancestor,true); //判断node是否为ancestor的子孙
dojo.dom.isDescendantOf(node,node,false); //will return true
dojo.dom.isDescendantOf(node,true); //will return false

dojo.dom.innerXML

返回指定节点的XML

dojo.dom.innerXML(node);

dojo.dom.createDocument

创建一个空的文档对象

dojo.dom.createDocument();

dojo.dom.createDocumentFromText

根据文字创建一个文档对象

dojo.dom.createDocumentFromText('<?xml version="1.0" encoding="gb2312" ?><a>1</a>',
'text/xml');

dojo.dom.prependChild

将指定的节点插入到父节点的最前面

dojo.dom.prependChild(node,parent);

dojo.dom.insertBefore

将指定的节点插入到参考节点的前面

dojo.dom.insertBefore(node,ref,false); //如果满足要求的话就直接退出
dojo.dom.insertBefore(node,true);

dojo.dom.insertAfter

将指定的节点插入到参考节点的后面

dojo.dom.insertAfter(node,false); //如果满足要求的话就直接退出
dojo.dom.insertAfter(node,51); font-family:Arial; font-size:14px; line-height:26px"> dojo.dom.insertAtPosition

将指定的节点插入到参考节点的指定位置

dojo.dom.insertAtPosition(node,"before");//参考节点之前
dojo.dom.insertAtPosition(node,"after"); //参考节点之后
dojo.dom.insertAtPosition(node,"first"); //参考节点的第一个子节点
dojo.dom.insertAtPosition(node,"last"); //参考节点的最后一个子节点
dojo.dom.insertAtPosition(node,ref); //默认位置为"last"

dojo.dom.insertAtIndex

将指定的节点插入到参考节点的子节点中的指定索引的位置

dojo.dom.insertAtIndex(node,containingNode,3);
//把node插入到containingNode的子节点中，使其成为第3个子节点

dojo.dom.textContent

设置或获取指定节点的文本

dojo.dom.textContent(node,'text'); //设置node的文本为'text'
dojo.dom.textContent(node); //返回node的文本

dojo.dom.hasParent

判断指定节点是否有父节点

dojo.dom.hasParent(node);

dojo.dom.isTag

判断节点是否具有指定的tag

var el = document.createElement("SPAN");
dojo.dom.isTag(el,"SPAN"); //will return "SPAN"
dojo.dom.isTag(el,"span"); //will return ""
dojo.dom.isTag(el,"INPUT","SPAN","IMG"); //will return "SPAN"

///////////////////////////////////////////////////////////////////////////////////////////

Dojo学习笔记(8. dojo.event & dojo.event.topic & dojo.event.browser)

模块：dojo.event

终于进入有名的dojo事件处理系统的学习了，学习前建议读者先去补习一下AOP的相关知识

dojo.event.connect

绑定指定的方法到指定的对象的方法上

简单绑定1

function doOnClick1()
{
alert("Clicked!");
}
dojo.event.connect(dojo.byId("inputTest"),"onclick","doOnClick1");

简单绑定2

obj = { doOnClick2: function(){ alert("Clicked!");}}
dojo.event.connect(dojo.byId("inputTest"),obj,"doOnClick2");

如果存在需要进行多个事件的绑定的时候，你就会看到dojo的方便之处了

obj2 = { doOnClick2: function(){alert("Clicked!");}}
dojo.event.connect(dojo.byId("inputTest"),"doOnClick2");
dojo.event.connect(dojo.byId("inputTest"),obj2,51); font-family:Arial; font-size:14px; line-height:26px"> connect可以对任何对象的方法进行绑定，而不是只能针对DOM对象

dojo.event.connect(obj,"doOnclick2","doOnClick1");
//在调用obj.doOnclick2()后调用doOnClick1()

dojo.event.connectBefore

dojo.event.connect默认是后绑定，connectBefore则是早绑定，绑定的方法将在指定方法前执行，
用法与connect一致

dojo.event.connectAround

function aroundTest(invocation){
//此处可以增加代码，比如检查参数(invocation.args)
var result = invocation.proceed();
//此处可以增加代码，比如修改结果(result)
return result;
}
dojo.event.connectAround(dojo.byId("inputTest"),"aroundTest");

dojo.event.connectOnce
说起这个函数，还真的是让我想了半天，直觉上我就把它想象成executeOnce，结果测试的结果让我
差点想不通
connectOnce就是指保证只绑定一次，来避免重复绑定会导致的重复执行的问题

dojo.event.disconnect

解除绑定，调用参数与connect一致，即可解除之前的绑定操作

dojo.event.log

在执行指定对象的指定方法后自动记录日志

dojo.event.log(obj,"doOnClick");
//当调用obj.doOnClick时记录下日志"DEBUG: ([object Object]).doOnClick : "

你也可以这样写：

dojo.event.log({srcObj: obj,srcFunc: "doOnClick"});

dojo.event.kwConnect

kwConnect可以做到更加灵活的绑定，比如可以设置延迟执行绑定

dojo.event.kwConnect({
srcObj: dojo.byId("inputTest"),
srcFunc: "onclick",
adviceObj: obj,
adviceFunc: "doOnclick2",51); font-family:Arial; font-size:14px; line-height:26px"> type: "before",
//默认为"after"，可选: "before","around"，注意：type是用来决定adviceFunc的行为的，
//如果为"around"，则aroundFunc将失效
aroundObj: null,
aroundFunc: null,//如果指定了aroundFunc，则其将对adviceFunc进行拦截，
//但是当type为"around"时，则aroundFunc将不会执行
once: false,//默认为false，允许重复绑定
delay: 3000,//延时3秒后执行adviceFunc
rate: 0,//这个从源代码没有看懂起什么作用
adviceMsg: false //这个从源代码没有看懂起什么作用
});

dojo.event.kwDisconnect

用来解除使用kwConnect指定的绑定

模块：dojo.event.topic

Topic机制与Advice机制都能够实现事件的绑定，但是显然,Topic更适合处理多重绑定。
发布主题，然后由用户订阅的机制就是一个典型的观察者模式

dojo.event.topic.registerPublisher

注册主题发布器

dojo.event.topic.registerPublisher("myTopic",51); font-family:Arial; font-size:14px; line-height:26px"> dojo.event.topic.subscribe

订阅主题

dojo.event.topic.subscribe("myTopic","test"); //执行obj.doOnClick2()以后会自动执行test()

dojo.event.topic.unsubscribe

取消订阅主题

dojo.event.topic.unsubscribe("myTopic","test");

dojo.event.topic.destroy

删除主题，此主题所有的订阅都将失效

dojo.event.topic.destroy("myTopic");

模块：dojo.event.browser

dojo.event.browser.addListener

增加监听器

function listener()
{
alert("ok");
}
dojo.event.browser.addListener(document,'mousedown',listener);
//事件名称可以加上"on"，也可以没有"on"
dojo.event.browser.addListener(document,'onmousedown',listener,true);
//capture为真表示不受上层元素的事件控制

dojo.event.browser.removeListener

清除监听器(这个方法似乎是无效的)

dojo.event.browser.callListener

调用监听器

dojo.event.browser.callListener(listener,document);

dojo.event.browser.stopPropagation

阻止Event传播

dojo.event.browser.stopPropagation();

dojo.event.browser.preventDefault

将当前事件的返回值设置为false

dojo.event.browser.preventDefault();

dojo.event.browser.keys

键定义:
KEY_BACKSPACE: 8,
KEY_TAB: 9,
KEY_ENTER: 13,
KEY_SHIFT: 16,
KEY_CTRL: 17,
KEY_ALT: 18,
KEY_PAUSE: 19,
KEY_CAPS_LOCK: 20,
KEY_ESCAPE: 27,
KEY_SPACE: 32,
KEY_PAGE_UP: 33,
KEY_PAGE_DOWN: 34,
KEY_END: 35,
KEY_HOME: 36,
KEY_LEFT_ARROW: 37,
KEY_UP_ARROW: 38,
KEY_RIGHT_ARROW: 39,
KEY_DOWN_ARROW: 40,
KEY_INSERT: 45,
KEY_DELETE: 46,
KEY_LEFT_WINDOW: 91,
KEY_RIGHT_WINDOW: 92,
KEY_SELECT: 93,
KEY_F1: 112,
KEY_F2: 113,
KEY_F3: 114,
KEY_F4: 115,
KEY_F5: 116,
KEY_F6: 117,
KEY_F7: 118,
KEY_F8: 119,
KEY_F9: 120,
KEY_F10: 121,
KEY_F11: 122,
KEY_F12: 123,
KEY_NUM_LOCK: 144,
KEY_SCROLL_LOCK: 145

dojo.event.browser.currentEvent

最近一次的Event，其属性包括：

altKey //检查alt键的状态，当alt键按下时，值为 true
button //检查按下的鼠标键，0 没按键，1 按左键，2 按右键，3 按左右键，4 按中间键，
5 按左键和中间键，6 按右键和中间键，7 按所有的键
//这个属性仅用于onmousedown,onmouseup,和 onmousemove 事件。对其他事件，不管鼠标状态如何，
都返回 0（比如onclick）
clientX //返回鼠标在窗口客户区域中的X坐标
clientY //返回鼠标在窗口客户区域中的Y坐标
ctrlKey //检查ctrl键的状态，当ctrl键按下时，值为 true
fromElement //检测 onmouSEOver 和 onmouSEOut 事件发生时，鼠标所离开的元素
keyCode //检测键盘事件相对应的内码，仅当type为keydown,keyup,keypress时才有效
offsetX //检查相对于触发事件的对象，鼠标位置的水平坐标
offsetY //检查相对于触发事件的对象，鼠标位置的垂直坐标
propertyName //设置或返回元素的变化了的属性的名称，你可以通过使用 onpropertychange 事件，
得到 propertyName 的值
screenX //检测鼠标相对于用户屏幕的水平位置
screenY //检测鼠标相对于用户屏幕的垂直位置
shiftKey //检查shift键的状态，当shift键按下时，值为true
srcElement //返回触发事件的元素
srcFilter //返回触发 onfilterchange 事件的滤镜
toElement //检测 onmouSEOver 和 onmouSEOut 事件发生时，鼠标所进入的元素
type //返回没有“on”作为前缀的事件名，比如click,mousedown
x //返回鼠标相对于css属性中有position属性的上级元素的x轴坐标。
如果没有css属性中有position属性的上级元素，默认以BODY元素作为参考对象
y //返回鼠标相对于css属性中有position属性的上级元素的y轴坐标。
如果没有css属性中有position属性的上级元素，默认以BODY元素作为参考对象
target //同srcElement
currentTarget
layerX //同offsetX
layerY //同offsetY
pageX //无水平滚动条的情况下与clientX同
pageY //无水平滚动条的情况下与clientY同
relatedTarget // 仅当type为mouSEOver,mouSEOut时才有效
keys //与dojo.event.browser.keys相同，仅当type为keydown,keypress时才有效
charCode //键值，仅当type为keypress时才有效

dojo.event.browser.isEvent

判断指定对象是否为event对象

dojo.event.browser.isEvent(dojo.event.browser.currentEvent);
//当dojo.event.browser.currentEvent不为null时返回true

Dojo学习笔记(9. dojo.graphics.color & dojo.uri.Uri)

模块：dojo.graphics.color

下面是dojo里定义的颜色名称
dojo.graphics.color.named.white //白色
dojo.graphics.color.named.black //黑色
dojo.graphics.color.named.red //红色
dojo.graphics.color.named.green //绿色
dojo.graphics.color.named.blue //蓝色
dojo.graphics.color.named.navy //海军蓝
dojo.graphics.color.named.gray //灰色
dojo.graphics.color.named.silver//银色

dojo.graphics.color.Color

颜色类

var color = new dojo.graphics.color.Color(dojo.graphics.color.named.black);
//定义一个黑色的颜色对象
var color = new dojo.graphics.color.Color(0,0); //定义一个黑色的颜色对象
var color = new dojo.graphics.color.Color(0,1.0); //定义一个黑色的颜色对象
var color = new dojo.graphics.color.Color([0,1.0]); //定义一个黑色的颜色对象
var color = new dojo.graphics.color.Color('rgb(0,0)'); //定义一个黑色的颜色对象
var color = new dojo.graphics.color.Color('#000000'); //定义一个黑色的颜色对象

dojo.graphics.color.Color.toRgb

color.toRgb(); //返回一个[0,0]的数组
color.toRgb(true); //返回一个[0,1.0]的数组

dojo.graphics.color.Color.toRgba

color.toRgba(); //返回一个[0,51); font-family:Arial; font-size:14px; line-height:26px"> dojo.graphics.color.Color.toHex
dojo.graphics.color.Color.toString

color.toHex(); //返回"#000000"
color.toString(); //返回"#000000"

dojo.graphics.color.Color.toCss

color.toCss(); //返回"rgb(0,0)"

dojo.graphics.color.Color.blend

混合另一个颜色得到一个新颜色

color.blend('#ffffff',1); //返回[255,255,255]
color.blend('#ffffff',-1); //返回[0,0]
color.blend('#ffffff',0); //按1比1混合黑色和白色，返回[127,127,127]
颜色参数可以为颜色的任意形式，比如数组，字符串等

dojo.graphics.color.blend([0,0],[255,255],0); //will return [127,127]
dojo.graphics.color.blend("#000000","#ffffff",0); //will return "#7f7f7f"
若第一个参数为字符串，则返回值也会返回字符串

dojo.graphics.color.Color.blendHex

dojo.graphics.color.blendHex("#000000",0); //will return "#7f7f7f"

dojo.graphics.color.extractRGB

将输入转换为RGB数组

dojo.graphics.color.hex2rgb

将输入的字符串转换为RGB数组

dojo.graphics.color.rgb2hex

将输入的RGB数组转换为字符串

dojo.graphics.color.Color.fromArray

var color = dojo.graphics.color.Color.fromArray([0,1.0]);

模块：dojo.uri.Uri

dojo.uri.Uri

专门用来处理URI(统一资源标识符)的类

uri = (new dojo.uri.Uri("http://myserver/dojo/","guide.html")).toString();
//uri will be "http://myserver/dojo/guide.html"
uri = (new dojo.uri.Uri("http://myserver/dojo/","../guide.html")).toString();
//uri will be "http://myserver/guide.html"

RFC规定的URI语法：[scheme:][//authority][path][?query][#fragment]
authority语法：[user-info@]host[:port]

比如我们定义一个uri

var uri = new dojo.uri.Uri("http://user:password@myserver:80/dojo/","guide.html?page=1#top");

则uri的属性如下：

authority: 服务器名 "user:password@myserver:80"
fragment: 片断名 "top"
host: 主机名 "myserver"
password: 密码 "password"
path: 路径 "/dojo/guide.html"
port: 端口 80
query: 参数 "page=1"
scheme: 模式 "http"
uri: 完整的地址 "http://user:password@myserver:80/dojo/guide.html?page=1"
user: 用户名 "user:" 似乎有点问题，多了一个冒号

///////////////////////////////////////////////////////////////////////////////////////////

原文:http://daoger.javaeye.com/blog/43245 原文链接：https://www.f2er.com/dojo/291494.html

猜你在找的Dojo相关文章