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 脚本的方法，可以在两个文件之间相互调用，非常方便。而它的本质其实是

在编译的时候，把两个文件的代码合并在一起，就像本文开头未分离时一样。这些代码

最终是定义在同一个类里面的，只是在我们写代码的时候人为的分离出来，方便管理而已。