Dojo:不容忽视的RIA框架

2005年5月,Ajax概念被第一次提出。而在此一年之前,Dojo框架已经写下了第一行代码。作为Ajax之前的“Ajax”框架,Dojo官网至今一直用着朴素的名字来定义自己:javascript toolkit。看上去仅仅是个工具集,而事实上它却有框架的力量,推进着大型Web2.0应用的开发。这也是Dojo一直给人的印象,低调、沉稳,却很强大。如果你仅仅想让WordPress页面的下拉菜单效果更加酷,我不反对用JQuery;但如果你需要以Web2.0技术为基础去架构一整个应用,那么Dojo一定是你的最佳选择。

为什么选择Dojo?

看完前一段,一定会有人说,Dojo给人的印象没有强大,只有庞大,难用以及糟糕的性能。这完全可以理解。Dojo文档的缺乏,社区的不活跃,相对严格的设计模式,让很多初学者难以上手,于是转投用起来更加友好的其它框架。这是一个偏见导致的恶性循环,造成用Dojo的人始终不多。而消除偏见,正是这个专栏的目的。

如果我们相信大公司CTO的眼光,不妨先看看Dojo的这些用户:

这只是Dojo用户的一小部分,实际用Dojo的公司更多,甚至中国的腾讯,百度。如果觉得这些公司的技术离自己很远,那么Java的Struct 2框架内置Ajax模块用的是Dojo,也许更能说明Dojo的价值。

为什么选择Dojo?这个问题其实很大,也许当你看完整个专题系列,心中自有选择。但在这里,我还是想先简单列出一些Dojo有吸引力的特性:

特性

描述

优秀的面向对象体系

类定义,多继承,基类方法调用,在Dojo中都设计的自然而合理。良好的OO体系,是大型应用的基础。

命名空间

和Java一样的命名空间管理,对应文件夹层次结构,让我们能有效管理大量源代码以及他们的依赖关系。

Dijit界面控件系统

Dijit是Dojo的最大特色,它很容易创建和使用,方便了界面模块化开发且易于维护;基于内容构建的天然特性更方便创建SEO优化的Ajax页面。

严格的设计模式

很多人说Dojo难用,严格的设计模式是一个重要原因。很多东西也许第一眼看上去不是很直观,但一但掌握,用这种风格写出的代码会非常容易扩展和维护。

灵活的单元测试框架

DOH是Dojo自带的测试框架,除了标准的函数级别单元测试,你还能用它自动控制鼠标移动和点击来进行自动的界面测试。而且DOH同样可以用于非Dojo框架的其它Ajax测试。

强大的构建工具

Dojo的Build工具其实有很多限制,需要遵循一定的编码规范,这为丰富的功能提供了前提。它能自动处理文件依赖关系,自动分离i18n文件,自动嵌入模板文件,让交付的系统运行的更快。

性能其实很优秀

性能很难对比,即使相同的一个Calendar控件,功能都会有差别。这里从2个点来看性能问题:DOM节点的查询速度,以及Dijit展现的速度。前者大家的功能完全相同,可以有个比较;后者则专属Dojo,看看绝对的性能。

(1)节点查询速度

JQuery最早引入基于CSS选择器进行DOM节点查找的机制,也是其最大特征。如今成为了各个框架都具备的功能。这应该算是最能体现Javascript算法设计的一点。下图来自于:http://blog.creonfx.com/javascript/mootools-vs-jquery-vs-prototype-vs-yui-vs-dojo-comparison-revised

是各个框架查询速度的对比,时间越少表示性能越好。虽然用的版本比较老,但在查询的实现上各个框架都没有太大的变化。

一图胜千言,Dojo的性能优势一目了然。如果你想亲自做这个测试,可以访问如下地址。

http://mootools.net/slickspeed/

(2)Dijit展现速度

