2007-09-03

dojo学习笔记 (一)

最近几天开始学习dojo 0.9.0, 主要是看它的源码和测试样例, 以下是这几天的研究成果

一、 dojo 概述
我用的是dojo 0.9.0, 下载压缩包解压后有四个文件夹, 依次为:
dijit: 提供了很多ui控件, 被称为widget。
dojo: 提供了很多跨浏览器的实用函数,
dojox: 似乎是提供了一些插件性质的东西, 我只对dojox.flash有点了解
util:里面只有个doh, 功能不明

二、 dojo库的使用
首要的是在html里导入dojo.js文件, dojo加载支持很多参数, 其中我目前用到的有parseOnLoad和isDebug. 设定参数的方法有两种, 一种是在导入dojo.js前通过javascript建立一个对象djConfig,包含要设定的键值对,如djConfig={isDebug:true}; 另一种是在<script>标签里加入djConfig属性,值为JSON语法的键值对, 如<script djConfig="isDebug:true" src="dojo.js"></script>
一开始我对于后一种方法感到很神奇, 起初我以为javascript可以获得自己所在标签的信息, 后来看dojo.js, 查找djConfig, 发现它一上来就判断djConfig是否存在, 否则就建立新值,这时我认为djConfig标签可以作为一个对象在javascript中可以访问, 但亲自尝试后发现并不行。于是我甚至认为这是dojo的一个bug, 但在随后的研究中我发现它确实起作用,于是不得不再认真得看dojo.js(当然是dojo.js.uncompressed.js), 发现原来它会遍历所有script标签,并对导入dojo的标签的djConfig进行处理, 实际上就是加上一对括号然后eval一下。 此时我才恍然大悟。
再说说那两个参数, isDebug不必多说, parseOnLoad是指定dojo.js是否在html加载完毕后进行扫描,识别通过标记方法声明的对象(比如dijit的widget就都支持这种声明, 十分方便)如<div dojoType=dijit.form.Menu> </div>

三、dojo库的几个常用函数
1.dojo.connect(source_obj, event, func)或dojo.connect(source_obj, event, target_obj, target_method)
这个函数相当于把自定义的函数绑在source_obj.event上, 当此事件发生(即这个函数被调用)后,便会调用source_obj.func或target_obj.target_method, 而传进去的参数跟source_obj.event得到的参数相同。
这个函数十分方便, 也是我最早听说的几个dojo实用函数之一, 但关于其实现方法, 我是看了源码才明白。

2.dojo.provide(package_name)
这个是声明当前js提供的包名, 与dojo.require配合使用

3.dojo.require(package_name)
这个指定导入一个包, 这也是十分有用的, 一个是它非常智能, package_name一般为A.B.C的格式,我们暂且称A为bass_name, 它会根据A找到基准目录, 默认是按dojo.js所在路径加上../A,不过也可以用dojo.registerModulePath注册自定义的路径(dojo已内置了一些包的路径, 如dojo, doh)。有了基准路径后, 它会首先尝试B/C.js, 看是否成功, 否则再试B.js,如果有多极, 就逐层往上退。 如果一直找不到就报错。
另一个有用的地方是它可以实现动态导入和避免重复导入, 这一方面非常适合动态的Ajax, 又保证了性能。

4.dojo.declare(class_name, base_class, properties)
dojo提供的一个OOP机制, 而这个是声明一个新类, 举例说明:
dojo.declare("son", father, {
constructor:function(){
alert("hi");
}
});
这样就声明了一个名为son的类, 父类为father, 以后可以用 new son()来创建一个实例
另外base_class可以为null或数组, 后者时,里面必须全为function对象, 以后第一个元素为新类的父类, 其他类只是为了继承其方法。
关于继承, 首先constructor是构造函数, 不会覆盖父类的构造函数, 并且父类的构造函数会被自动调用, 而其他函数则会覆盖父类的。
此外, properties中也可以定义成员变量。

5.dojo.body(), dojo.doc
前者返回body的DOM node, 后者是当前document对象, 一般就是当前的document, 不过由于可以设置整体的上下文, 如dojo.setContext, 所以在dojo框架下应该尽量使用dojo.doc

6.dojo.byId(id_string)
应该比document.getElementById有所增强, 但无论如何, 精致的名字也是诱人之处。

当然还有很多其他函数, 比如dojo.io.bind。 只是我现在还没看到网络通信部分, 等下次再补上吧。

四、dijit库的使用
dijit库的函数我主要是用的dijit.byId, 注意他和dojo.byId的不同, 这里是根据id返回已经生成的dijit的widget对象, 并不是DOM node

dijit提供的控件主要有两种生成方法, 一种是用javascript直接生成, 如new dojo.form.Button(null, node), 另一种是在html中作标记, 如<button dojoType=dijit.form.Button label="button"></button>
关于其生成widget的机制, 我目前所知是它从原始DOM节点中获取信息, 如id, label, dojoType之类, 然后据此生成一个widget, 它本身应该是绑定了一个自己的DOM节点, 最后再将它替换原始DOM节点。

根据dijit.js,在创建一个widget过程中会调用如下几个函数
postMixInProperties: 刚刚从原始节点读入信息后调用, 如果扩展已有widget,可通过connect此函数来为widget对象添加新的属性(每个widget只从原始DOM节点(可用this.srcNodeRef得到其引用)中获取需要的节点, 其他的一概抛弃, 如果需要扩展, 要在销毁前得到它,而这里所列的几个函数中,仅有此函数执行时srcNodeRef尚未背销毁)
buildingRendering:刚刚为当前widget创建好DOM节点时调用
postCreate: 当前widget已创建好并放入UI后调用
startup: 所有widget都创建好后依次为每个widget调用此函数

尽管dijit提供了非常丰富的控件, 但也未必就能满足全部需要。 因此有时需要在现有控件基础上进行扩展。这时上面三个函数就显得非常有用。 不过需要注意的是, 用dojo.declare声明一个子类时, 不能直接重定义上面三个函数,否则父类的方法会被覆盖, 而且dojo似乎没有提供super之类的属性。 我的解决方法是用dojo.declare声明时仅添加新函数,而之后再用dojo.connect对已有函数进行扩展。 如果用此方法, 需要注意, 如果新类叫childClass, 那么应该connect childClass.prototype的方法, 我一开始忘了这一点, 结果怎么都不起作用。

五、其他
dojo与Firebug支持得非常好, 它能自动识别Firebug并与其交互, 再配合Firebug的强大功能, 开发javascript 轻松了很多

六、总结
通过几天的学习, 我对dojo库的基本思想和基本实现方法都有了些了解, 也十分欣赏和钦佩它的结构。它充分利用了javascript的灵活性, 创造了很多异想天开般的设计, 令我大开眼界
就先写这么多, 能些的也就是这么多了。 随着学习的深入, 我会再补充这个学习笔记的。
发表评论