dojo的connect方法使用與源代碼剖析.doc

dojo的connect方法使用與源代碼剖析（實(shí)現(xiàn)JS上的類(lèi)似AOP效果）dojo是功能非常強(qiáng)大的JavaScript類(lèi)庫(kù)，論類(lèi)庫(kù)本身的功能，絲毫不遜色于jQuery，但是jQuery的輕量級(jí)和豐富的插件使其在互聯(lián)網(wǎng)領(lǐng)域風(fēng)生水起，知名度要高得多。dojo也提供了自己的UI組件庫(kù)，名為dijit，它們擁有統(tǒng)一的生命周期，性能也相當(dāng)不錯(cuò)。dojo這幾年也得到了很多大公司的支持，并應(yīng)用于很多領(lǐng)域，比如struts2就使用了它，通過(guò)研究dojo的使用方式和源碼對(duì)提升前臺(tái)的開(kāi)發(fā)能力大有益處。dojo實(shí)現(xiàn)了強(qiáng)大的類(lèi)繼承機(jī)制，并對(duì)常用的前臺(tái)功能進(jìn)行了很多封裝，使得我們?cè)谶M(jìn)行開(kāi)發(fā)時(shí)不必費(fèi)工夫去直接接觸HTML和CSS的一些用法，所以也就避免了一些瀏覽器兼容性的問(wèn)題。在本文中，將會(huì)介紹一個(gè)dojo提供的很有用的功能，使用這個(gè)功能一方面能夠?qū)崿F(xiàn)對(duì)dom元素事件的統(tǒng)一方式處理，另一方面還能夠?qū)崿F(xiàn)類(lèi)似于Java中AOP的效果：在一個(gè)方法調(diào)用之后，執(zhí)行另外的一系列方法。這個(gè)功能就是dojo的connect方法。場(chǎng)景一：我有一個(gè)按鈕，想在點(diǎn)擊按鈕的時(shí)候，觸發(fā)一些事件處理這樣的場(chǎng)景，通過(guò)標(biāo)準(zhǔn)的js和html編碼，也能很容易的實(shí)現(xiàn)，但是通過(guò)使用dojo提供的connect方法，將會(huì)使你的處理更輕松。以上為一個(gè)按鈕的定義，事件綁定和處理怎么寫(xiě)呢？dojo.addOnLoad(function()dojo.connect(dojo.byId(button),onclick,test);)functiontest()alert(我被點(diǎn)中啦！);通過(guò)這么簡(jiǎn)單的配置，當(dāng)你再次點(diǎn)擊這個(gè)按鈕的時(shí)候，test方法就會(huì)被調(diào)用了場(chǎng)景二：我有一個(gè)方法名為test，我想在這個(gè)方法被執(zhí)行的時(shí)候，另外一個(gè)方法test2也能被執(zhí)行：functiontest()alert(first);functiontest2()alert(second);普通情況下，需要在test里面寫(xiě)上test2()；這樣這兩個(gè)方法就緊密耦合在一起了。通過(guò)使用dojo的connect方法，可以很方便的實(shí)現(xiàn)該要求：dojo.connect(null,test,null,test2);這樣在每次調(diào)用test的時(shí)候，test2都會(huì)被調(diào)用了。（關(guān)于dojo的connect方法的進(jìn)一步使用可以參照以下文章：/dojotoolkit/article/details/6526897）那么這個(gè)功能是怎么實(shí)現(xiàn)的呢？看一下dojo的源碼吧，這部分的實(shí)現(xiàn)是通過(guò)connect.js實(shí)現(xiàn)的：dojo.connect=function(/*Object|null*/obj,/*String*/event,/*Object|null*/context,/*String|Function*/method,/*Boolean?*/dontFix)/以上前四個(gè)參數(shù)比較重要/obj為原方法所在的對(duì)象，可以為空，為空的話(huà)就是全局的方法/event必須為原方法或事件的名稱(chēng)，注意為字符串/context為要添加方法的執(zhí)行上下文，也就是在添加方法中this指的是什么/method參數(shù)為要添加方法的引用/在這個(gè)方法中，進(jìn)行了一些參數(shù)處理后，通過(guò)這句話(huà)，完成實(shí)際的工作returndojo._connect.apply(this,args);dojo._connect=function(obj,event,context,method)varl=dojo._listener,h=l.add(obj,event,dojo.hitch(context,method);returnobj,event,h,l;/Handle/以上的代碼中，l.add(obj,event,dojo.hitch(context,method);又是關(guān)鍵;/dojo._listener為一個(gè)簡(jiǎn)單對(duì)象，包含了兩個(gè)重要的方法，分別是add和remove，我們重點(diǎn)關(guān)注addadd:function(/*Object*/source,/*String*/method,/*Function*/listener)/三個(gè)參數(shù)分別為目標(biāo)對(duì)象，目標(biāo)對(duì)象的方法名以及已經(jīng)進(jìn)行完上下文環(huán)境處理的待添加方法source=source|dojo.global;varf=sourcemethod;/取到目標(biāo)對(duì)象的指定方法if(!f|!f._listeners)/如果目標(biāo)方法沒(méi)有_listeners屬性vard=dojo._listener.getDispatcher();/調(diào)用此方法后其實(shí)返回的是一個(gè)全新的方法，對(duì)目標(biāo)方法進(jìn)行了封裝d.target=f;/設(shè)置全新的一個(gè)屬性，該屬性指向了最初的目標(biāo)方法d._listeners=;/保持了一個(gè)數(shù)組，記錄了目標(biāo)方法執(zhí)行后要執(zhí)行的其它方法f=sourcemethod=d;/注意此處將原來(lái)的方法進(jìn)行了替換，你原來(lái)的目標(biāo)方法已經(jīng)被修改了returnf._listeners.push(listener);/將要添加的方法置于數(shù)組之中，并返回一個(gè)句柄/getDispatcher是很重要的輔助方法，它返回了一個(gè)function對(duì)象，替換了我們?cè)瓉?lái)的目標(biāo)方法getDispatcher:function()returnfunction()varap=Atotype,c=arguments.callee,ls=c._listeners,t=c.target,/此處t就是我們?cè)瓉?lái)的目標(biāo)方法r=t&t.apply(this,arguments),/執(zhí)行原來(lái)的目標(biāo)方法并記錄返回值i,lls=.concat(ls);/遍歷數(shù)組中的每一個(gè)方法，依次執(zhí)行，從而實(shí)現(xiàn)了類(lèi)似AOP的功能for(iinlls)if(!(iinap)llsi.apply(this,arguments);returnr;/return原始方法的運(yùn)行的結(jié)果值;通過(guò)以上的代碼分析，可以了解到dojo實(shí)現(xiàn)該功能的核心思想是將原有的方法進(jìn)行了替換，在新的方法中記錄了原方法以及要添加的其他方法，在執(zhí)行時(shí)，依次執(zhí)行，實(shí)現(xiàn)的確實(shí)很高明。借助這個(gè)方法，dojo還實(shí)現(xiàn)了subscribe和publish功能，感興趣的朋友可以進(jìn)一步的研究。該文最早發(fā)表于ITEYE博客，原文地