Dijit是Dojo的界面展现体系,性能好坏直接决定着页面的响应速度。在声明方式下,Dojo需要遍历页面Html找到所有的Dijit进而创建并展现它们。这个过程比你的想像要快的多,Dojo的ThemeTester是一个很好的例子:

它的访问地址是:http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html

此页面包含了399个Dijit,全部通过声明方式创建。在FireFox3.6下总共的展现时间是2000ms左右,平均一个Dijit用时5ms。页面中包括了多个Tree,多个TabContainer,多个Menu以及富文本编辑器这样的复杂Dijit。因此,如果你发现你的界面远没有这么复杂,却展现的很慢,通常需要检查自定义的Dijit设计的是否合理。

综上所述,Dojo本身,包括自带的Dijit,拥有着相当不俗的性能。至于如何写出高性能Dijit,正如如何写出高性能的JQuery插件,需要的是经验和积累。

性能是软件开发的一个永恒话题,无处不在。没有一个统一的解决模式,桌面程序也好,Web程序也好,要提高性能,合理的设计、高效的算法永远是解决问题的王道。而Dojo在这一点上,绝不会是你的绊脚石。

开始使用Dojo

作为专栏的开篇,这里并不会详细介绍很多具体的技术细节。而是通过几个重要Dojo相关网站的介绍来了解Dojo,如下表所示:

网站

介绍

Dojo官网

本质上官网总是没有太多实际性的作用,作为一个产品门户,起到总体介绍的作用,内容相对很少,而且个人觉得Dojo官网的设计实在差强人意,很多过期内容,而且导航非常不便。

Dojo下载地址

在这里可以下载到所有的Dojo稳定版本,每个版本都有几个不同的包可供下载,以dojo1.5为例:

  1. dojo-release-1.5.0.zip
    Dojo标准包,已经压缩,可供生产环境直接使用。
  2. dojo-release-1.5.0-src.zip
    Dojo源代码,包含测试,build工具,开发环境使用,方便调试。另外这个包下面包含了所有的test case,通过它们能快速掌握各个控件的用法。
  3. dojo-release-1.5.0-docs.zip
    Dojo离线文档,内容与http://api.dojotoolkit.org基本相同,但没有在线的使用方便,一般直接看在线文档即可。
  4. dojo-release-1.5.0-demos.zip
    Dojo功能演示,其实这是非常直观的一块,可以看到很多很酷的用法,每个Demo都有具体的代码示例。下载解压后放到dojo同级目录即可使用。
  5. dojo-release-1.5.0-shrinksafe.zip
    Dojo的build工具,通常专用于Dojo,已经包含在src包里,如果要用于其它的Javascript程序打包,可单独下载。

在线API手册

经过改版,最近刚刚推出。相对于旧版本已经方便很多。可以查到所有类的属性,方法,事件的介绍和使用示例。

Dojo Campus

在这里能找到几乎所有的类或方法的使用guide,相当于Dojo的Wiki,内容不断更新。通常在google中搜索Dojo API,来自Dojo Campus的是最有价值的。

Sitepen

这是来自Dojo创建者的博客,里面会有Dojo相关的技术文章,也会有业界的一些观点文章。

Dojo中文博客

近期比较活跃的Dojo中文博客,包括原创内容以及国外Dojo技术文章翻译。翻译部分基本会同步于Sitepen的文章。

捷径:从Dojo Test Case学习Dojo控件用法

除了上述网站之外,有一个快捷学习使用Dojo的方法,就是看Dojo Src包下面的test case。在源代码包下面(例如dojo-release-1.5.0-src.zip),每个命名空间下都会有一个tests目录,这里面包含了每个控件或者工具类的各种用法的实例,通过它们能够快速上手它们的用法。例如:

http://yourhost/dojoroot/dijit/tests/test_Dialog.html,这个页面就展示了Dialog的各类用法。任何一个Test Case都是一个完整的Dojo环境,你完全可以模仿它写出自己的第一个Dojo程序。

从对象、事件、闭包看dojo对javascript的扩展

