打造 自己的 Flex MVC 框架

以前用Cairngorm框架的时候，颇为惊讶，居然只有十几K的大小

难道很简单？

 

用了一段时间后，发现，其实做个MVC框架并不是很难（难在完善与通用）

 

自己也想搞点积累，就试着做了起来，打算搞个自己的MVC框架

 

要做这个首先要明白MVC是什么

M（模型）：说白了，就是存储数据，操作数据的地方

V（视图）：就是视图，负责呈现，数据绑定等

C（控制器）：连接视图和模型的地方，在Flex中，就是做事件转发和监听增加的

 

除了上面的，还需要知道， 用了MVC会达到什么效果

 

简单的说，就是让数据存储，和数据操作 跟 视图呈现分离开

也就是让Module或者Application中，持有仅可能少的代码，把代码都放到AS类中

 

好，废话到这，下面是代码：

C层，控制器层：

package com.emavaj.mvc.control{
	import mx.core.Application;

	/**.
	 * 命令控制者，即为控制层MV(C)
	 */
	public class Controlor{
		/**增加监听.*/
		public static function addCommand(event:String, clazz:Class):void {
			/**clazz类是实现了com.emavaj.mvc.Command接口的类.*/
			var temp:Object = new clazz();
			/**将模型层接口中的doCommand方法加入监听.*/
			if (temp.hasOwnProperty("doCommand")) {
				var fun:Function = temp["doCommand"];
				Application.application.addEventListener(event,fun);
			} else {
				throw Error("增加监听:" + event + ",失败!");
			}
		}
		
		/**增加监听，具体到函数.*/
		public static function addCommandWithFunction(event:String, clazz:Class, fun:String):void {
			var temp:Object = new clazz();
			if (temp.hasOwnProperty(fun)) {
				var theFunction:Function = temp[fun];
				Application.application.addEventListener(event,theFunction);
			} else {
				throw Error("增加监听:" + event + ",失败!");
			}
		}
	}
}

 我的思路是模仿Cairngorm框架的，

就是把

addEventListener

 

这个函数封装一次，把参数，从 事件标识 + 函数

改为了 事件标识 + 类

好处就是，让监听该事件的函数，不仅仅是监听函数调用的类的函数而已

比如：

主应用程序中调用增加监听Event.ADDED事件，那么对这个事件的响应函数，必须是主应用程序中的函数

（当然，如果你像上面那么做反射的话，也可以。其实我就是封装了一次）

 

下面是M层，模型层：

package com.emavaj.mvc.command{
	/**.
	 * 命令执行接口
	 */
	public interface ICommand{
		/**执行命令方法.*/
		function doCommand(event:*):void;
	}
}

 

 这层，我仅提供了一个接口

也就是为 控制层服务的，当我再控制层利用反射 取得该类的函数时

我默认就制定 模型层中的接口 doCommand 方法为执行函数

（当然，我上面也提供了一个类中任意函数监听的方法）

 

也就是所，充当数据处理的AS类，只有实现ICommand接口，然后完成这个函数，就可以在增加监听的时候

传入处理类的类名

事件发生时，就会直接执行到doCommand方法

从而实现了逻辑的分离

 

下面是V层，视图层

package com.emavaj.mvc.view{
	import mx.core.Application;
	import mx.modules.ModuleLoader;

	/**.
	 * 视图工具
	 */
	public class ViewUtil{
		/**单例对象.*/
		private static var viewUtil:ViewUtil;
		
		/**获取ModuelLoader.*/
		public static function getModuleLoader(Id:String):ModuleLoader {
			var app:Object = Application.application;
			if (app.hasOwnProperty(Id)) {
				var property:ModuleLoader = app[Id];
				return property;
			} else {
				throw Error("取得ModuleLoader失败,该应用程序没有ID为:" + Id + "的ModuleLoader");
			}
		}
		
		/**获取Moduel.*/
		public static function getModule(Id:String):Object {
			var app:Object = Application.application;
			if (app.hasOwnProperty(Id)) {
				var property:ModuleLoader = app[Id];
				return property.child;
			} else {
				throw Error("取得Module失败,该应用程序没有ID为:" + Id + "的ModuleLoader");
			}
		}
		
		/**获取组件,获取任意视图base中的视图Id组件.*/
		public static function getView(base:Object, Id:String):Object {
			if (base.hasOwnProperty(Id)) {
				var property:Object = base[Id];
				return property;
			} else {
				throw new Error("取得组件失败," + base + "视图中没有" + Id + "组件");
			}
		}
	}
}

 

 

明显看到，视图层和控制层都是伪类

视图层提供数据呈现的当然是控件或.MXML文件

 

这里的视图层只提供了视图的查找

也就是说，你使用ViewUtil中的静态方法

就可以在 程序很任意地方，AS类，或者任意Module，来获得任意视图、Module的引用

从而操作视图变化!

 

至此，MVC已经完成

 

同时我也提供了一些简单的服务获取

package com.emavaj.mvc.util{
	import mx.core.Application;
	import mx.rpc.events.FaultEvent;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.remoting.RemoteObject;

	/**.
	 * 远程服务对象工具类
	 */
	public class RemoteUtil{
		
		/**取得远程调用对象.*/
		public static function getRemoteById(Id:String):RemoteObject {
			return Application.application[Id];
		}
		
		/**组成调用监听方法.*/
		public static function addListener(remote:RemoteObject, success:Function, fault:Function):void {
			remote.addEventListener(ResultEvent.RESULT, success);
			remote.addEventListener(FaultEvent.FAULT, fault);
		}
		
		/**移除调用监听.*/
		public static function removeListener(remote:RemoteObject, success:Function, fault:Function):void {
			remote.removeEventListener(ResultEvent.RESULT, success);
			remote.removeEventListener(FaultEvent.FAULT, fault);
		}
	}
}

 

 

写出了一些Remote的常用方法，获取RemoteObject引用，增加监听，异常监听等

虽属于MVC范畴，但是作为框架，必定少不了

 

如果有什么意见或建议，欢迎留言，讨论

附件有源码和SWC文件

（SWC在源码的bin目录下，可以直接使用）

评论

2 楼 qq123zhz 2010-06-18  

[e-mail],拜托mail个使用的例子给我。。。

1 楼 qq123zhz 2010-06-18  

如何使用该MVC的例子，有不？