當(dāng)Flex應(yīng)用越來越龐大時，問題會越來越多：

1. SWF文件的大小也會越來越大；

2. 下載SWF文件的時間也會越來越長；

3. 如果有多個Flex應(yīng)用，如何復(fù)用相同的代碼（包括Flex Framework、自定義組件庫和第三方包，比如TWaver Flex）；

4. 每次升級后，用戶都需要重新下載新的SWF文件；

5. 如何在不修改并編譯舊SWF文件的情況下，增加新功能；

如何解決這些問題？

一、 使用動態(tài)共享庫（ Runtime Shared Libraries ）。Flex Framework、自定義組件庫和第三方包都是獨(dú)立的swf文件，F(xiàn)lex應(yīng)用程序中將不包含F(xiàn)lex Framework、自定義組件庫和第三方包的代碼，所以：

1. 程序修改后，只要更新用戶程序代碼即可，不用更新Flex Framework、自定義組件庫和第三方包；

2. RSL被瀏覽器緩存了，更新用戶程序后，RSL不用重新下載；3. 多個Flex應(yīng)用可以共享一份RSL，不用重復(fù)下載；

二、使用模塊化（ Modular ）。各個功能模塊被拆分成不同的SWF文件，所以：

1. 可以單獨(dú)更新某個功能模塊；

2. 可以動態(tài)添加模塊；

不過單單使用RSL或者M(jìn)odular，并不能解決所有問題：

1. 僅僅使用RSL時，無法將功能模塊拆分，無法動態(tài)加載功能模塊；

2. 僅僅使用Modular時，無法去除所有模塊用到的公共的Flex Framework、自定義組件庫和第三方包，導(dǎo)致子模塊文件過于龐大；

本文詳細(xì)介紹了RSL和Modular的結(jié)合，幫您打造模塊化的、可擴(kuò)展的、強(qiáng)健的TWaver Flex應(yīng)用。

一、為了避免主程序和子模塊之間的高度耦合，需要創(chuàng)建一個Flex Library工程，此工程定義了所有子模塊用到的公共類，以及子模塊和主程序之間通訊的接口：

1. IModule接口：子模塊實現(xiàn)此接口，用于主程序顯示子模塊的名稱（get title），以及子模塊加載完畢后，回調(diào)子模塊（ready）

package demo { public interface IModule { function get title():String; function ready(app:IApplication):void; } }

2. IApplication接口，主程序?qū)崿F(xiàn)此接口，用于子模塊和主程序交互，目前此接口無任何方法，可自行根據(jù)需要添加

package demo { public interface IApplication { } }
另外此Library工程還自定義了Network組件、Node，供子模塊使用，這里不一一列出，具體參考附件的源代碼。不過需要注意的是，工程選項里，framework linkage和twaver.swc的link type必須改成external，以減小Library工程生成的swc文件的大小。

二、創(chuàng)建主程序Flex工程，此工程引用上面的Library工程以及twaver.swc。實現(xiàn)的功能為左邊顯示Tree，點擊樹節(jié)點后，右邊加載相應(yīng)的子模塊。

1. 添加組件標(biāo)簽，初始化界面，首先是一HDividedBox組件，左邊為FastTree，右邊為VBox；VBox里上面為Label，顯示子模塊名稱，下面為子模塊容器：

<mx:HDividedBox width="100%" height="100%"> <tw:FastTree id="tree" width="300" height="100%"/> <mx:VBox width="100%" height="100%"> <mx:Label id="title" width="100%" textAlign="center"/> <mx:Canvas id="content" width="100%" height="100%"/> </mx:VBox> </mx:HDividedBox>

2. 初始化樹節(jié)點：為了實現(xiàn)動態(tài)添加模塊，這里從xml文件讀取模塊信息。以后添加新模塊時，直接修改xml文件即可，不用修改主程序。

xml文件包含模塊名稱和模塊url：

<modules> <module name="PSTN" url="ModulePSTN.swf"/> <module name="Alarm" url="ModuleAlarm.swf"/> </modules>

加載xml文件代碼如下，主要是將url信息存到client屬性中，用于點擊該節(jié)點時用此url加載子模塊：

