Flex模块化(module)

Flex模块化(module)学习总结

1:为什么要模块化;

         模块化提供了分离应用程序代码到不同的swf文件上以便减少下载时间和文件大小。使用Modules的好处是：

1.   主应用程序开始时不需马上下载modules。应用程序会根据需求载入和卸载modules。

2.   由于每个modules独立于其他应用程序modules，当需要改变一个modules时，你只需要重编译这个modules而不是整个应用程序。

模块化可创建模块化应用程序是提高Flex框架性能的重要方面，提供更多能力控制下载时间和文件大小，使用modules，你可以根据哪些可被独立载入，哪些可被其他程序使用而分离应用程序代码，

2:如何模块化;

       2.1创建模块

基于mxml的模块,在你的工程右键->new->mxml Module

              <?xml version="1.0" encoding="utf-8"?>

<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300">

</mx:Module>

基于as的模块

package

{

    import mx.modules.Module;

    publicclass General extends Module

    {

       publicfunction General()

       {

           super();

       }

    }

}

       2.2加载模块

              2.2.1使用ModuleLoader加载;

 

                     <mx:ModuleLoader url="ContactList.swf" />

 

              2.2.2使用ModuleManager加载

                     Private functioncreationHandler():void

{

_moduleInfo =

ModuleManager.getModule( 'ContactList.swf'

);

_moduleInfo.addEventListener( ModuleEvent.READY,

moduleLoadHandler );

_moduleInfo.load();

}

Private functionmoduleLoadHandler(evt:ModuleEvent):void

{

canvas.addChild( _moduleInfo.factory.create() as

DisplayObject );

}

              2.2.3创建弹出模块

                     Var general:ModuleLoader

general=ModuleLoader(mx.managers.PopUpManager.createPopUp(this,ModuleLoader));

           general.url="General.swf";

注意：在创建弹出模块时，有时会产生:无法将 mx.managers::PopUpManagerImpl@bba9941 转换为 mx.managers.IPopUpManager 这种错误,这个时候我们需要在主程序里引入

import mx.managers.IPopUpManager;

private var ipopUp:IPopUpManager

 

       2.3模块通信

模块与模块之间的通信一般不建议采用主程序直接去调用模块里的方法或者属性, 建议采用事件的方式进行通信，建立一个全局事件类，进行发送和帧听，如何实现在此不进行讨论，但是如果有些特殊的需求需要直接调用模块里的方法或者属性有以下三种方式：

 

 l  ModuleLoader加载方式的通信

<mx:ModuleLoaderid="ml" url="General.swf" ready="ReadyHandler(event)"/>

              privatefunction ReadyHandler(evt:ModuleEvent):void

       {

           general=ModuleLoader(evt.target).child as General;

           general.callMe("大喊将军");

       }

 

  l  ModuleManager加载方式通信

private var_moduleInfo:IModuleInfo;

private functioncreationHandler():void

{

_moduleInfo = ModuleManager.getModule( 'General.swf');

_moduleInfo.addEventListener( ModuleEvent.READY,

moduleLoadHandler );

_moduleInfo.load();

}

Private function moduleLoadHandler( evt:ModuleEvent ):void

{

var myModule:MyModule = _moduleInfo.factory.create() asMyModule;

myModule.callMe("大喊将军");

}

 l  使用模块接口实现通信

不管是ModuleLoader方式通信还是ModuleManager方式通信都需要在主程序里引入module的类，当你改变了模块之后，你同样要更新你的主程序和模块，这样模块化的思想就没有体现出来；但是有些时候需要调用模块里的方法，这时候你就需要用到模块接口；让各个模块都是继承一个接口，这个接口里有二个方法，一个是调用你模块里的方法，一个是设置你模块里的属性；

接口IModule如下：

package com.oz.general.module

{

  import flash.events.IEventDispatcher;

 

  publicinterface IModule extends IEventDispatcher

  {

     function callFunction(name:String,...arg):void;

     function setProperty(name:String,value:*):void;

  }

}

callFunction(name:String,…arg):void

name：你所要调用模块里的方法名；

…arg:方法参数；

setProperty(name:String,value:*):void

    name:你所要设置的模块里的属性；

    value:你所要设置的值;

创建一个继承IModule的模块GeneralModule.mxml如下：

 

<?xml version="1.0" encoding="utf-8"?>

<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" implements="com.oz.general.module.IModule">

    <mx:Script>

       <![CDATA[

           import mx.controls.Alert;

           privatevar myName:String="大喊将军";

          

           privatefunction getMyInformation():void

           {

              Alert.show("name:"+this.myName+"\nQQ:260020002\nQQ群:61272221","my information:");

           }

           publicfunction callFunction(name:String,...arg):void

           {

              switch(name)

              {

                  case"getMyInformation":this.getMyInformation();

                                       break;

              }

           }

           publicfunction setProperty(name:String,value:*):void

           {

              switch(name)

              {

                  case"myName":this.myName=value;

                                break;

              }

           }

       ]]>

    </mx:Script>

</mx:Module>

 

主程序如下：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>

    <![CDATA[

       import com.oz.general.module.IModule;

       import mx.events.ModuleEvent;

       privatevar imodule:IModule

       privatefunction moduleReadyHandler(evt:ModuleEvent):void

       {

           imodule=ModuleLoader(evt.target).child as IModule;

           imodule.callFunction("getMyInformation");

       }

       privatefunction sendClick():void

       {

           imodule.setProperty("myName",ti.text);

           imodule.callFunction("getMyInformation");

       }

    ]]>

</mx:Script>

<mx:Style source="com/oz/general/style/style.css">

   

</mx:Style>

<mx:ModuleLoader url="com/oz/general/module/GeneralModule.swf" id="generalModule" x="100" y="100" ready="moduleReadyHandler(event)">

   

</mx:ModuleLoader>

    <mx:Label x="178" y="100" text="修改模块里的属性(myName):" fontSize="12"/>

    <mx:TextInput id="ti" x="356" y="100"/>

    <mx:Button x="524" y="100" label="提交" fontSize="12" click="sendClick()"/>

 

</mx:Application>

 

另参考：http://bbs.9ria.com/blog-248365-17240.html