Dojo是一个用javascript语言实现的开源DHTML
工具包
原意
A school for training in Japanese arts of self-defense, such as judo(柔道) and karate(空手道).
柔道训练学校,柔道馆,道馆。
发音:“豆粥”
定义
Dojo能够让你更容易使Web页面具有动态能力,或者在任何能够稳定支持JavaScript语言的环境中发挥作用。
基金会
dojo基金会是一个在501条款下组建的非盈利性组织用来帮助
开源项目的开发。该基金会的宗旨是鼓励企业来应用它旗下的开源项目,并鼓励基金会资助的项目之间的合作。
IBM和
Sun都宣布了对dojo的官方支持,包括向dojo开源项目贡献代码。
Zend公司,PHP核心代码背后的公司,也宣布了与dojo基金会的合作关系,表示要将它引入Zend框架
基金会的赞助者和成员包括
IBM
Sun Microsystems
SitePen
Renkoo
TurboAjax
OpenLaszlo
Nexaweb
Bea Systems
dojo基金会也资助dojo toolkit之外的下列项目:
Persevere
OpenRecord
Cometd
DWR
Lucid Desktop
快速安装
至此,安装完成,DOJO的详细使用方法,请参考DOJO官方文档。
发展历史
在2004年初, Alex Russell (netWindows的原作者)开始在Informatica公司内寻找一个在DHTML项目的一个合作者。这个过程中,许多DHTML社区的成员都被他联系到了。这些沟通最终引出了一封题为“宣传DHTML的未来”的邮件。David Schotzler, Dylan Schiemann也与同年加入了Informatica公司。所以Dojo的最初的代码是有Alex和Dylan在Informatica的支持下写的。在Dojo早期,有许多成员都积极参与了开发,并逐渐形成了dojo今天的方向,他们是Joyce Park, Tom Trenka, Mark Anderson, Leonard Lin (最初提议用Dojo这个名字的人), Aaron Boodman, Simon Willison, Cal Henderson, and Dan Pupius.
社区成员们最初几个月在ng-html邮件列表上讨论了关于授权协议,项目名称,编码规范,构建工具,
服务器配置和用户需求之后,真正的工作开始了,dojo基金会也宣告成立。基金会是一个501实体,用来保管项目代码和知识产权,今天基金会也资助其他一些项目。dojo的贡献者来自超过60个开发者,许多的公司,主要的用户包括IBM,AOL, Sun, SitePen,
Bloglines, Google, Nexaweb。
特征
Dojo有以下的特征:
1、利用Dojo提供的组件,你可以提升你的web应用程序可用性、交互能力以及功能上的提高。
2、也可以更容易的建立互动的用户界面。同时Dojo提供小巧的动态处理工具。
3、利用它的低级API和可兼容的代码,能够写出轻便的、单一风格(复杂)的JavaScript代码。Dojo的事件系统、I/O的API以及通用语言形式是基于一个强大
编程环境。
4、通过Dojo提供的工具,你可以为你的代码写命令行式的
单元测试代码。
5、Dojo的扩展包能够使你自己的代码更容易维护,
耦合性更低。
Dojo通过很少的代码完成了以上的功能。当你写脚本时,只需要包含很少的js文件,也可以选择的(包含)下载dojo提供的庞大的功能。
版本
最新版本:1.10
Dojo 1.5.0 于2010 年7月15日正式发布。此次发布的1.5.0版是dojo的第11个主要版本。此次发布包括了许多更新,具体包括:
新的用户界面
新版本的Dojo 提供了许多重大的界面改进,使用了新的Claro 主题。Claro 主题为Dojo 的用户界面库Dijit提供了现代,专业的界面风格。 这一主题包含了许多渐变透明背景,阴影以及CSS 动画特效(在WebKit 和基于Mozilla 的浏览器中可用)
新的主题体现了“简单好用”的设计原则,并且极大的简化了了用户自己定制主题CSS的难度。因此用户可以很容易的创建出属于自己的风格,比如留白和色彩,而不用去设计新的背景图片。与此同时,这些新的风格都被应用到了不断增长的UI控件之中。
新版的Dojo 还提供了门户网站布局机制,例如 “personalized Orange home page ”。用户可以快速创建自定义的应用界面。新版的Dojo 中还对矢量图形,图表控件 和绘图控件 做了许多增强, 包括 新的主题,渐变填充 等。新的dojox.gfx (图形图象包)在现有的支持SVG ,VML ,Canvas ,Flash 和Silverlight 之外增加了针对SVGWeb 的支持。因此你的图形代码可以根据浏览器而自动选择合适的底层引擎获得最大效率,同时也可以最大限度的保证
浏览器兼容性。
稳定,兼容的Dojo 核心
Dojo core( 核心库) 一直非常稳定,因此从以前版本的Dojo 升级会非常顺利,同时新版的Dojo core 也做了许多改进。 新增加了dojo.Stateful API , 改进了dojo.Deffered API ,新增加了一种基于“承诺机制” api 。
简而言之,Dojo core 核心库提供了你构建Web 应用必须的几乎所有基础功能。
HTML5 & CSS3
Dojo 中支持许多HTML5 的特性,其中有些特性的加入甚至早于任何浏览器对它们的支持,例如本地存储。针对HTML5 的新功能,Dojo的策略是尽可能的包装浏览器的功能,修正浏览器功能的小错误,增加API 的功能,简化用法,并且对旧版本的浏览器提供一种兼容的方案。其他功能的增强还包括,所有基于文本框的控件都增加了占位提示文本,新的dojox.style 扩展 用于支持CSS 转换,本地存储,富文本编辑器 ,多文件的上传,图形API 对Canvas 和SVG 的支持。
Dojo 移动
移动应用开发领域的发展飞速,其变化演进的速度远远超出了我们对Dojo 核心保持稳定的承诺。因此在Dojo中有许多新的计划正在积极进行中,目标是解决开发移动应用的时的各种难题。我们希望能够同时解决两种移动应用的类型:一种是移动的Web应用(运行在浏览器中),另一种是本地安装的移动应用,但其中嵌入浏览器。下面一系列的新计划或项目正在开展中,有些属于Dojo工具包,有些则属于Dojo 基金会:
dojox.mobile : 轻量级的移动应用组件
dojox.mobile.app : 移动应用开发框架
embedjs : 为移动应用优化的Dojo API
TouchScroll : 为WebKit 移动版定制的滑动抽象层
wink : 移动应用程序工具包 (wink 是一个新加入dojo 基金会的项目)
浏览器支持
Dojo 支持几乎所有现代的浏览器,官方正式支持并经过测试的
浏览器包括: Chrome 5, Firefox 3.5 and 3.6;Internet Explorer 6, 7, and 8; Opera 10.6 (Dojo Core only); Safari 4.1and 5. 其他的浏览器版本虽然未经官方正式声明支持,在绝大多数情况下Dojo 也可以在上面运行的很好。
性能和稳定性
Dojo 始终是性能评价最好的几个Ajax 工具包之列,我们还提供了工具来帮助你扩展的应用程序去提升性能。不管你使用哪种开发工具包都有可能碰到性能问题,而Dojo 的社区的存在以及Dojo 背后的许多的厂商都会帮助你诊断和解决你所遇到性能问题。
整合与集成
无论你曾使用过哪种HTTP 兼容的服务器端环境: Zend Framework, Spring, Persevere, Node,Narwhal, cometD-Jetty, DWR, Compuware Uniface, Ruby on Rails, Django,WebSphere, Apache, IIS, Dojo 都很容易与这些框架或技术进行集成。
Dojo 也提供了与Adobe AIR 1.5、 2.0 , Appcelerator Titanium, PhoneGap 的集成,并且提供了与各种开发环境的集成接口包括: aptana studio, Komodo, Elicpse 等等。
文档与技术支持
Dojo 官方站点有完整的文档,而活跃的社区论坛为用户提供技术支持。如果需要职业的支持与咨询,Sitpen 是一家会为你提供Dojo 技术服务与咨询的公司。
开始下载并试用Dojo1.5 吧,告诉我们你的感受,也告诉我们你用Dojo 构建了哪些了不起的应用!
Dojo 基金会
Dojo 工具包是Dojo 基金会的一部分。在Dojo 工具包之外,基金会迎来了3 个新项目的加入 Zazl , AnimeJ , 和wink . 基金会的其他项目cometD-Jetty 发布了2.0 版本,而 Persevere 2.0 beta 版将于2010年夏发布。
------------旧版信息----------
请大家下载dojo 0.3.1, 以下的说明均针对此版本
1: 把Dojo加入到我们的Web程序中
1.1 标志
djConfig是Dojo里的一个全局对象, 其作用就是为Dojo提供各种选项, isDebug是最常用的属性之一, 设置为True以便能够在页面上直接看到调试输出, 当然其中还有些属性与调试有关, 这里就不啰嗦了
1.2 引用 dojo 的启动代码
你就把这些代码当成是java的import语句或C#中的using语句一样, 如果你不require的话, 而模块本身又没有整合在dojo.js中, 是会出现
脚本错误的喔
2. 针对不同需求提供的预整合包
Dojo本身是由许多模块所组合而成的, 但是由于用户需求的多样性, dojo针对不同的需求而提供了不同的版本, 用户在下载dojo的时候就看见可以选择很多的版本, 比如Ajax版和Widget版, 每个版本最重要的区别就在于dojo.js文件, 但是除此之外, 每一个版本都是全功能的, dojo.js根据版本的不同而整合进了不同的模块
......
模块
Dojo的代码被划分为
逻辑单元称之为模块, 这有点类似于Java中的package,除了dojo的模块能够包含类 (类似于java中的classes)和简单函数
注意名称约定, 函数的首字母为小写字母,类的首字母为大写
包
在多数情况下, dojo的模块只需要定义在一个文件就可以了, 但有时, 一个模块可能划分到多个文件, 比如: 模块dojo.html, 本来是定义在一个文件中, 可是由于功能的增强, 文件逐渐变大, 我们不得不将其拆分为多个文件, 这主要是为性能考虑, 以便浏览器可以只下载其需要用到的代码, 不幸的是其实现细节对于dojo的用户看起来不那么透明, 你必须知道你想要用到的功能到底是包含在哪个文件, 然后才能require并使用它,这样的每一个文件都称之为一个包
作用
Dojo让你更容易使web页面具有动态能力,或在任何稳健的支持javascript语言的环境中发挥作用。
a、利用dojo提供的组件,你可以提升你的web应用程序可用性、交互能力以及功能上的提高;
b、你也可以更容易的建立degradeableuserinterfaces??,dojo提供小巧的widgets,animatetransitions;
c、利用它的低级APIs和可兼容的代码,写出轻便的、单一风格(复杂)的javascript代码,Dojo的eventsystem,I/OAPIs,and generic language enhancement form the basis of a powerful programming environment.
d、通过Dojo提供的工具,你可以为你的代码写命令行式的单元测试代码。
e、the Dojo package system使你自己的代码更容易维护,耦合性更低。
Dojo通过很少的代码完成了以上的功能。(以后可能我详细说说dojo的packagesystem,只需要三个js文件)。当你写脚本时,只需要包含很少的js文件(大小)。也可以选择的(包含)下载dojo提供的庞大的功能。Dojo provides Multiple Points Of Entry,Interpreter Independence,Forward Looking APIs,and focuses on Reducing Barriers To Adoption.
dojo试图建立一种新的标签语言DojoML。目标是,在DojoML和javascript
脚本语言不变的情况下,用不同的render方式展示数据,Renderingsmaybemadeavailableinseveralrenderingcontexts(suchasSVG,orperhapseventhedesktoporFlash)。(比较美好啊)更进一步,theDojoML剖析器可以接受html和svg为输入,容易的建立DegradeableResponsiveApplications
解说
djConfig是dojo内置的一个全局设置对象,其作用是可以通过其控制dojo的行为
首先我们需要在引用dojo.js前声明djConfig对象,以便在加载dojo.js的时候才能够取得所设置的值,虽然在0.3版本以后dojo支持在加载后设置,但是强烈建议你把声明djConfig的代码作为第一段script
一个完整的djConfig对象定义如下(值均为dojo的默认值)
vardjConfig={
isDebug:false,
allowQueryConfig:false,
parseWidgets:true
searchIds:[],
iePreventClobber:false,
ieClobberMinimal:true,
preventBackButtonFix:true,
};
isDebug是一个很有用的属性,顾名思义,如果设置为真,则所有dojo.Debug的输出有效,开发时应该设置为true,发布时应该设置为false.
debugContainerId同样也是与调试有关的,如果不指定的话,调试信息将会直接利用document.write输出,这样可能会破坏页面的整体布局,所以你可以指定任何一个可以作为容器的html元素的id作为调试信息输出容器
allowQueryConfig,这个属性指明dojo是否允许从页面url的参数中读取djConfig中的相关属性,当值为true时,dojo会优先从url参数中读取djConfig的其他属性,比如:http://server/dojoDemo.htm?djConfig.debugContainerId=divDebug
baseScriptUri,一般不需要设置,dojo会自动根据你引用dojo.js的路径设置这个值,比如,,自动获取的值便是../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文件,这样应该是最方便的。
对象方法
这里所说的基础对象和方法是指的不Require任何包就能够调用的对象和方法
在开始前,介绍一下js里的匿名函数,这个在阅读dojo的
源代码的时候,会发现到处都有匿名函数
;(function(){
alert(123);
})();
//前面的分号是一个
空语句,是可以不要的匿名函数。一个匿名函数就是一个没有名字的函数。可以认为他们是一次性函数。当你只需要用一次某个函数时,他们就特别有用。通过使用匿名函数,没有必要把函数一直放在内存中,所以使用匿名函数更加有效率。当然你也可以根本不定义函数,但是使用
匿名函数可以把你的代码分段,就像C#中的#region一样
dojo.byId
非常有用的一个方法,与
prototype.js的著名的$一样,似乎以前的版本还有dojo.byIdArray,不过最新的版本已经找不到这个函数了(除了srccompat.2.2.js)。
如果有多个元素具有指定的id,则返回的是一个集合
UsageExample:
dojo.version
dojo的版本,可以取得major,minor,patch,flag和revision
这个对象没什么太大用处,除非你要根据dojo的版本选择执行你的代码
dojo.raise
??抛出一个异常
dojo.errorToString
??将异常转换为字符串
??UsageExample:
try
{
}
catch(e)
{
alert(dojo.errorToString(e));
}
dojo.render
??系统环境对象
dojo.rendere返回browser,说明是工作在浏览器下
dojo.render.ver返回4,似乎没什么用
dojo.os.win返回true说明操作系统是Windows
dojo.os.linux返回true说明操作系统是Linux
dojo.os.osx返回true说明操作系统是MacOS
dojo.html返回true说明浏览器是InternetExplorer
dojo.html.opera返回true说明浏览器是Opera
dojo.html.khtml返回true说明浏览器是Konqueror
dojo.html.safari返回true说明浏览器是Safari
dojo.html.moz返回true说明浏览器是MozillaFireFox
dojo.svg.capable返回true说明浏览器支持svg
dojo.vml.capable返回true说明浏览器支持vml
dojo.swf.capable返回true说明浏览器支持swf
dojo.swt.capable返回true说明浏览器支持swt(IBM开发的StandardWidgetToolkit)
如果dojo.html为true的话
dojo.html50返回true说明浏览器是IE5.0
dojo.html.55返回true说明浏览器是IE5.5
dojo.html.60返回true说明浏览器是IE6.0
dojo.html.e70返回true说明浏览器是IE7.0
dojo.addOnLoad
可以加载指定函数到window.load时执行,好处就是可以很方便的在window.load时执行多个函数
UsageExample:
dojo.addOnLoad(init);//init是一个函数
dojo.addOnLoad(myObject,init);//init是myObject对象的一个方法
dojo.require
如果你想调用一个模块的对象的时候,你应该首先用dojo.require来请求这个模块,dojo会根据你的请求自动取得相应的js文件,并加载到内存中,这样你才能调用或创建其中的对象
dojo会自动维护已加载的模块列表,所以是不会重复加载模块的
UsageExample:
dojo.requireIf=dojo.requireAfterIf
可以根据指定的条件来决定是否加载指定的模块
UsageExample:
dojo.provide
除非你要开发自己的模块,不然是用不到这个方法的,你可以这句看成是向系统注册这个模块名称。
UsageExample:
dojo.exists
判断指定对象是否具有指定名称的方法
UsageExample:
dojo.hostenv.getText
返回指定url的内容
PS:由于浏览器的安全限制,因此只能用于取得同域名的url的内容,否则会报告权限不够
UsageExample:
aSync=false;//同步,确保返回内容不为null
silent=true;//不抛出错误
alert(s);
dojo.debug
输出调试信息,如果在djConfig中指定了debugContainerId,则输出到指定的console容器中,否则直接document.write。
所有的调试信息均以DEBUG:开头
UsageExample:
dojo.hostenv.println
与dojo.debug类似,不同的是,输出内容没有DEBUG:
UsageExample:
dojo.debugShallow
输出指定对象的全部信息(Shallow说明并不会遍历到下一级别的对象属性)以供调试
UsageExample:
dojo.debugShallow(dojo.render.html);
性能优化
1.编译合适的dojo文件。
dojo十分“巨大”,而且有很多文件是最终用户不需要使用的。
默认情况下的dojo.js比较大,有200多k,但是如果自定义进行编译之后可能只有10多k。
而且将常用的模块编译到dojo.js也能提高效率。
dojo的加载顺序如下:
1).浏览器加载dojo.js
dojobootstrpcode
dojoloader
(optionally)frequentlyusedmodules
2).dojo.js激活Dojo对象,动态的载入其他的module,如果模块已经载入,那么将不会再一次重新载入。
dojo提供了一系列典型的编译方案可以选择。
dojo的编译可以减少文件的下载数目,可以使文件大小显著的减少。
2.减少widget的使用。
每加载一个dojo的widget都需要额外的时间,所以当然使用越少dojo控件,速度就越快。
3.使用新版本的dojo,建议1.0以上。
新版本对性能进行了优化,减少了bug,所以尽量选用新的稳定版本。
4.减少htmltag,每增加一个tag,性能的负担就越重,比如
使用xxxxxxx
就不如用xxxxxxx
5.优化widget的加载
dojo在页面加载的时候将分析整个
HTML文件,自动加载指定的内容为dojo控件。即使你没有定义任何dojo控件。所以优化widget的控件能够显著的提升一个页面加载的性能。
如果页面载入花费的时间比较多,你觉得不正常,可以用Firebug看看是不是页面载入的时候花费很多时间在dj_load_init()或者modulesLoaded()这些地方,这些都是明显的信号表明我们需要留意widget的加载问题。
dojo提供了多种方式来控制widget的加载。其中最重要的就是它提供了跳过所有widget解析的方法,只需要加入下面的代码到dojo.js引入之前:
djConfig={parseWidgets:false,searchIds:[]};
djConfig={parseWidgets:false,searchIds:[]};
那么如果需要解析一部分widget怎么办呢?下面的方法可以指定需要解析那些widget。只需要将需要解析的widget的id放到searchIds:
上面的代码一共解析了3个dojowidget,其中前两个直接放到searchIds,而第三个则动态的加入到searchIds。
如果你不喜欢searchIds的方式,还有一种方式提供选择,给控件加上parseWidgets='false'属性:
Dojowidgetparser将不会运行到这里,因为我们已经告诉他忽略这里。
通过上面的方式,相信你的dojo性能能够得到显著的提升,如果仍然达不到性能要求,那么可能你只能放弃dojo,或者让客户进行机器的升级了。。