编写自己的dojo扩展
Posted by Nicholas Ding on 12th 八月 2006
前言
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的资源: