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 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 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>