private function initTreeBox():void { var httpService:HTTPService = new HTTPService(); httpService.resultFormat = "e4x"; httpService.addEventListener(ResultEvent.RESULT, this.addModules); httpService.url = "modules.xml"; httpService.send(); } private function addModules(e:ResultEvent):void { for each(var module:XML in e.result.module){ this.addModule(module.@name, module.@url); } } private function addModule(name:String, url:String):void { var data:Data = new Data(); data.name = name; data.setClient("url", url); this.tree.dataBox.add(data); }

3. 添加Tree的選中監(jiān)聽：當(dāng)樹節(jié)點被選中時，先判斷對應(yīng)的子模塊是否加載過，如果未加載過，則動態(tài)加載之，并將加載的模塊存入client屬性中，否則直接將之前存儲在client屬性中的子模塊加入右邊容器中：

this.tree.selectionModel.addSelectionChangeListener(this.handleSelectionChangeEvent); private function handleSelectionChangeEvent(e:SelectionChangeEvent):void { var selectedData:IData = this.tree.selectionModel.lastData; if(selectedData){ var moduleLoader:ModuleLoader = selectedData.getClient("module"); if(moduleLoader){ this.content.removeAllChildren(); this.content.addChild(moduleLoader); this.title.text = (moduleLoader.child as IModule).title; }else{ moduleLoader = new ModuleLoader(); moduleLoader.percentWidth = 100; moduleLoader.percentHeight = 100; moduleLoader.addEventListener(ModuleEvent.READY, this.moduleReady); moduleLoader.loadModule(selectedData.getClient("url")); selectedData.setClient("module", moduleLoader); } } } private function moduleReady(event:ModuleEvent):void { var moduleLoader:ModuleLoader = event.target as ModuleLoader; var module:IModule = moduleLoader.child as IModule; content.removeAllChildren(); content.addChild(moduleLoader); this.title.text = module.title; module.ready(this); }

注意，引用twaver.swc和Library工程時，twaver.swc必須在Library工程的上面，否則會報找不到twaver.network::Network類，而且framework linkage，twaver.swc以及上面的Library工程的link type必須為Runtime shared library（RSL），具體設(shè)置見下面第三步。

三、創(chuàng)建子模塊Flex工程，這里以Demo里的PSTNDemo和AlarmPropagationDemo為例，創(chuàng)建2個子模塊工程，子模塊工程為Flex工程，編譯選項里，framework linkage，twaver.swc以及上面的Library工程的link type必須為Runtime shared library（RSL）。不過需要注意的是，如果twaver.swc是通過“Add SWC Folder"添加的話，link type就沒有Runtime shared library（RSL）這個選項，這或許是Flash Builder的bug，但如果是用"Add SWC"添加的，就沒這個問題，見下圖：

另外，子模塊的編譯路徑可以修改為主程序工程的bin-debug目錄，免得每次修改子模塊后，需要復(fù)制子模塊swf到主程序的bin-debug中：

還有，不用生成HTML Wrapper，因為子模塊不能獨(dú)立運(yùn)行，只能從主程序中加載，所以沒有必要生成包裝子模塊的html文件：

最后，要注意的是，修改link type為RSL時，如果沒有添加RSL路徑，OK按鈕是不能點的，只能點擊”Add“按鈕，添加RSL路徑后，才能點擊OK按鈕，這點很坑爹：

子模塊的代碼比較簡單，需要注意的是mxml文件的根標(biāo)簽要改為Module，還有要實現(xiàn)IModule接口：

<?xml version="1.0" encoding="utf-8"?> <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:demo="http://www.demo.com/demo" implements="demo.IModule" xmlns:tw="http://www.servasoftware.com/2009/twaver/flex" creationComplete="init()" width="100%" height="100%"> <mx:Script> <![CDATA[ import demo.*; private var _app:IApplication = null; public function get title():String { return "Alarm Demo"; } public function ready(app:IApplication):void { this._app = app; } ]]> </mx:Script> </mx:Module>

經(jīng)過了這么多繁瑣的步驟，終于可以測試一下程序了：

再看看子模塊、Library工程以及主程序的包大小（子模塊只有50K不到，的確夠小了）：

關(guān)于更多Modular和RSL的內(nèi)容，請參考Adobe官方文檔：

Creating Modular Applications

Using Runtime Shared Libraries

本文完整Demo見附件： ModuleDemo

打造模塊化的TWaver Flex應(yīng)用