PureMvc 简介

最新推荐文章于 2025-02-09 20:11:35 发布

D_xiong

最新推荐文章于 2025-02-09 20:11:35 发布

阅读量792

点赞数

分类专栏： Flex

本文链接：https://blog.youkuaiyun.com/u013671526/article/details/41350075

版权

Flex 专栏收录该内容

20 篇文章

订阅专栏

PureMVC 称之为纯粹的MVC框架模式

旨在分割程序，让业务数据处理与页面层脱离，其实就是所谓的mvc模式，model，view，control三者的分离

pureMVC首先它有一个众观全场的Facade类，这个单例类捆绑创建了mvc的三个单例，加上消息通知机制，从而掌控全局。因为facade将mvc和消息都归置在

自己其下，所以这4者的运行变化都可以借托于facade而互通有无。

主类mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:Component="Component.*" creationComplete="init(event)" >
	
	<fx:Script>
		<![CDATA[
			import Application.ApplicationEventName;
			import Application.ApplicationFacade;
			
			import org.puremvc.as3.patterns.facade.Facade;
			
			private var facade : ApplicationFacade = ApplicationFacade.getInstance();
			private function init(e:Event):void{
				
				facade.startUp(this);
			}
		]]>
	</fx:Script>
	<s:VGroup horizontalCenter="0" verticalCenter="0" horizontalAlign="right">
		<s:HGroup verticalAlign="middle">
			<s:Label     text="用户名"/>
			<s:TextInput id="loginName"  />
		</s:HGroup>
		<s:HGroup verticalAlign="middle">
			<s:Label text="密码"/>
			<s:TextInput id="passWord" />
		</s:HGroup>
		<s:Button label="登陆" click="{facade.sendNotification(ApplicationEventName.BUTTON_CLICK,{name : this.loginName.text,passWord : this.passWord.text})}"/>
	</s:VGroup>
	
	
</s:Application>

首先创建Facade的单例，当我们创建Facade的单例的时候

package Application
{
	import Application.controller.ClickCommand;
	import Application.controller.StartupCommand;
	
	import org.puremvc.as3.interfaces.IFacade;
	import org.puremvc.as3.patterns.facade.Facade;
	
	public class ApplicationFacade extends Facade implements IFacade
	{
		public function ApplicationFacade()
		{
			super();
		}
		
		/**
		 * 获取单例
		 */
		
		public static function getInstance():ApplicationFacade{
			
			if(!instance){
				
				instance = new ApplicationFacade();
			}
			return instance as ApplicationFacade;
		}
		
		override protected function initializeController():void{
			
			super.initializeController();
			registerCommand(ApplicationEventName.STARTUP,StartupCommand);
			registerCommand(ApplicationEventName.BUTTON_CLICK,ClickCommand);
			
		}
		
		public function startUp(topView : Object):void
		{
			sendNotification(ApplicationEventName.STARTUP,topView);
		}
	}
}

这里利用getInstance创建单例，保证了facade的唯一性，然后重写了controller的小组件command的创建，一开始就进行创建，让程序有个入口可以开始程序的运行。

创建了StartupCommand的controller小例子，它捆绑了ApplicationEventName.STARTUP的消息，有这样的消息发出，它就要对应的实施相应的反馈行为。

所以可以看到public function startUp的函数下，程序发送了AppliationEventName.STARTUP的消息，这个是整个程序运行的入口，它发送了消息和相应的附加内容。然后

其他的就不关它的事了，接下来就是有监听该消息的需要出示证明，然后才可以签收附加的内容。接下来看StartCommand的类

package Application.controller
{
	import Application.model.DataProxy;
	import Application.view.NameMediator;
	import Application.view.PasswordMediator;
	
	import org.puremvc.as3.interfaces.INotification;
	import org.puremvc.as3.patterns.command.SimpleCommand;
	
	public class StartupCommand extends SimpleCommand
	{
		public function StartupCommand()
		{
			super();
		}
		
		override public function execute(notification:INotification):void{
			
			var topView : TryAAA = notification.getBody() as TryAAA;
			
			facade.registerProxy(new DataProxy);
			facade.registerMediator(new NameMediator(topView.loginName));
			facade.registerMediator(new PasswordMediator(topView.passWord));
		}
	}
}

刚才我们将消息跟该类捆绑了，所以有消息send就由它接收，然后实行操作函数execute，这里通过getBody签收了发过来的附加内容，然后就可以用这个附加内容进行大刀阔斧的改革，这里facade相关有有三个注册事件，分别是数据层的简历，和两个业务层的创立，到这里就统一的将页面的mvc轮廓搭建完毕。

接下来只要对消息的发送和消息的处理阶段进行完善就可以完成程序的编写。

在业务层界面:

