當Flex應用越來越龐大時，問題會越來越多：

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

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

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

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

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

如何解決這些問題？

一、 使用動態共享庫（ Runtime Shared Libraries ）。Flex Framework、自定義組件庫和第三方包都是獨立的swf文件，Flex應用程序中將不包含Flex Framework、自定義組件庫和第三方包的代碼，所以：

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

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

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

1. 可以單獨更新某個功能模塊；

2. 可以動態添加模塊；

不過單單使用RSL或者Modular，并不能解決所有問題：

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

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

本文詳細介紹了RSL和Modular的結合，幫您打造模塊化的、可擴展的、強健的TWaver Flex應用。

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

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

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

2. IApplication接口，主程序實現此接口，用于子模塊和主程序交互，目前此接口無任何方法，可自行根據需要添加

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

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

1. 添加組件標簽，初始化界面，首先是一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. 初始化樹節點：為了實現動態添加模塊，這里從xml文件讀取模塊信息。以后添加新模塊時，直接修改xml文件即可，不用修改主程序。

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

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

加載xml文件代碼如下，主要是將url信息存到client屬性中，用于點擊該節點時用此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的選中監聽：當樹節點被選中時，先判斷對應的子模塊是否加載過，如果未加載過，則動態加載之，并將加載的模塊存入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），具體設置見下面第三步。

三、創建子模塊Flex工程，這里以Demo里的PSTNDemo和AlarmPropagationDemo為例，創建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目錄，免得每次修改子模塊后，需要復制子模塊swf到主程序的bin-debug中：

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

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

子模塊的代碼比較簡單，需要注意的是mxml文件的根標簽要改為Module，還有要實現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>

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

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

關于更多Modular和RSL的內容，請參考Adobe官方文檔：

Creating Modular Applications

Using Runtime Shared Libraries

本文完整Demo見附件： ModuleDemo

打造模塊化的TWaver Flex應用