DOJO试用手记 - Enjoy Lucky Life Eternally - CSDNB...
来源:百度文库 编辑:神马文学网 时间:2024/03/29 19:12:16
1、前言
最近发现ajax很不错,由于它的存在,b/s结构的应用,在使用上与c/s结构的更接近了。至于什么是ajax,这就不是我所要说明的,不清楚的自己去网上搜索。
由于看ajax的东西,进而找到几个与此相关的框架。由于我是做java的,一般用eclipse,eclipse的编辑javascript的插件 JSEclipse中,有对dojo的支持,而我以前看的eclipse中对ajax的支持框架中也有dojo,所以,我就研究dojo了。
首先,当然是把整个框架下载下来,在http://dojotoolkit.org/download/里就可以下载到最近的dojo了。下完后,看了下demo,就开始满互连网的搜索关于dojo的东西,发现还真是不多,而且不是讲得很清楚,于是,就有想写点东西了。
下完后,将dojo.js和src里的东西都拷出来,就开始了dojo之旅。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2、Event System
首先接触到的,是dojo的Event System。
以前,我们是由页面控件触发一系列时间的时候,整个事件链要先定义好,然后才能按需要调用已经写好的调用模块,一旦要修改事件链,就不是那么容易了。由 一个函数调用另一个函数,能随便说要调用哪个吗?能在运行的时候很容易修改吗?除了那些大师级的人物,我相信我们这些菜鸟要解决这些问题,要费不少事。
在dojo中,其关注的事件不仅仅是Dom事件,它把任何的js方法调用都看作可以侦听的事件,这就把一切都统一到一个地方了。
我们都写过这样的代码:
1 var buttonNode= document.getElementById("button");
2 function foo()
3 {
4 alert("foo");
5 }
6 buttonNode.onclick = function()
7 {
8 foo();
9 }
要调用foo函数,需要这么写,如果说接着我还要调用一个函数呢?那么,就需要重写buttonNode的onclick事件函数,把以前的都再写一遍,如果我还要再调用呢。。。。
我们来看看dojo中是怎么解决的,看下面的一句
1 dojo.event.connect(buttonNode,"onclick","foo");
就这么一句,就绑定了触发函数,想再加?那就继续用dojo.event.connect(buttonNode,"onclick","foo2")...
还有这么一种写法:
dojo.event.connect(handlerNode, "onclick", function(evt){
//
});
上面是buttonNode绑定一个函数,如果要与某对象的某个函数绑定的话,就用
dojo.event.connect(buttonNode, "onclick", object, "handler");
object是目标对象,handler是目标对象的函数,这里要注意,object不仅仅是页面控件,一切对象皆可行,就又回到“关注的事 件不仅仅是Dom事件,它把任何的js方法调用都看作可以侦听的事件”。要解除绑定的话,就可以使用dojo的disconnect方法,调用参数一定要 与connect一致,即可解除之前的绑定操作。
dojo中connect函数的参数有下面几种: object, name, name
object, name, function pointer
object, name, object, name
再看看这段:
1 var exampleObj = {
2 counter: 0,
3 foo: function(){
4 alert("foo");
5 this.counter++;
6 },
7 bar: function(){
8 alert("bar");
9 this.counter++;
10 }
11 };
12
13 dojo.event.connect(exampleObj, "foo", exampleObj, "bar");
14
15
最后一句的作用是什么?使得执行exampleObj的foo函数之后,执行exampleObj的bar函数,一切对象皆可绑定!
为了防止不经意间对事件的多处绑定,造成连锁调用。Dojo提供关键字链绑定,比如可以只绑定一次:
1 dojo.event.kwConnect({
2 srcObj: exampleObj,
3 srcFunc: "foo",
4 targetObj: exampleObj,
5 targetFunc: "bar",
6 once: true
7 });
同样,对应也提供了一个kwDisconnect()方法来进行关键字绑定的解除。
在connect()和KwConnect()中,可以实现延迟执行和循环执行。
KwConnect()中,只需要加一个delay属性就可以了,测试代码如下: 1
2
3 New Document
4
5
6
7
8
9
10
11
12
13
14
39
40
由上面的延迟,可以想到,如果目标等于源的话,那么就是一个循环执行!
据说在connect()中,延迟信息在它的第九个参数,具体怎么样,我还没去试。
上面是在事件发生后调用目标,如果要在发生前呢?就是下面的东西了:
dojo.event.connect("before", exampleObj, "foo", exampleObj, "bar");
很容易理解吧,我就不多说了。在KwConnect中,就是
dojo.event.kwConnect({
type: "before",
srcObj: exampleObj,
srcFunc: "foo",
targetObj: exampleObj,
targetFunc: "bar"
});
默认情况下,connect()中第一个参数就是"after"了,同理KwConnect中的type默认是"after"。
下面要说的是方法包装。当我们想改变方法的输入输出时,一般情况下是直接去修改代码,那么,如果不修改原方法怎么办呢?在dojo中,也给出了解决方法,就是用Around advice包装方法。下面是一个例子:
New Document
最近发现ajax很不错,由于它的存在,b/s结构的应用,在使用上与c/s结构的更接近了。至于什么是ajax,这就不是我所要说明的,不清楚的自己去网上搜索。
由于看ajax的东西,进而找到几个与此相关的框架。由于我是做java的,一般用eclipse,eclipse的编辑javascript的插件 JSEclipse中,有对dojo的支持,而我以前看的eclipse中对ajax的支持框架中也有dojo,所以,我就研究dojo了。
首先,当然是把整个框架下载下来,在http://dojotoolkit.org/download/里就可以下载到最近的dojo了。下完后,看了下demo,就开始满互连网的搜索关于dojo的东西,发现还真是不多,而且不是讲得很清楚,于是,就有想写点东西了。
下完后,将dojo.js和src里的东西都拷出来,就开始了dojo之旅。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2、Event System
首先接触到的,是dojo的Event System。
以前,我们是由页面控件触发一系列时间的时候,整个事件链要先定义好,然后才能按需要调用已经写好的调用模块,一旦要修改事件链,就不是那么容易了。由 一个函数调用另一个函数,能随便说要调用哪个吗?能在运行的时候很容易修改吗?除了那些大师级的人物,我相信我们这些菜鸟要解决这些问题,要费不少事。
在dojo中,其关注的事件不仅仅是Dom事件,它把任何的js方法调用都看作可以侦听的事件,这就把一切都统一到一个地方了。
我们都写过这样的代码:
1 var buttonNode= document.getElementById("button");
2 function foo()
3 {
4 alert("foo");
5 }
6 buttonNode.onclick = function()
7 {
8 foo();
9 }
要调用foo函数,需要这么写,如果说接着我还要调用一个函数呢?那么,就需要重写buttonNode的onclick事件函数,把以前的都再写一遍,如果我还要再调用呢。。。。
我们来看看dojo中是怎么解决的,看下面的一句
1 dojo.event.connect(buttonNode,"onclick","foo");
就这么一句,就绑定了触发函数,想再加?那就继续用dojo.event.connect(buttonNode,"onclick","foo2")...
还有这么一种写法:
dojo.event.connect(handlerNode, "onclick", function(evt){
//
});
上面是buttonNode绑定一个函数,如果要与某对象的某个函数绑定的话,就用
dojo.event.connect(buttonNode, "onclick", object, "handler");
object是目标对象,handler是目标对象的函数,这里要注意,object不仅仅是页面控件,一切对象皆可行,就又回到“关注的事 件不仅仅是Dom事件,它把任何的js方法调用都看作可以侦听的事件”。要解除绑定的话,就可以使用dojo的disconnect方法,调用参数一定要 与connect一致,即可解除之前的绑定操作。
dojo中connect函数的参数有下面几种: object, name, name
object, name, function pointer
object, name, object, name
再看看这段:
1 var exampleObj = {
2 counter: 0,
3 foo: function(){
4 alert("foo");
5 this.counter++;
6 },
7 bar: function(){
8 alert("bar");
9 this.counter++;
10 }
11 };
12
13 dojo.event.connect(exampleObj, "foo", exampleObj, "bar");
14
15
最后一句的作用是什么?使得执行exampleObj的foo函数之后,执行exampleObj的bar函数,一切对象皆可绑定!
为了防止不经意间对事件的多处绑定,造成连锁调用。Dojo提供关键字链绑定,比如可以只绑定一次:
1 dojo.event.kwConnect({
2 srcObj: exampleObj,
3 srcFunc: "foo",
4 targetObj: exampleObj,
5 targetFunc: "bar",
6 once: true
7 });
同样,对应也提供了一个kwDisconnect()方法来进行关键字绑定的解除。
在connect()和KwConnect()中,可以实现延迟执行和循环执行。
KwConnect()中,只需要加一个delay属性就可以了,测试代码如下: 1
2
3
4
5
6
7
8
9
10
11
12
13
14
39
40
由上面的延迟,可以想到,如果目标等于源的话,那么就是一个循环执行!
据说在connect()中,延迟信息在它的第九个参数,具体怎么样,我还没去试。
上面是在事件发生后调用目标,如果要在发生前呢?就是下面的东西了:
dojo.event.connect("before", exampleObj, "foo", exampleObj, "bar");
很容易理解吧,我就不多说了。在KwConnect中,就是
dojo.event.kwConnect({
type: "before",
srcObj: exampleObj,
srcFunc: "foo",
targetObj: exampleObj,
targetFunc: "bar"
});
默认情况下,connect()中第一个参数就是"after"了,同理KwConnect中的type默认是"after"。
下面要说的是方法包装。当我们想改变方法的输入输出时,一般情况下是直接去修改代码,那么,如果不修改原方法怎么办呢?在dojo中,也给出了解决方法,就是用Around advice包装方法。下面是一个例子: