dojo事件机制详解(一)

前端之家收集整理的这篇文章主要介绍了dojo事件机制详解(一)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

dojo中的事件实现并不复杂,当然我只是从代码量的角度出发,但含金量还是很高的,而且很容易实现自定义事件监听,还支持发布订阅模式,下面我们从源代码级别来看看
dojo中的事件机制是如何实现的,深入了解后,甚至可以将其拷贝出来直接就能在其它使用。
事件机制使用中主要涉及以下4个函数
1. dojo.connect(); 建立事件监听连接
2. dojo.disconnect(); 断开事件监听连接
3. dojo.publish(); 发布主题
4. dojo.subscribe(); 订阅主题
5. dojo.unsubscribe(); 取消订阅主题
该篇中先讲connect机制,而发布订阅实现中也使用到了connect机制,将在后一篇中讲解。


示例

讲解之前先看一个示例:
function Foo() {
	this.name = "Foo";
	this.output = function() {
		var result = "output function in " + this.name;
		console.info(result);
		return result;
	};
}

function Bar() {
	this.name = "Bar";
	this.output = function() {
		var result = "output function in " + this.name;
		console.info(result);
		return result;
	}
}

var foo = new Foo();
var bar = new Bar();

//非dom node事件监听
var handle = dojo.connect(foo,"output",bar,"output");
foo.output();	//会触发bar.output调用
dojo.disconnect(handle);	//断开连接

//为dom node添加事件监听
handle = dojo.connect(dojo.byId("someId"),"click",function(){
	// do something
});
//移除事件监听
dojo.disconnect(handle);

dojo._listener对象

在讲解connect机制之前,必须先理解dojo._listener对象,该对象是处理非dom node的事件通用机制关键实现,具体如下:
dojo._listener = {
	// 创建一个分发器函数,该函数的返回值也是一个函数
	getDispatcher: function(){
		return function(){
			// c就是当前这个匿名函数,其_listeners和target属性会在add函数进行设置,分别表示目标函数的监听器列表和目标函数
			// 目标函数就是被监听的函数,被监听的函数调用时触发监听器列表中的函数调用
			var ap = Array.prototype,c = arguments.callee,ls = c._listeners,t = c.target,// 将原目标函数返回值作为该匿名函数返回值
				r = t && t.apply(this,arguments),//调用目标函数
			// make local copy of listener array so it is immutable during processing
			// 拷贝出一份监听器列表副本,其目的是保证在对其遍历过程中列表中的元素不会发生变化
			// 因为有可能出现的情况是:正在遍历监听器列表并对其调用,而其它地方却正在移除监听器
				i,lls = [].concat(ls)
			;

			// invoke listeners after target function
			// 在原目标函数调用后,再依次调用各个监听器
			for(i in lls){
				if(!(i in ap)){
					// 注意this,this指向的是调用原目标函数的那个对象,且监听器函数与匿名函数参数是一样的
					lls[i].apply(this,arguments);
				}
			}
			// 返回原目标函数返回值
			return r;
		};
	},//为源对象添加一个监听器,由参数名称可知source为源对象,method为函数名称,listener就监听器(回调函数)
	add: function(/*Object*/ source,/*String*/ method,/*Function*/ listener){
		// 如果source不存在则赋值为window
		source = source || dojo.global;
		// The source method is either null,a dispatcher,or some other function
		var f = source[method];
		// Ensure a dispatcher
		// f函数不可能为null,而且在第一次注册事件监听时,f._listeners不存在
		if(!f || !f._listeners){
			// 得到一个分发器函数,就是getDispatcher返回的那个匿名函数,此时该匿名并没有被调用
			var d = dojo._listener.getDispatcher();
			// original target function is special
			//将target属性赋值为原目标函数
			d.target = f;
			// 初始化一个空监听器列表
			d._listeners = [];
			// 重定义向原目标函数至分发器函数,所以在调用原目标函数的时候,真正调用的是这个分发器函数,
			// 也就是getDispatcher返回的那个匿名函数,只有这样能会触发监听器函数调用过程
			f = source[method] = d;
		}

		// 将监听器添加至列表,返回该监听器在监听器列表中的位置(index+1)
		return f._listeners.push(listener); /*Handle*/
	},// 从源对象移除一个监听器,由参数名称可知source为源对象,method为函数名称,handle为监听句柄
	remove: function(/*Object*/ source,/*Handle*/ handle){
		// 获取分发器函数
		var f = (source || dojo.global)[method];
		// 因为handle值为index+1,所以handle值大于0才有效,且监听器索引值为handle-1
		if(f && f._listeners && handle--){
			// 从监听器列表中移除监听器
			delete f._listeners[handle];
		}
	}
};

