當(dāng)Flex應(yīng)用越來(lái)越龐大時(shí)，問(wèn)題會(huì)越來(lái)越多：
1. SWF文件的大小也會(huì)越來(lái)越大；
2. 下載SWF文件的時(shí)間也會(huì)越來(lái)越長(zhǎng)；
3. 如果有多個(gè)Flex應(yīng)用，如何復(fù)用相同的代碼（包括Flex Framework、自定義組件庫(kù)和第三方包，比如TWaver Flex）；
4. 每次升級(jí)后，用戶(hù)都需要重新下載新的SWF文件；
5. 如何在不修改并編譯舊SWF文件的情況下，增加新功能；
如何解決這些問(wèn)題？
一、 使用動(dòng)態(tài)共享庫(kù)（
Runtime Shared Libraries）。Flex Framework、自定義組件庫(kù)和第三方包都是獨(dú)立的swf文件，F(xiàn)lex應(yīng)用程序中將不包含F(xiàn)lex Framework、自定義組件庫(kù)和第三方包的代碼，所以：
1. 程序修改后，只要更新用戶(hù)程序代碼即可，不用更新Flex Framework、自定義組件庫(kù)和第三方包；
2. RSL被瀏覽器緩存了，更新用戶(hù)程序后，RSL不用重新下載；
3. 多個(gè)Flex應(yīng)用可以共享一份RSL，不用重復(fù)下載；
二、使用模塊化（
Modular）。各個(gè)功能模塊被拆分成不同的SWF文件，所以：
1. 可以單獨(dú)更新某個(gè)功能模塊；
2. 可以動(dòng)態(tài)添加模塊；
不過(guò)單單使用RSL或者M(jìn)odular，并不能解決所有問(wèn)題：
1. 僅僅使用RSL時(shí)，無(wú)法將功能模塊拆分，無(wú)法動(dòng)態(tài)加載功能模塊；
2. 僅僅使用Modular時(shí)，無(wú)法去除所有模塊用到的公共的Flex Framework、自定義組件庫(kù)和第三方包，導(dǎo)致子模塊文件過(guò)于龐大；
本文詳細(xì)介紹了RSL和Modular的結(jié)合，幫您打造模塊化的、可擴(kuò)展的、強(qiáng)健的TWaver Flex應(yīng)用。
一、為了避免主程序和子模塊之間的高度耦合，需要?jiǎng)?chuàng)建一個(gè)Flex Library工程，此工程定義了所有子模塊用到的公共類(lèi)，以及子模塊和主程序之間通訊的接口：
1. IModule接口：子模塊實(shí)現(xiàn)此接口，用于主程序顯示子模塊的名稱(chēng)（get title），以及子模塊加載完畢后，回調(diào)子模塊（ready）
1 package demo {
2 public interface IModule {
3 function get title():String;
4 function ready(app:IApplication):void;
5 }
6 }
2. IApplication接口，主程序?qū)崿F(xiàn)此接口，用于子模塊和主程序交互，目前此接口無(wú)任何方法，可自行根據(jù)需要添加
1 package demo {
2 public interface IApplication {
3
4 }
5 }
另外此Library工程還自定義了Network組件、Node，供子模塊使用，這里不一一列出，具體參考附件的源代碼。不過(guò)需要注意的是，工程選項(xiàng)里，framework linkage和twaver.swc的link type必須改成external，以減小Library工程生成的swc文件的大小。
二、創(chuàng)建主程序Flex工程，此工程引用上面的Library工程以及twaver.swc。實(shí)現(xiàn)的功能為左邊顯示Tree，點(diǎn)擊樹(shù)節(jié)點(diǎn)后，右邊加載相應(yīng)的子模塊。
1. 添加組件標(biāo)簽，初始化界面，首先是一HDividedBox組件，左邊為FastTree，右邊為VBox；VBox里上面為L(zhǎng)abel，顯示子模塊名稱(chēng)，下面為子模塊容器：
1 <mx:HDividedBox width="100%" height="100%">
2 <tw:FastTree id="tree" width="300" height="100%"/>
3 <mx:VBox width="100%" height="100%">
4 <mx:Label id="title" width="100%" textAlign="center"/>
5 <mx:Canvas id="content" width="100%" height="100%"/>
6 </mx:VBox>
7 </mx:HDividedBox>
2. 初始化樹(shù)節(jié)點(diǎn)：為了實(shí)現(xiàn)動(dòng)態(tài)添加模塊，這里從xml文件讀取模塊信息。以后添加新模塊時(shí)，直接修改xml文件即可，不用修改主程序。
xml文件包含模塊名稱(chēng)和模塊url：
1 <modules>
2 <module name="PSTN" url="ModulePSTN.swf"/>
3 <module name="Alarm" url="ModuleAlarm.swf"/>
4 </modules>
加載xml文件代碼如下，主要是將url信息存到client屬性中，用于點(diǎn)擊該節(jié)點(diǎn)時(shí)用此url加載子模塊：
1 private function initTreeBox():void {
2 var httpService:HTTPService = new HTTPService();
3 httpService.resultFormat = "e4x";
4 httpService.addEventListener(ResultEvent.RESULT, this.addModules);
5 httpService.url = "modules.xml";
6 httpService.send();
7 }
8
9 private function addModules(e:ResultEvent):void {
10 for each(var module:XML in e.result.module){
11 this.addModule(module.@name, module.@url);
12 }
13 }
14
15 private function addModule(name:String, url:String):void {
16 var data:Data = new Data();
17 data.name = name;
18 data.setClient("url", url);
19 this.tree.dataBox.add(data);
20 }
3. 添加Tree的選中監(jiān)聽(tīng)：當(dāng)樹(shù)節(jié)點(diǎn)被選中時(shí)，先判斷對(duì)應(yīng)的子模塊是否加載過(guò)，如果未加載過(guò)，則動(dòng)態(tài)加載之，并將加載的模塊存入client屬性中，否則直接將之前存儲(chǔ)在client屬性中的子模塊加入右邊容器中：
1 this.tree.selectionModel.addSelectionChangeListener(this.handleSelectionChangeEvent);
2
3 private function handleSelectionChangeEvent(e:SelectionChangeEvent):void {
4 var selectedData:IData = this.tree.selectionModel.lastData;
5 if(selectedData){
6 var moduleLoader:ModuleLoader = selectedData.getClient("module");
7 if(moduleLoader){
8 this.content.removeAllChildren();
9 this.content.addChild(moduleLoader);
10 this.title.text = (moduleLoader.child as IModule).title;
11 }else{
12 moduleLoader = new ModuleLoader();
13 moduleLoader.percentWidth = 100;
14 moduleLoader.percentHeight = 100;
15 moduleLoader.addEventListener(ModuleEvent.READY, this.moduleReady);
16 moduleLoader.loadModule(selectedData.getClient("url"));
17 selectedData.setClient("module", moduleLoader);
18 }
19 }
20 }
21
22 private function moduleReady(event:ModuleEvent):void {
23 var moduleLoader:ModuleLoader = event.target as ModuleLoader;
24 var module:IModule = moduleLoader.child as IModule;
25 content.removeAllChildren();
26 content.addChild(moduleLoader);
27 this.title.text = module.title;
28 module.ready(this);
29 }
注意，引用twaver.swc和Library工程時(shí)，twaver.swc必須在Library工程的上面，否則會(huì)報(bào)找不到twaver.network::Network類(lèi)，而且framework linkage，twaver.swc以及上面的Library工程的link type必須為Runtime shared library（RSL），具體設(shè)置見(jiàn)下面第三步。
三、創(chuàng)建子模塊Flex工程，這里以Demo里的PSTNDemo和AlarmPropagationDemo為例，創(chuàng)建2個(gè)子模塊工程，子模塊工程為Flex工程，編譯選項(xiàng)里，framework linkage，twaver.swc以及上面的Library工程的link type必須為Runtime shared library（RSL）。不過(guò)需要注意的是，如果twaver.swc是通過(guò)“Add SWC Folder"添加的話，link type就沒(méi)有Runtime shared library（RSL）這個(gè)選項(xiàng)，這或許是Flash Builder的bug，但如果是用"Add SWC"添加的，就沒(méi)這個(gè)問(wèn)題，見(jiàn)下圖：
另外，子模塊的編譯路徑可以修改為主程序工程的bin-debug目錄，免得每次修改子模塊后，需要復(fù)制子模塊swf到主程序的bin-debug中：
還有，不用生成HTML Wrapper，因?yàn)樽幽K不能獨(dú)立運(yùn)行，只能從主程序中加載，所以沒(méi)有必要生成包裝子模塊的html文件：
最后，要注意的是，修改link type為RSL時(shí)，如果沒(méi)有添加RSL路徑，OK按鈕是不能點(diǎn)的，只能點(diǎn)擊”Add“按鈕，添加RSL路徑后，才能點(diǎn)擊OK按鈕，這點(diǎn)很坑爹：
子模塊的代碼比較簡(jiǎn)單，需要注意的是mxml文件的根標(biāo)簽要改為Module，還有要實(shí)現(xiàn)IModule接口：
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
3 xmlns:demo="http://www.demo.com/demo" implements="demo.IModule"
4 xmlns:tw="http://www.servasoftware.com/2009/twaver/flex"
5 creationComplete="init()" width="100%" height="100%">
6 <mx:Script>
7 <![CDATA[
8 import demo.*;
9
10 private var _app:IApplication = null;
11
12 public function get title():String {
13 return "Alarm Demo";
14 }
15
16 public function ready(app:IApplication):void {
17 this._app = app;
18 }
19 ]]>
20 </mx:Script>
21 </mx:Module>
經(jīng)過(guò)了這么多繁瑣的步驟，終于可以測(cè)試一下程序了：