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>