dojo的connect方法使用与源代码剖析.docVIP

dojo的connect方法使用与源代码剖析（实现JS上的类似AOP效果） dojo是功能非常强大的JavaScript类库，论类库本身的功能，丝毫不逊色于jQuery，但是jQuery的轻量级和丰富的插件使其在互联网领域风生水起，知名度要高得多。dojo也提供了自己的UI组件库，名为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方法的进一步使用可以参照以下文章： HYPERLINK /dojotoolkit/article/details/6526897 /dojotoolkit/article/details/6526897） ? 那么这个功能是怎么实现的呢？看一下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为一个简单对象，包含了