Flex模塊化應(yīng)用程序開(kāi)發(fā)的示例分析

這篇文章主要介紹了Flex模塊化應(yīng)用程序開(kāi)發(fā)的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

Flex模塊化應(yīng)用程序開(kāi)發(fā)

如果你沒(méi)有看過(guò)RogerGonzalez的Blog中關(guān)于模塊（Module）的文章，那么你應(yīng)該去那里了解一下Flex2這個(gè)特性背后的細(xì)節(jié)和想法。這里我不想過(guò)多地探討為什么要這樣，而是想要給大家展示一個(gè)使用了模塊（Module）的簡(jiǎn)單的Flex程序，你可以從中獲得啟示。

模塊（Modules）

模塊（Module）是創(chuàng)建大型Flex應(yīng)用程序的一個(gè)解決方案，它允許你將你的用戶接口分割成許多分散的有各自用途的小塊。例如（下面出自Flex2的文檔），一個(gè)保險(xiǎn)公司可能有數(shù)百個(gè)表單——針對(duì)于各個(gè)領(lǐng)域的，針對(duì)各種請(qǐng)求類(lèi)型，以及針對(duì)各種應(yīng)用等等。創(chuàng)建一個(gè)包含所有這些表單的Flex應(yīng)用程序?qū)?huì)產(chǎn)生一個(gè)巨大SWF文件，還會(huì)有不少問(wèn)題：

?應(yīng)用程序越大開(kāi)發(fā)過(guò)程越復(fù)雜；
?應(yīng)用程序越大測(cè)試過(guò)程越復(fù)雜；
?應(yīng)用程序越大部署過(guò)程越復(fù)雜；
?SWF文件越大加載時(shí)間越長(zhǎng)

我的示例程序基于Flex2文檔中的一個(gè)程序，但是我將它做了一些更改來(lái)說(shuō)明幾個(gè)常見(jiàn)的問(wèn)題。這個(gè)例子展示了一個(gè)主程序和其它三個(gè)共享公有數(shù)據(jù)的模塊（Module）。

其中一個(gè)設(shè)計(jì)要素是一個(gè)接口的使用，這個(gè)接口實(shí)質(zhì)上是接口實(shí)現(xiàn)者和使用者之間的一個(gè)契約。這個(gè)例子將會(huì)說(shuō)明我所說(shuō)的意思。模塊（Module）的接口部分雖然不是必須的但是卻可以大大簡(jiǎn)化以后的開(kāi)發(fā)和維護(hù)。比如，如果開(kāi)發(fā)人員有一個(gè)小組負(fù)責(zé)報(bào)告部分，另一個(gè)小組負(fù)責(zé)圖表部分，如果它們一開(kāi)始用了接口，那么只要有需要，接口的實(shí)現(xiàn)就可以做足夠多的變形而不會(huì)影響到工程結(jié)果。接口在模塊（Module）中還扮演另外一個(gè)角色，我在下文中將會(huì)揭示這點(diǎn)。

模塊（Module）是以<mx:Module>代替<mx:Application>作為根標(biāo)簽的MXML文件（或ActionScript文件）。你可以將帶有<mx:Module>標(biāo)簽的作為一個(gè)程序來(lái)看，但是它不能運(yùn)行。

這個(gè)示例有一個(gè)主程序文件以及帶有一個(gè)接口的兩個(gè)模塊。打開(kāi)主程序文件你會(huì)看到：

程序代碼

<mx:Panelxmx:Panelx="10"y="41"width="169"height="500"layout="absolute"title="Modules"> <mx:Textxmx:Textx="10"y="24"text="Checkamoduletoloadit;unchecktounloadit"width="129"/> <mx:RadioButtonxmx:RadioButtonx="10"y="97"label="None"selected="true"  click="removeModule()"/> <mx:RadioButtonxmx:RadioButtonx="10"y="123"label="Chart" click="removeModule();loadModule('ChartModule.swf')"/> <mx:RadioButtonxmx:RadioButtonx="10"y="175"label="Table" click="removeModule();loadModule('GridModule.swf')"/> </mx:Panel>  <mx:Panelxmx:Panelx="187"y="41"width="500"height="500"layout="absolute"title="Module:{moduleName}"> <mx:ModuleLoaderidmx:ModuleLoaderid="currentModule"ready="readyModule(event)"  width="100%"height="100%"/> </mx:Panel>