del对象

del对象是处理dom node事件机制实现,这个就很简单了,分别调用addEventListener与removeEventListener即可。
var del = (dojo._event_listener = {
	add: function(/*DOMNode*/ node,/*String*/ name,/*Function*/ fp){
		// 省略一些代码...
		
		// 为dom node添加事件监听器
		node.addEventListener(name,fp,false);
		return fp; /*Handle*/
	},remove: function(/*DOMNode*/ node,/*String*/ event,/*Handle*/ handle){
		if(node){
			event = del._normalizeEventName(event);
			if(!dojo.isIE && (event == "mouseenter" || event == "mouseleave")){
				event = (event == "mouseenter") ? "mouSEOver" : "mouSEOut";
			}
			// 从dom noe移除事件监听器
			node.removeEventListener(event,handle,false);
		}
	}
	// 省略了一些在add、remove函数中使用到的函数,处理浏览器兼容性相关问题,忽略它们并不妨碍理解事件机制
});

dojo.connect

解理了上面的内容后,再看connect与disconnect函数就很简单了:
dojo.connect = function(/*Object|null*/ obj,/*Object|null*/ context,/*String|Function*/ method,/*Boolean?*/ dontFix){

	var a=arguments,args=[],i=0;
	// if a[0] is a String,obj was omitted
	//如果第一个参数是String类型,则忽略obj参数
	args.push(dojo.isString(a[0]) ? null : a[i++],a[i++]);
	// if the arg-after-next is a String or Function,context was NOT omitted
	var a1 = a[i+1];
	// 如果第三个参数是String或Function类型,则忽略context参数
	// 处理这些参数的目的就是方便参数的传递,有点函数重载的感觉
	args.push(dojo.isString(a1)||dojo.isFunction(a1) ? a[i++] : null,a[i++]);
	for(var l=a.length; i<l; i++){	args.push(a[i]); }
	// 调用_connect函数
	return dojo._connect.apply(this,args); /*Handle*/
}

// node_listener就是dojo._listener,只是在IE中因为一些IE自身的差异与问题需要特殊对待,这里就忽略这一特殊情况
var node_listener = dojo._listener;
// 在dojo.js文件中定义了两个_connect函数,前面一个是针对通用环境的,后一个是针对浏览器环境的,明显后一个(如下)有效
dojo._connect = function(obj,event,context,method,dontFix){
	//判断obj是否为dom node对象
	var isNode = obj && (obj.nodeType||obj.attachEvent||obj.addEventListener);
	// 如果是dom node并且dontFix为true,则索引为2,即事件机制对象为dojo._listener
	// 如果是dom node并且dontFix为fale,则索引为1,即事件机制对象为del
	// 如果不是dom node,则索引为0,即事件机制对象为dojo._listener
	var lid = isNode ? (dontFix ? 2 : 1) : 0,l = [dojo._listener,del,node_listener][lid];
	// 创建一个监听器
	var h = l.add(obj,dojo.hitch(context,method));

	//通过h,能够知道该监听器在监听器列表中的索引
	//通过lid,则知道使用的是哪一个事件机制对象
	//返回一个相关信息数组,用于移除监听(断开连接)使用
	return [ obj,h,lid ];
};

dojo.disconnect

dojo.disconnect = function(/*Handle*/ handle){
	// handle参数就是connect函数的返回值,为一个数组
	if(handle && handle[0] !== undefined){
		//调用_disconnect函数
		dojo._disconnect.apply(this,handle);
		// 断开连接后,删除对象引用
		delete handle[0];
	}
};


dojo._disconnect = function(obj,listener){
	// 该函数的四个参数分别对应了connect函数返回值数组中的四个元素
	// 调用对应的事件机制对象的remove方法移除监听器
	([dojo._listener,node_listener][listener]).remove(obj,handle);
};

PS:dojo版本为dojo-release-1.6.3 原文链接:https://www.f2er.com/dojo/290971.html

猜你在找的Dojo相关文章