首先接触到的，是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 }
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
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 });
2 srcObj: exampleObj,
3 srcFunc: "foo",
4 targetObj: exampleObj,
5 targetFunc: "bar",
6 once: true
7 });
同样，对应也提供了一个kwDisconnect()方法来进行关键字绑定的解除。
在connect()和KwConnect()中，可以实现延迟执行和循环执行。
KwConnect()中，只需要加一个delay属性就可以了，测试代码如下：
1 <HTML>
2 <HEAD>
3 <TITLE> New Document </TITLE>
4 <META NAME="Generator" CONTENT="EditPlus">
5 <META NAME="Author" CONTENT="">
6 <META NAME="Keywords" CONTENT="">
7 <META NAME="Description" CONTENT="">
8 <script type="text/javascript" src="dojo.js"></script>
9
10 </HEAD>
11
12 <BODY>
13 <INPUT TYPE="button" id="eee" value="test">
14 <script language="javascript">
15
16 var exampleObj = {
17 counter: 0,
18 foo: function(){
19 alert("foo");
20 this.counter++;
21 },
22 bar: function(){
23 alert("bar");
24 this.counter++;
25 }
26 };
27
28 dojo.event.kwConnect({
29 srcObj: exampleObj,
30 srcFunc: "foo",
31 targetObj: exampleObj,
32 targetFunc: "bar",
33 delay: 3000
34 });
35 dojo.event.connect(document.getElementById("eee"),"onclick",exampleObj,"foo");
36
37
38 </script>
39 </BODY>
40 </HTML>
2 <HEAD>
3 <TITLE> New Document </TITLE>
4 <META NAME="Generator" CONTENT="EditPlus">
5 <META NAME="Author" CONTENT="">
6 <META NAME="Keywords" CONTENT="">
7 <META NAME="Description" CONTENT="">
8 <script type="text/javascript" src="dojo.js"></script>
9
10 </HEAD>
11
12 <BODY>
13 <INPUT TYPE="button" id="eee" value="test">
14 <script language="javascript">
15
16 var exampleObj = {
17 counter: 0,
18 foo: function(){
19 alert("foo");
20 this.counter++;
21 },
22 bar: function(){
23 alert("bar");
24 this.counter++;
25 }
26 };
27
28 dojo.event.kwConnect({
29 srcObj: exampleObj,
30 srcFunc: "foo",
31 targetObj: exampleObj,
32 targetFunc: "bar",
33 delay: 3000
34 });
35 dojo.event.connect(document.getElementById("eee"),"onclick",exampleObj,"foo");
36
37
38 </script>
39 </BODY>
40 </HTML>
由上面的延迟，可以想到，如果目标等于源的话，那么就是一个循环执行！
据说在connect()中，延迟信息在它的第九个参数，具体怎么样，我还没去试。
上面是在事件发生后调用目标，如果要在发生前呢？就是下面的东西了：
dojo.event.connect("before", exampleObj, "foo", exampleObj, "bar");
很容易理解吧，我就不多说了。在KwConnect中，就是
dojo.event.kwConnect({
type: "before",
srcObj: exampleObj,
srcFunc: "foo",
targetObj: exampleObj,
targetFunc: "bar"
});
type: "before",
srcObj: exampleObj,
srcFunc: "foo",
targetObj: exampleObj,
targetFunc: "bar"
});
默认情况下，connect()中第一个参数就是"after"了，同理KwConnect中的type默认是"after"。
下面要说的是方法包装。当我们想改变方法的输入输出时，一般情况下是直接去修改代码，那么，如果不修改原方法怎么办呢？在dojo中，也给出了解决方法，就是用Around advice包装方法。下面是一个例子：
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript" src="dojo.js"></script>
</HEAD>
<BODY>
<INPUT TYPE="button" id="eee" value="test">
<script language="javascript">
function foo(arg1, arg2)
{
return arg1+arg2;
}
function aroundFoo(invocation){
if(invocation.args.length < 2){
invocation.args.push(3);
}
var result = invocation.proceed();
//result="sss";
return result;
}
dojo.event.connect("around", "foo", "aroundFoo");
dojo.event.connect(document.getElementById("eee"),"onclick",function(){alert(foo(1))});
</script>
</BODY>
</HTML>
<TITLE> New Document </TITLE>
<script type="text/javascript" src="dojo.js"></script>
</HEAD>
<BODY>
<INPUT TYPE="button" id="eee" value="test">
<script language="javascript">
function foo(arg1, arg2)
{
return arg1+arg2;
}
function aroundFoo(invocation){
if(invocation.args.length < 2){
invocation.args.push(3);
}
var result = invocation.proceed();
//result="sss";
return result;
}
dojo.event.connect("around", "foo", "aroundFoo");
dojo.event.connect(document.getElementById("eee"),"onclick",function(){alert(foo(1))});
</script>
</BODY>
</HTML>
结果是4，如果取消注释，则结果为"sss"，开始调用的时候，只传了个参数1，经过包装处理，添加了一个默认参数，然后继续，函数执行完毕后，还可以将输出结果再处理一遍，当然，只是在函数有返回值的时候。
这里要注意的是：函数aroundFoo有且只能有一个参数，就是要改变的方法对象。这样，每次执行foo函数时，都会进行包装，然后再输出。
利用connect()的时候，有一个问题就是参数传递，参数不一致，该怎么办？先看下面一段：
1 <HTML>
2 <HEAD>
3 <TITLE> New Document </TITLE>
4 <script type="text/javascript" src="dojo.js"></script>
5 </HEAD><BODY>
6 <script language="javascript">
7 var obj1 = {
8 twoArgFunc: function(arg1, arg2){
9 alert("1:"+arg1+" "+arg2);
10 }
11 };
12
13 var obj2 = {
14 oneArgFunc: function(arg1,arg2){
15 alert("2:"+arg1+" "+arg2);
16 }
17 };
18
19 dojo.event.connect(obj1, "twoArgFunc",
20 obj2, "oneArgFunc");
21
22 obj1.twoArgFunc(1,4);
23 </script>
24 </BODY>
25 </HTML>
2 <HEAD>
3 <TITLE> New Document </TITLE>
4 <script type="text/javascript" src="dojo.js"></script>
5 </HEAD><BODY>
6 <script language="javascript">
7 var obj1 = {
8 twoArgFunc: function(arg1, arg2){
9 alert("1:"+arg1+" "+arg2);
10 }
11 };
12
13 var obj2 = {
14 oneArgFunc: function(arg1,arg2){
15 alert("2:"+arg1+" "+arg2);
16 }
17 };
18
19 dojo.event.connect(obj1, "twoArgFunc",
20 obj2, "oneArgFunc");
21
22 obj1.twoArgFunc(1,4);
23 </script>
24 </BODY>
25 </HTML>
结果是怎样的呢？2个连接的函数的参数相同！所以，要传递参数到另外一个函数中，已经不需要我们多做什么，dojo已经传过去了，参数的格式不一致的话，我们只需要再包装一下目标函数。
网上的那个例子我怎么也调试不成功，花了点时间，改了下，终于好了，下面是代码：
1 <HTML>
2 <HEAD>
3 <TITLE> New Document </TITLE>
4 <script type="text/javascript" src="dojo.js"></script>
5
6 </HEAD>
7
8 <BODY>
9 <script language="javascript">
10 var obj1 = {
11 twoArgFunc: function(arg1, arg2){
12 // 需要2个参数
13 alert("1: "+arg1+" "+arg2);
14 }
15 };
16
17 var obj2 = {
18 oneArgFunc: function(arg1){
19 //只需要一个数组作为参数
20 alert("2: "+arg1);
21 }
22 };
23
24 function aroundFunc(invocation){
25 var tmpArgs = [
26 invocation.args[0],
27 invocation.args[1]
28 ];
29 invocation.args = [tmpArgs];
30 return invocation.proceed();
31 }
32
33 // after-around advice
34 dojo.event.connect("after",obj1, "twoArgFunc",obj2, "oneArgFunc","aroundFunc");
35
36 //也可以写成下面2句
37 //dojo.event.connect(obj1, "twoArgFunc",obj2, "oneArgFunc");
38 //dojo.event.connect("around",obj2,"oneArgFunc","aroundFunc");
39
40 obj1.twoArgFunc(1,4);
41 </script>
42 </BODY>
43 </HTML>
44
2 <HEAD>
3 <TITLE> New Document </TITLE>
4 <script type="text/javascript" src="dojo.js"></script>
5
6 </HEAD>
7
8 <BODY>
9 <script language="javascript">
10 var obj1 = {
11 twoArgFunc: function(arg1, arg2){
12 // 需要2个参数
13 alert("1: "+arg1+" "+arg2);
14 }
15 };
16
17 var obj2 = {
18 oneArgFunc: function(arg1){
19 //只需要一个数组作为参数
20 alert("2: "+arg1);
21 }
22 };
23
24 function aroundFunc(invocation){
25 var tmpArgs = [
26 invocation.args[0],
27 invocation.args[1]
28 ];
29 invocation.args = [tmpArgs];
30 return invocation.proceed();
31 }
32
33 // after-around advice
34 dojo.event.connect("after",obj1, "twoArgFunc",obj2, "oneArgFunc","aroundFunc");
35
36 //也可以写成下面2句
37 //dojo.event.connect(obj1, "twoArgFunc",obj2, "oneArgFunc");
38 //dojo.event.connect("around",obj2,"oneArgFunc","aroundFunc");
39
40 obj1.twoArgFunc(1,4);
41 </script>
42 </BODY>
43 </HTML>
44
要注意的是，34行的after不能少，少了就触发不了了，照道理默认就是after的啊，具体可能是dojo内部问题吧。
接下来介绍匿名通信。
对象之间，不可能总是互相可见的，可能要连接的对象不是同时产生的，也就是说，异步产生，这样的话，用connect()就不是那么方便了，什么时候connect()，就是个问题了。dojo中，"Topics to the rescue!"，dojo是利用topic机制来解决的。看下面的代码
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 // previously we used this connect syntax
14 //
15 // dojo.event.connect(exampleObj, "foo", exampleObj, "bar");
16 //
17 // which we now replace with:
18
19 // set up our publisher
20 dojo.event.topic.registerPublisher("/example", exampleObj, "foo");
21
22 // and at some point later, register our listener
23 dojo.event.topic.subscribe("/example", exampleObj, "bar");
24
25
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 // previously we used this connect syntax
14 //
15 // dojo.event.connect(exampleObj, "foo", exampleObj, "bar");
16 //
17 // which we now replace with:
18
19 // set up our publisher
20 dojo.event.topic.registerPublisher("/example", exampleObj, "foo");
21
22 // and at some point later, register our listener
23 dojo.event.topic.subscribe("/example", exampleObj, "bar");
24
25
由上面可以看到，连接是分步进行的。在前面说明，要连接一个对象，具体是哪个，它可以不用知道，后面，可以指定一个连接对象，这样，2个连接的对象，不知道对方是谁，因为它们是通过发布/订阅机制通信，是通过中转的。这么做有什么好处？不用我说了吧。这就是匿名通信。
posted on