***個(gè)Panel包含了控制示例中模塊（Module）加載和卸載的RadioButtons。第二個(gè)Panel是使用<mx:ModuleLoader>標(biāo)簽加載模塊（Module）的地方。注意那個(gè)id為currentModule的ModuleLoader，它有一個(gè)關(guān)于ready事件的事件處理器。當(dāng)Flex模塊化中模塊SWF文件加載了足夠多可以開(kāi)始使用的時(shí)候，ModuleLoader就會(huì)分派ready事件（或者說(shuō)ModuleEvent.READY）。

這里有一個(gè)readyModule函數(shù)，它在<mx:Script>塊中：

程序代碼

privatefunctionreadyModule(event:ModuleEvent):void  {  varml:ModuleLoader=event.targetasModuleLoader;   varichild:IExpenseReport=ml.childasIExpenseReport;  if(ichild!=null){  ichild.expenseReport=expenses;  }  }

注意ModuleLoader的child屬性是如何轉(zhuǎn)換為IExpenseReport類(lèi)的。IExpenseReport是一個(gè)所有模塊（Module）都實(shí)現(xiàn)了的接口。只要每個(gè)模塊都實(shí)現(xiàn)了這個(gè)接口，它就可以很容易適應(yīng)于應(yīng)用程序。換句話說(shuō)，想象一下當(dāng)你需要?jiǎng)?chuàng)建另一個(gè)表單或者報(bào)告的時(shí)候它的用途。并不需要更改主程序?yàn)樾履K添加IF語(yǔ)句，你只要在新模塊中實(shí)現(xiàn)IExpenseReport接口它就可以在程序中***地運(yùn)行。

IExpenseReport接口：

程序代碼

publicinterfaceIExpenseReport  {  functionsetexpenseReport(ac:ArrayCollection):void;  }

每個(gè)模塊（Module）都實(shí)現(xiàn)這個(gè)接口，定義各自的名為expenseReport的set函數(shù)。下面是ChartModule的根標(biāo)簽和接口IExpenseReport的實(shí)現(xiàn)：

程序代碼

<mx:Modulexmlns:mxmx:Modulexmlns:mx="http://www.adobe.com/2006/mxml"implements="IExpenseReport"  layout="vertical" percentWidth="100"percentHeight="100"> <mx:Script><![CDATA[  importmx.collections.ArrayCollection;  [Bindable]publicvarexpenses:ArrayCollection;   publicfunctionsetexpenseReport(ac:ArrayCollection):void  {  expenses=ac;  }  ]]></mx:Script> ...  </mx:Module>

讓我們回到主程序，RadioButton的click事件會(huì)卸載任何當(dāng)前已加載的模塊然后加載一個(gè)新的模塊。下面是ChartModule的RadioButton標(biāo)簽：

程序代碼

<mx:RadioButtonxmx:RadioButtonx="10"y="123"label="Chart"click="readyModule('ChartModule.swf')"/>

這個(gè)click事件會(huì)調(diào)用上面列出的readyModule事件。

編譯并運(yùn)行程序

如果你使用了FlexBuilder2，請(qǐng)確定更改了項(xiàng)目的Properties將模塊（Module）作為"Applications"包含進(jìn)來(lái)。這樣FlexBuilder2回將它們編譯進(jìn)SWF文件并且放進(jìn)bin文件夾中。

