dojo的connect方法实现及源码剖析（实现JS上的类似AOP效果）

dojo是功能非常强大的JavaScript类库，论类库本身的功能，丝毫不逊色于jQuery，但是jQuery的轻量级和丰富的插件使其在互联网领域风生水起，知名度要高得多。dojo也提供了自己的组件库，名为dijit，它们拥有统一的生命周期。dojo这几年也得到了很多大公司的支持，并应用与很多领域，如struts2就使用了它，通过研究dojo的使用方式和源码对提升前台的开发能力大有益处。

dojo实现了强大的类继承机制，并对常用的前台功能进行了很多封装，使得我们在进行开发时不必费工夫去直接接触HTML和CSS的一些用法，所以也就避免了一些浏览器兼容性的问题。

在本文中，将会介绍一个dojo提供的很有用的功能，使用这个功能一方面能够实现对dom元素事件的统一方式处理，另一方面还能够实现类似于Java中AOP的效果：在一个方法调用之后，执行另外的一系列方法。这个功能就是dojo的connect方法。

 

场景一：我有一个按钮，想在点击按钮的时候，触发一些事件处理

这样的场景，通过标准的js和html编码，也能很容易的实现，但是通过使用dojo提供的connect方法，将会使你的处理更轻松。

 

<input type="button" value="ss"  id="button"/>

 以上为一个按钮的定义，事件绑定和处理怎么写呢？

 

	dojo.addOnLoad(function(){
		dojo.connect(dojo.byId("button"),"onclick",test);
	})

	function test(){
		alert("我被点中啦！");
	}

 通过这么简单的配置，当你再次点击这个按钮的时候，test方法就会被调用了

场景二：我有一个方法名为test，我想在这个方法被执行的时候，另外一个方法test2也能被执行：

 

function test(){
	alert("first");
}
	
function test2(){
	alert("second");
}

 普通情况下，需要在test里面写上test2()；这样这两个方法就紧密耦合在一起了。通过使用dojo的connect方法，可以很方便的实现该要求：

 

dojo.connect(null,"test",null,test2);

 这样在每次调用test的时候，test2都会被调用了。

 

那么这个功能是怎么实现的呢？看一下dojo的源码吧，这部分的实现是通过connect.js实现的：

 

dojo.connect = function(/*Object|null*/ obj,
						/*String*/ event,
						/*Object|null*/ context,
						/*String|Function*/ method,
						/*Boolean?*/ dontFix){
//以上前四个参数比较重要
//obj为原方法所在的对象，可以为空，为空的话就是全局的方法
//event必须为原方法或事件的名称，注意为字符串
//context为要添加方法的执行上下文，也就是在添加方法中this指的是什么
//method参数为要添加方法的引用

//在这个方法中，进行了一些参数处理后，通过这句话，完成实际的工作
return dojo._connect.apply(this, args);
}

dojo._connect = function(obj, event, context, method){
	var l=dojo._listener, h=l.add(obj, event, dojo.hitch(context, method));
	return [obj, event, h, l]; // Handle
//以上的代码中，l.add(obj, event, dojo.hitch(context, method));又是关键
};

//dojo._listener为一个简单对象，包含了两个重要的方法，分别是add和remove，我们重点关注add

	add: function(/*Object*/ source, /*String*/ method, /*Function*/ listener){
		//三个参数分别为目标对象，对象的方法名以及已经进行完上下文环境处理的待添加方法

		source = source || dojo.global;
		
		var f = source[method];//取到目标对象
		

		if(!f || !f._listeners){//如果目标方法没有_listeners属性

			var d = dojo._listener.getDispatcher();//调用此方法后其实返回的是一个全新的方法，对目标方法进行了封装
			
			d.target = f;//设置目标方法
			
			d._listeners = [];//保持了一个数组，记录了目标方法执行后要执行的其它方法
			
			f = source[method] = d;//注意此处将原来的方法进行了替换，你原来的目标方法已经被修改了
		}
		
		return f._listeners.push(listener); //将要添加的方法置于数组之中，并返回一个句柄
	}

//getDispatcher是很重要的辅助方法，它返回了一个function对象，替换了我们原来的目标方法
getDispatcher: function(){
		
		return function(){
			var ap = Array.prototype, c = arguments.callee, ls = c._listeners, t = c.target,
			//此处t就是我们原来的目标方法
				r = t && t.apply(this, arguments),//执行并记录返回值
			
				i, lls = [].concat(ls);

			//遍历数组中的每一个方法，依次执行，从而实现了类似AOP的功能
			for(i in lls){
				if(!(i in ap)){
					lls[i].apply(this, arguments);
				}
			}
			
			return r;//return原始方法的运行的结果值
		};
	}

 

通过以上的代码分析，可以了解到dojo实现该功能的核心思想是将原有的方法进行了替换，在新的方法中记录了原方法以及要添加的其他方法，在执行时，依次执行，实现的确实很高明。

 

评论

4 楼 lengyun3566 2011-11-18  

houfeng0923 写道

Extjs 和 YUI 也有类似的功能。有空整理下跟你文章汇合

多谢关注，期待你的文章！

3 楼 houfeng0923 2011-11-17  

Extjs 和 YUI 也有类似的功能。有空整理下跟你文章汇合

2 楼 lengyun3566 2011-08-10  

dojotoolkit 写道

dojo 1.7里会有一系列叫dojo.aspect.after/dojo.aspect.before/dojo.aspect.around的方法，原理和connect类似，但更像AOP了。

今天早上更新了dojo的源码，果然如此，期待1.7的功能哈

1 楼 dojotoolkit 2011-07-15  

dojo 1.7里会有一系列叫dojo.aspect.after/dojo.aspect.before/dojo.aspect.around的方法，原理和connect类似，但更像AOP了。