博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
dojo的connect方法使用与源代码剖析(在JavaScript里实现类似AOP的效果)
阅读量:4874 次
发布时间:2019-06-11

本文共 3474 字,大约阅读时间需要 11 分钟。

该文最早发表于ITEYE博客,。

作者:张卫滨(),感谢dojo中文博客原创和翻译了大量的精品文章,个人愿意借此平台与所有关注RIA技术的朋友交流。

 

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

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

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

 

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

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

 

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

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方法,可以很方便的实现该要求:

//这样在每次调用test的时候,test2都会被调用了。dojo.connect(null,"test",null,test2);

(关于dojo的connect方法的进一步使用可以参照以下文章:)

 

那么这个功能是怎么实现的呢?看一下dojo.connect的源码吧,这部分的实现是通过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实现该功能的核心思想是将原有的方法进行了替换,在新的方法中记录了原方法以及要添加的其他方法,在执行时,依次执行,实现的确实很高明。借助这个方法,dojo还实现了subscribe和publish功能,感兴趣的朋友可以进一步的研究。

 

作者:dojotoolkit 发表于2011-7-19 15:36:16
阅读:733 评论:1

转载于:https://www.cnblogs.com/daidd/archive/2011/07/19/2218598.html

你可能感兴趣的文章
Spring Cloud Gateway入门
查看>>
XCode 4.2 新功能 - Storyboard
查看>>
Tomcat不保存SESSIONS.ser设置
查看>>
QEMU使用手册 - 2 QEMU计算机系统模拟器
查看>>
VIM技巧之去除代码行号并缩进代码
查看>>
自动化测试用例getText()获取某一个元素的值返回null或空
查看>>
大数智能未来
查看>>
virtualenv和virtualenvwrapper 的安装和使用
查看>>
MAC sublime text 无法自动补齐标签
查看>>
NgBook留言本开发全过程(1)
查看>>
LeetCode-指针法
查看>>
Python之路,Day12 - 那就做个堡垒机吧
查看>>
linux之shell之if、while、for语句介绍
查看>>
Mysql phpStudy升级Mysql版本,流产了怎么办?
查看>>
SQLServer之数据库行锁
查看>>
OFDM仿真
查看>>
代理模式
查看>>
AC日记——背包问题 V2 51nod 1086
查看>>
CSS关键字
查看>>
UIAlertView
查看>>