和任何一个Ajax库一样,Dojo对Javascript语言本身也做了扩展,例如用dojo.forEach来方便的遍历一个集合。因此如果熟悉了一个框架,上手Dojo基本上只需要熟悉不同的API命名方法,dojo的这些功能基本都在dojo命名空间下,通过dojo.doSomething()的形式来调用,或者dojo.string.doSomething()这样的形式。

在这个功能上我们从3个方面的例子来看dojo。

(1)面向对象支持

开始写代码之前,我们先为源代码位置指定一个命名空间,用如下代码:

dojo.registerModulePath('com.infoq', '../infoq');

第一个参数表示你的根命名空间,第二个是相对于dojo.js的目录。这样整个目录结构如下:

/script 
/dijit
/dojo
/dojox
/infoq

你可以注册多个命名空间到多个文件夹,方便组织源代码文件。这个结构和java非常类似,甚至比java少了com/infoq这样的多余目录。下面的代码就定义了一个Dojo类,这个类文件位于infoq/demo/Class1.js。代码中示例了继承,基类方法调用,构造函数的使用。

dojo.provide('infoq.demo.Class1'); //dojo特有,表明这个文件所属命名空间 
dojo.require('infoq.BaseClass'); //引入基类定义
dojo.declare('infoq.demo.Class1', [infoq.BaseClass], { //类定义
constructor: function(){
//构造函数代码逻辑
}
,doSomething: function(){
//调用基类infoq.BaseClass的doSomething方法
this.inherited(arguments);
}
});

示例中演示了Dojo的类定义,继承,基类方法调用的方法。可见其过程与传统面向对象的编程非常类似。Dojo中通常一个类就是一个文件,并且文件路径和dojo.provide声明的类路径严格对应。

(2)事件支持

Dojo事件系统最大的特点是统一了DOM节点的原生事件和自定义事件,例如:

