資源描述：
《angular中$compile源碼分析_angularjs》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。
1、Angular中$compile源碼分析$compile,在Angular中即"編譯”服務(wù),它涉及到Angular應(yīng)用的“編譯”和"鏈接”兩個(gè)階段，根據(jù)從DOM樹遍歷Angular的根節(jié)點(diǎn)(ng-app)和已構(gòu)造完畢的$rootScope對(duì)象，依次解析根節(jié)點(diǎn)后代，根據(jù)多種條件查找指令，并完成每個(gè)指令相關(guān)的操作(如指令的作用域，控制器綁定以及transclude等),最終返回每個(gè)指令的鏈接函數(shù)，并將所右指令的鏈接函數(shù)合成為一個(gè)處理后的鏈接函數(shù)，返冋給Angluar的bootstrap模塊，最終啟動(dòng)整個(gè)應(yīng)用程序。[T
2、0C]Angular的compileProvider拋開Angular的MVVM實(shí)現(xiàn)方式不談，Angular給前端帶來(lái)了一個(gè)軟件工程的理念一依賴注入D1。依賴注入從來(lái)只是后端領(lǐng)域的實(shí)現(xiàn)機(jī)制，尤其是javaEE的spring框架。采用依賴注入的好處就是無(wú)需開發(fā)者手動(dòng)創(chuàng)建一個(gè)對(duì)象，這減少了開發(fā)者相關(guān)的維護(hù)操作，讓開發(fā)者無(wú)需關(guān)注業(yè)務(wù)邏輯相關(guān)的對(duì)象操作。那么在前端領(lǐng)域呢，采用依賴注入有什么與之前的開發(fā)不一樣的體驗(yàn)?zāi)兀课艺J(rèn)為，前端領(lǐng)域的依賴注入，則大大減少了命名空間的使用，如著名的YUI框架的命名空間引用方式，在極端情況下對(duì)
3、彖的引用可能會(huì)非常長(zhǎng)。而釆用注入的方式，則消耗的僅僅是一個(gè)局部變量，好處口然可見。而且開發(fā)者僅僅需要相關(guān)的“服務(wù)”對(duì)象的名稱，而不需要知道該服務(wù)的具體引用方式，這樣開發(fā)者就完全集中在了對(duì)象的借口引用上，專注于業(yè)務(wù)邏輯的開發(fā)，避免了反復(fù)的查找相關(guān)的文檔。前而廢話一大堆，主要述是為后而的介紹做鋪墊。在Angular中，依賴注入對(duì)彖的方式依賴與該對(duì)彖的Provider,正如小結(jié)標(biāo)題的comp訂eProvider一樣，該對(duì)象提供了compile服務(wù)，可通過(guò)injector.invoke(compi1eProvider.$g
4、et,compi1eProvider)函數(shù)完成compi1e服務(wù)的獲取。因此，問題轉(zhuǎn)移到分析compilcProvidcr.$gct的具體實(shí)現(xiàn)上。compi1eProvider.$getthis?$get=['$injector',*$parse，,*$controller，,'$rootScope','$http','$intcrpolate，,function($injector,$parse,$controller,$rootScope,$http,$interpolate){?
5、??returncompile;上述代碼采用了依賴注入的方式注入了$injector,$parse,$controller,$rootScope,$http,$interpolate五個(gè)服務(wù),分別用于實(shí)現(xiàn)“依賴注入的注入器($injector),js代碼解析器($parse),控制器服務(wù)($controller),根作用域($rootScope),http服務(wù)和指令解析服務(wù)”。compileProvider通過(guò)這幾個(gè)服務(wù)單例，完成了從抽象語(yǔ)法樹的解析到DOM樹構(gòu)建，作用域綁定并最終返回合成的鏈接
6、函數(shù)，實(shí)現(xiàn)了Angular應(yīng)用的開啟。$get方法最終返冋comp訂e函數(shù)，compile函數(shù)就是$comp訂e服務(wù)的具體實(shí)現(xiàn)。下面我們深入compile函數(shù)：functioncompilc($compilcNodcs,maxPriority){varcompositeLinkFn=compileNodes($compileNodes,maxPriority);returnfunctionpublicLinkFn(scope,cloneAttachFn,options){options二options
7、
8、{
9、};varparentBoundTranscludcFn二options.parentBoundTranscludcFn;vartranscludeControllers=options.transcludeControllers;if(parentBoundTranscludeFn&&parentBoundTranscludeFn.$$boundTransclude){parentBoundTranscludeFn二parentBoundTranscludeFn.$$boundTransclude;}var$li
10、nkNodes;if(cloneAttachFn){$linkNodes=$compi1eNodes,clone();cloncAttachFn($linkNodes,scope);}else{$linkNodes二$compileNodes;}forEach(transcludeControl1ers,function(control1er,name){$
