Flex之模块化

如果做一个很大的Flex程序，比如程序文件有2，3M，一次性下载的话，就算是我的10M宽带也是需要一段时间。更别提普通的ADSL了。另外如果同时实例化太多的Flex控件,要占用很大的内存，浏览器（Flash Plugin）处理的时候会很慢，同时也会占很多的CPU资源。


难道Flex就不能开发大型应用了？还好Flex提供了Module的支持（我做OpenLaszlo的时候可没有这么幸运，只能自己开发Module支持，不过现在已经彻底放弃OpenLaszlo）。还是很简单的，困难的是如何分割模块。

创建Module。就像创建其他组件一样，只不过标记换成了 mx:Module。Module本身和Application基本一样。如果使用Flexbuilder的话，你的Bin-Debug（通常）里会多一个和Module的文件名的swf。
Xml代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
//ActionScript Code Here...
]]>
</mx:Script>
...
<mx:Button id="btn" click="{Alert.show('' + event)}" label="Button"/>
</mx:Module>

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
//ActionScript Code Here...
]]>
</mx:Script>
...
<mx:Button id="btn" click="{Alert.show('' + event)}" label="Button"/>
</mx:Module>


重点是如何调用Module。有两种方式可以调用Module，一种是使用mx:ModuleLoader，另一种是使用ModuleManager。第一种其实仅仅是封装了第二种方式而已。mx:ModuleLoader 相对比较简单，只需要把它实例化到你需要的地方，指定Module的URL就可以了。ModuleManager相对复杂一些，但是更灵活。关键(Key point)代码如下。完整代码见附件。
Xml代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()">
<mx:Script>
<![CDATA[
...
private function useModuleLoader(event:Event):void{
trace(event.type);
if(ml.url == null){
//Key point
ml.url="UserList.swf"
ml.loadModule();
}
}
...
private var module:IModuleInfo;
private function useModuleManager(event:Event):void{
trace(event.type);
//Key point
module = ModuleManager.getModule("UserList.swf");

module.addEventListener(ModuleEvent.READY, onModuleReadyUseModuleManager);

module.load();
}
...
]]>
</mx:Script>
<mx:VBox id="container" width="100%" height="100%">
<mx:Button id="loadUseModuleLoaderButton" label="Load Use ModuleLoader" />
<mx:Button id="loadUseModuleManagerButton" label="Load Use ModuleManager" />
...
<mx:ModuleLoader id="ml" width="300" />
</mx:VBox>
</mx:Application>