var handler = dojo.connect(obj, ‘onLoad', callback);

这个onLoad可以是DOM节点的原生事件,也可以是obj对象的一个纯javascript方法,调用onLoad的参数也会传个callback方法。dojo.connect函数返回一个handler,可以用dojo.disconnect(handler)的方式取消一个事件的绑定。

(3)闭包及dojo.hitch

闭包是javascript的重要特色,它让函数回调的定义变的非常便捷。当年看到Prototype提供的Function.bind方法惊为天人,dojo中也提供了同样功能的函数:dojo.hitch。假设某对象的定义如下:

var obj = { 
doSomething: function(arg1, arg2, arg3){
//code
}
};

那么要把obj.doSomething进行一个闭包封装可以使用:

var callback = dojo.hitch(obj, 'doSomething', 'arg1Value');

那么执行:

callback('arg2Value', 'arg3Value');

完全等价于:

obj.doSomething('arg1Value', 'arg2Value', 'arg3Value');

可以看到dojo.hitch甚至可以连接2个部分的参数传递,这个功能非常有用。

忘掉$(id),看Dijit中如何使用DOM节点

$(id) 曾经是Prototype框架的特色,也是大家最为津津乐道的常用函数。后来各个框架均提供并加以扩展(JQuery中用于基于CSS选择器的节点选择)。dojo中也有一样的函数:dojo.byId(id)。但与其它框架对于$方法的不可或缺相比,dojo.byId使用非常少,因为它意味着对 DOM节点的紧密耦合。Dojo中严格的模块化设计思想极力避免紧密耦合的出现。

开发中用到DOM节点时,通常和UI相关,而Dojo中所有对UI的操作和渲染都抽象成Dijit的形式,对于复杂的UI结构,可以嵌套使用Dijit。创建Dijit有2种方式,一种基于已有DOM节点,另一种基于模板。

(1)使用已有DOM节点创建Dijit

首先自己定义一个Dijit:

dojo.declare('infoq.demo.SomeDijit', [dijit._Widget], { 
//dijit code
});

然后在页面中以声明方式创建实例:

 
 

那么在Dijit中的代码就可以用this.domNode来引用到这个节点。而不再需要通过dojo.byId的方式来获取DOM节点的引用。

(2)使用模板创建Dijit

顾名思义,模板定义了一个Dijit的骨架,假设有如下Dijit定义:

dojo.declare('infoq.demo.TemplatedDijit', [dijit._Widget, dijit._Templated], { 
templateString: dojo.cache('infoq.demo', 'templates/templated_dijit.html')
intro: 'demo template introduction'
//dojo.cache用于直接获得指定文件内容,会在build时自动嵌入代码
//templateString定义了一个dijit的模板内容
//other code
});

这就创建了一个基于模板的Dijit,模板文件位于script/infoq/demo/templates/templated_dijit.html(前面我们已经注册script/infoq对应于infoq命名空间)。假设模板文件内容如下:

 
 


${intro}


那么在页面上的Dijit就会以这个模板为骨架。在dijit代码中,可以使用this.imgAvatar来使用img节点。这里的 dojoAttachPoint就是模板dijit中的特有属性,用于获取模板中包含的DOM节点或者Dijit的引用。例子里模板文件中的${intro}则会直接被替换为实例对象的intro属性。

测试及Build工具

测试及Build是完整开发的重要组成部分,如果大家感兴趣,在后续系列中将详细介绍这两块内容,这里作一个简单的介绍:

(1)测试工具:D.O.H

DOH全称是Dojo Objective Harness,是一个基于Dojo的单元测试工具,具有如下特点:

  • 既能够测试基于Dojo框架的Ajax应用,也能够测试基于非Dojo框架的Ajax应用(老版本只支持Dojo框架的)。最新版本现在是0.9(独立于Dojo版本)。而且是08年就发布的,可见其还是相当稳定和够用的。
  • 能够将多个单元测试用例(多个javascript,html)文件,在同一个界面上集中展示测试结果。
  • 既可以在浏览器中运行测试,也可以用命令行的方式来运行测试,命令行方式仅限于纯javascript代码的测试。
  • 提供基于浏览器的Robot插件,用于模拟鼠标键盘操作,方便界面测试。

大家可以通过http://yourhost/dojoroot/util/doh/runner.htm来运行Dojo自身的单元测试,体验其强大的功能。下面是其运行结果截图:

(2)Build工具:Shrinksafe

ShrinkSafe同样独立于Dojo,但针对Dojo特别优化,用于打包和压缩Ajax应用。其主要提供了如下功能:

  • 自动处理源文件的依赖关系,打包多个文件到一个文件
  • 压缩javascript代码,去除注释,无用空白等
  • 处理及打包i18n文件
  • 自动嵌入dojo.cache引用的文件(如dijit的模板文件)

通常经过build过的代码,体积会减少30%左右,并且因为将多个文件打包成一个,大大加快了浏览器加载速度,让交付的应用程序运行的更快。

这就是Dojo

看完上文,相信大家对Dojo有了一个大概或者更深入的了解。一直以为Dojo是一款强大的工具,熟练掌握能让你的开发事半功倍。而Dojo的难用让它的用户相对较少,尤其是在国内。本文的目的正是希望通过对Dojo的系统性介绍,消除大家对Dojo的偏见,或者帮助那些想用Dojo的人用好Dojo。

如果大家有任何问题或建议,或者希望看到哪些具体的Dojo功能介绍,欢迎留下评论,会在后面的文章中针对热点问题进行详细介绍。

本文已经首发于InfoQ中文站,版权所有,原文为《Dojo:不容忽视的RIA框架》,如需转载,请务必附带本声明,谢谢。 
InfoQ中文站是一个面向中高端技术人员的在线独立社区,为Java、.NET、Ruby、SOA、敏捷、架构等领域提供及时而有深度的资讯、高端技术大会如QCon 、线下技术交流活动QClub、免费迷你书下载如架构师》等。​

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值