package Application.view
{
	
	
	import spark.components.TextInput;
	
	import Application.ApplicationEventName;
	
	import org.puremvc.as3.interfaces.INotification;
	import org.puremvc.as3.patterns.mediator.Mediator;
	
	/**
	 * 用户名外观
	 */
	
	
	public class NameMediator extends Mediator
	{
		public static const NAME : String = "NameMediator"
		public function NameMediator(viewComponent:Object=null)
		{
			super(NAME, viewComponent);
		}
		
		override public function listNotificationInterests():Array{
			
			return [ApplicationEventName.ALL_CORRECT,ApplicationEventName.ALL_WRONG,ApplicationEventName.NAME_CORRECT,
					ApplicationEventName.PASSWORD_CORRECT];
		}
		
		
		override public function handleNotification(notification:INotification):void{
			
			switch(notification.getName()){
				
				case ApplicationEventName.ALL_CORRECT:
					nameUI.text = "用户名输入正确！!"
					break;
				
				case ApplicationEventName.ALL_WRONG:
					nameUI.text = "用户名输入错误！!"
					break;
				
				case ApplicationEventName.NAME_CORRECT:
					nameUI.text = "用户名输入正确！!"
					break;
				
				case ApplicationEventName.PASSWORD_CORRECT:
					nameUI.text = "用户名输入错误！!"
					break;
			}
		}
		
		
		public function get nameUI():TextInput{
			
			return (this.viewComponent as TextInput);
		}
	}
	
	
}

package Application.view
{
	
	
	import spark.components.TextInput;
	
	import Application.ApplicationEventName;
	
	import org.puremvc.as3.interfaces.INotification;
	import org.puremvc.as3.patterns.mediator.Mediator;
	
	/**
	 * 密码栏外观
	 */
	public class PasswordMediator extends Mediator
	{
		public static const NAME : String = "PasswordMediator";
		public function PasswordMediator( viewComponent:Object=null)
		{
			super(NAME, viewComponent);
		}
		
		override public function listNotificationInterests():Array{
			
			return [ApplicationEventName.ALL_CORRECT,ApplicationEventName.ALL_WRONG,ApplicationEventName.NAME_CORRECT,
				ApplicationEventName.PASSWORD_CORRECT];
		}
		
		
		override public function handleNotification(notification:INotification):void{
			
			switch(notification.getName()){
				
				case ApplicationEventName.ALL_CORRECT:
					passWordUI.text = "密码输入正确！！"
					break;
				
				case ApplicationEventName.ALL_WRONG:
					passWordUI.text = "密码输入错误！！"
					break;
				
				case ApplicationEventName.NAME_CORRECT:
					passWordUI.text = "密码输入错误！！"
					break;
				
				case ApplicationEventName.PASSWORD_CORRECT:
					passWordUI.text = "密码输入正确！！"
					break;
			}
		}
		
		public function get passWordUI():TextInput{
			
			return this.viewComponent as TextInput;
		}
	}
}

这里利用listNotificationInterests():Array 决定它所关注的消息内容，将这些消息与它捆绑在一起。

然后利用handleNotification(notification:Inotification):void{}这个分门别类的进行相应的操作。

这里主要涉及到从外界的传入的viewComponent的还原，利用get():*{return this.viewComponent as *}进行还原，然后就可以调用属于这个家伙的方法和属性。

package Application.model
{
	import Application.ApplicationEventName;
	
	import org.puremvc.as3.patterns.proxy.Proxy;
	
	public class DataProxy extends Proxy
	{
		
		public static const NAME: String = "dataProxy";
		public function DataProxy()
		{
			super(NAME);
		}
		
		public function checkData(obj : Object):void{
			
			if(obj.name == "xzx" && obj.passWord != "123456"){
				
				sendNotification(ApplicationEventName.NAME_CORRECT);
			}else if(obj.name != "xzx" && obj.passWord == "123456"){
				
				
				sendNotification(ApplicationEventName.PASSWORD_CORRECT);
			}else if(obj.name == "xzx" && obj.passWord == "123456"){
				
				sendNotification(ApplicationEventName.ALL_CORRECT);
			}else{
				
				sendNotification(ApplicationEventName.ALL_WRONG);
			}
			
		}
	}
}

对应的名字，这样外界的command要借手于对应的proxy才知道对应找谁，然后公开的接口，让外部的command可以调用。

在上面还有一个clickCommand的操作类：

package Application.controller
{
	import Application.model.DataProxy;
	
	import org.puremvc.as3.interfaces.INotification;
	import org.puremvc.as3.patterns.command.SimpleCommand;
	
	public class ClickCommand extends SimpleCommand
	{
		public function ClickCommand()
		{
			super();
		}
		
		override public function execute(notification:INotification):void{
			
			dataProxy.checkData(notification.getBody())
			
		}
		
		public function get dataProxy():DataProxy{
			
			return facade.retrieveProxy(DataProxy.NAME) as DataProxy;
		}
	}
}

这里通过facade.retrieveProxy(DataProxy.NAME)获得了属于它的数据层操作，然后也可以发送捆绑的内容过去给让proxy数据层加工操作。

这里总结，m v c 在主页面下的通过传送this，就可以调用到各式各样的view层，然后就可以让小view层发生各式各样的变化。

创建proxy 构造函数包含name 值和 obj值创建 mediator 构造函数包含 name 和 obj 值，command包含消息内容和对应的obj，再交由execture处理操作。

所有的消息发送都可以发送消息string 和 obj形式，然后通过getBody可获得obj，getName获得？