FlexBuilder注意：要?jiǎng)?chuàng)建一個(gè)使用模塊（Module）的工程，請(qǐng)使用工程的Properties將模塊文件作為"Applications"。這會(huì)使得他們被編譯進(jìn)SWF文件。

一旦SWF文件被創(chuàng)建你就可以運(yùn)行主程序并點(diǎn)擊RadioButtons在模塊（Module）之間切換。

FlexBuilder注意：FlexBuilder并不會(huì)保存任何關(guān)于模塊（Module）和主程序的從屬信息。只要你對(duì)一個(gè)模塊（Module）作了更改，你就可能需要重新編譯主程序或其它從屬的模塊（Module）。

將SWF文件***化

如果你查看一下主程序的SWF文件和Flex模塊化中模塊的SWF文件的話，你會(huì)發(fā)現(xiàn)它們的大小差不多。這就說(shuō)明，模塊的SWF和主程序SWF中有很多同樣的組件定義。

FlashPlayer并不會(huì)保存元件（symbol）的副本。例如，如果主程序有一個(gè)Button組件而一個(gè)模塊（Module）也有一個(gè)Button組件，F(xiàn)lashPlayer就不會(huì)從模塊中加載Button了，因?yàn)樗呀?jīng)在主程序中有定義了。

使用-link-report=report.xml編譯主程序，這樣會(huì)創(chuàng)建一個(gè)鏈接到主程序的包含所有元件信息的文件。然后在編譯模塊（Module）的時(shí)候會(huì)使用那個(gè)report.xml文件。

程序代碼

mxmlc-load-externs=report.xmlChartModule.mxml

當(dāng)ChartModule被編譯的時(shí)候，所有在report.xml文件中列出的元件將會(huì)在它的SWF中省略。當(dāng)我不使用report.xml文件編譯ChartModule.swf的時(shí)候，它的大小是202K。而當(dāng)我使用report.xml文件的時(shí)候，SWF的大小只有68K。這大大減少了模塊（Module）的加載時(shí)間。

在文章的開(kāi)始將到模塊（Module）的時(shí)候，我提過(guò)接口有另一個(gè)作用。假設(shè)你沒(méi)有使用接口而是在主程序中引用模塊的類(lèi)。當(dāng)你運(yùn)行l(wèi)ink-report的時(shí)候，你的模塊類(lèi)將會(huì)出現(xiàn)在report.xml中。當(dāng)你使用使用link-report編譯模塊（Module）的時(shí)候你的模塊并不會(huì)包含在它自己的SWF中！起初這并不會(huì)成為一個(gè)問(wèn)題，盡管主程序由于包含了模塊的定義而變得很大。然而，當(dāng)你更改你的模塊的時(shí)候發(fā)生了什么才是重要的。如果你沒(méi)有重新編譯主程序，你主程序的SWF文件將會(huì)包含模塊（Module）舊的定義&mdash;&mdash;而不是你已經(jīng)更改過(guò)的。

程序代碼

mxmlc-link-report=report.xmlMain.mxml  mxmlc-load-externs=report.xmlChartModule.mxml  //etc.

如果你決定使用這個(gè)技術(shù)來(lái)減小模塊（Module）的大小，那么就使用接口來(lái)確保終端用戶使用的總是模塊（Module）的***版本。

FlexBuilder注意：FlexBuilder在一個(gè)工程里沒(méi)有辦法做到這些。如果你確定你將要?jiǎng)?chuàng)建一個(gè)使用模塊（Module）的工程，可以考慮一下將公共的類(lèi)和接口（包括event類(lèi)）放到一個(gè)SWC（FlexLibraryProject）中然后將模塊（Module）分離到它們各自的工程里。

或者，你可以將所有東西創(chuàng)建為一個(gè)單一的Flex工程，然后將***化作為一個(gè)產(chǎn)品化前或測(cè)試前的部署步驟在FlexBuilder之外進(jìn)行。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Flex模塊化應(yīng)用程序開(kāi)發(fā)的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!