概述 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, /*String*/ method, /*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, /*String*/ event, /*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, event, dojo.hitch(context, method)); //通过h,能够知道该监听器在监听器列表中的索引 //通过lid,则知道使用的是哪一个事件机制对象 //返回一个相关信息数组,用于移除监听(断开连接)使用 return [ obj, event, 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, event, handle, listener){ // 该函数的四个参数分别对应了connect函数返回值数组中的四个元素 // 调用对应的事件机制对象的remove方法移除监听器 ([dojo._listener, del, node_listener][listener]).remove(obj, event, handle); };
PS:dojo版本为dojo-release-1.6.3