Flex中視圖(mxml)和代碼(as)的完全分離

未分離之前是這樣的：

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:mx="library://ns.adobe.com/flex/mx"
		creationComplete="initApp()">
	<fx:Script>
		<![CDATA[
			private var clickNum:int = 0;

			public function initApp():void
			{
				lbl.text = "hello world.";
			}

			public function onClick():void
			{
				clickNum++;
				lbl.text = "click num: " + clickNum;
			}
		]]>
	</fx:Script>
	<s:Label id="lbl" x="10" y="10" width="100" height="20" text=""/>
	<s:Button x="80" y="40" label="Button" click="onClick()"/>
</s:WindowedApplication>
           

分離之後是這樣的：

Flex啟動類 HelloWorld.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:mx="library://ns.adobe.com/flex/mx"
		creationComplete="initApp()">
	<fx:Script source="HelloWorld.as" />
	<s:Label id="lbl" x="10" y="10" width="100" height="20" text=""/>
	<s:Button x="80" y="40" label="Button" click="onClick()"/>
</s:WindowedApplication>
           

視圖關聯腳本 HelloWorld.as

private var clickNum:int = 0;

public function initApp():void
{
	lbl.text = "hello world.";
}

public function onClick():void
{
	clickNum++;
	lbl.text = "click num: " + clickNum;
}
           

這樣就把視圖布局和邏輯代碼完全分離開了。

最關鍵的就是這行：

<fx:Script source="HelloWorld.as" />
           

有些人可能會說 mxml 和 as 檔案不能同名，會報錯，嗯，聽我解釋。

mxml 檔案本身就是一個類，如果你再定義一個同名的 as 類，那麼，當然會報錯了。

看清楚，上面的 HelloWorld.as 是一個純腳本，不是一個類，如果加上包名、類名，

就會報嵌套定義錯誤。

上面的用法與 HTML 和 js 的用法是一樣的，它們之間的關系也是一樣的。

網上看到有很多人是這樣做的：

把邏輯代碼寫在一個類裡，這個類要繼承 WindowedApplication 或其它視圖類，然後

把這個類作為标簽在 mxml 中取代原來的 <s:WindowedApplication> 标簽，在這個

标簽屬性中再加個 xmlns 命名空間指向前面定義的 as 類，這樣做也可以實作分離。

這是讓 mxml 類繼承 as 類，把視圖類作為子類，在子類中調用父類的方法。但這樣

做的弊端也很明顯，子類可以調用父類的方法，而父類通路子類的元件就不友善了。

而用類似 js 腳本的方法，可以在兩個檔案之間互相調用，非常友善。而它的本質其實是

在編譯的時候，把兩個檔案的代碼合并在一起，就像本文開頭未分離時一樣。這些代碼

最終是定義在同一個類裡面的，隻是在我們寫代碼的時候人為的分離出來，友善管理而已。