puremvc框架之proxy

简介: 上一篇 puremvc框架之Command 里,已经学习了如何利用Command来解耦View层与业务逻辑的依赖,但是仍然有二个问题: 1、ButtonMediator中发送消息时,仍然采用硬编码的方式,将消息内容写死在代码中: private function btnClick(e:MouseEvent):void{ this.

上一篇 puremvc框架之Command 里,已经学习了如何利用Command来解耦View层与业务逻辑的依赖,但是仍然有二个问题:

1、ButtonMediator中发送消息时,仍然采用硬编码的方式,将消息内容写死在代码中:

private function btnClick(e:MouseEvent):void{
			this.sendNotification(AppFacade.CHANGE_TEXT,"Hello PureMVC !");
		}		

这显然不是一个好的设计,不够灵活

2、我们一直在说puremvc是一个mvc框架,至今为止 controller(即Command)、view(即Mediator)都已经出现过了,但是model层还是不见踪影,puremvc中的model层在哪里

在asp.net mvc中,model层通常是定义数据实体的部分,可以选用的技术有很多,比如linq to sql,linq to entity ,nhibernate之类,这个概念在puremvc中仍然是相通的,只不过换了个名字,我们称之为Proxy

先来定义一个AppProxy类吧(放到mvc.model包中),代码如下:

package mvc.model
{
	import org.puremvc.as3.interfaces.IProxy;
	import org.puremvc.as3.patterns.proxy.Proxy;
	import flash.events.IOErrorEvent;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;


	public class AppProxy extends Proxy implements IProxy
	{
		public static const NAME:String="AppProxy"; //名称常量

		public function AppProxy(proxyName:String=null, data:Object=null)
		{
			super(NAME, data);//将本proxy的名称常量传入其中
			var _loader:URLLoader=new URLLoader;
			_loader.addEventListener(Event.COMPLETE, onComplete);
			_loader.addEventListener(IOErrorEvent.IO_ERROR, onError);
			_loader.load(new URLRequest("data.xml"));
		}

		private function onComplete(e:Event):void
		{

			var _xml:XML=XML(e.target.data);
			setData(_xml); //将xml内容保存进data
		}

		private function onError(e:IOErrorEvent):void
		{
			trace("数据获取失败!");
		}
	}
}

这里,我们用xml做为数据源来提供数据,data.xml放到根目录下,内容如下:

<?xml version="1.0" encoding="UTF-8"?> 
<message> 
        <msg>Hello World!</msg>
</message> 

ok,这一步做好后,老问题又来了:如何让它跟puremvc环境中的facade实例挂上勾?类似上一篇的处理,还是放到AppCommand中来处理

package mvc.controller
{
	import mvc.AppFacade;
	import mvc.model.AppProxy;
	import mvc.view.ButtonMediator;
	import mvc.view.TextMediator;
	
	import org.puremvc.as3.interfaces.INotification;
	import org.puremvc.as3.patterns.command.SimpleCommand;

	public class AppCommand extends SimpleCommand
	{
		public function AppCommand()
		{
			super();
		}

		public override function execute(inote:INotification):void
		{
			var _main:main=inote.getBody() as main;
			
			//注册proxy
			facade.registerProxy(new AppProxy());
			
			facade.registerMediator(new TextMediator(_main.txtResult));
			facade.registerMediator(new ButtonMediator(_main.btnSend));			
			
			facade.registerCommand(AppFacade.CHANGE_TEXT,ChangeTextCommand);
		}
	}
}

注意加注释的部分facade.registerProxy(new AppProxy());这样就ok了,这一步执行后,puremvc环境中就已经有data.xml的数据了

现在就可以把原来ButtonMediator中硬编码的部分去掉了,改成下面这样:

private function btnClick(e:MouseEvent):void{
		//this.sendNotification(AppFacade.CHANGE_TEXT,"Hello PureMVC !");			
		sendNotification(AppFacade.CHANGE_TEXT);
	}

即:view层只发送消息(类型),通知puvrmvc环境--“CHANGE_TEXT消息我已经发出去了!”,至于数据在哪,谁去处理,关我P事!

OK,有人发了消息,自动就要有人处理,接下来折腾ChangeTextCommand.as

public override function execute(notification:INotification):void{
			
			var _proxy:AppProxy=facade.retrieveProxy(AppProxy.NAME) as AppProxy;			
			var _xml:XML=XML(_proxy.getData());			
			trace(_xml);			
			(facade.retrieveMediator(TextMediator.NAME) as TextMediator).txtInstance.text = _xml.msg;			
			//(facade.retrieveMediator(TextMediator.NAME) as TextMediator).txtInstance.text = notification.getBody() as String;
		}

这里,我们把原来的方法注释掉了,改成用Proxy的getData获取刚才data.xml中的数据,然后该数据赋值为TextMediator相关联的文本框.

至此,M(proxy)-V(mediator)-C(command)全都登场了,相互之间也实现了完全解耦!

 

最后再从头回顾一下主要的处理细节

1、man.mxml中通过 AppFacade.getInstance().startup(this) 启动puvemvc环境

2、而AppFacade又通过this.registerCommand(START_UP, AppCommand) 注册AppCommand

3、AppCommand中又通过

facade.registerProxy(new AppProxy());			
facade.registerMediator(new TextMediator(_main.txtResult));
facade.registerMediator(new ButtonMediator(_main.btnSend));		
facade.registerCommand(AppFacade.CHANGE_TEXT,ChangeTextCommand);

把mediator、proxy以及消息CHANGE_TEXT相关的ChangeTextCommand给扯进来

4、然后ButtonMediator中又通过sendNotification(AppFacade.CHANGE_TEXT)来发送自己感兴趣的消息

5、最后CHANGE_TEXT消息被与之关联的ChangeTextCommand得到,并在execute方法中处理以更新UI界面。

源文件下载:http://cid-2959920b8267aaca.office.live.com/self.aspx/flex/PureMVC^_Proxy.fxp (用FB4导入即可)

目录
相关文章
|
10天前
|
设计模式 监控 数据库
代理模式(Proxy Pattern)
代理模式(Proxy Pattern)是一种设计模式,通过一个中间对象(代理)来间接访问目标对象,以控制访问权限或添加额外功能。常见的代理类型包括远程代理、虚拟代理、保护代理和智能引用代理。代理模式常用于延迟加载、权限控制、日志记录等场景,能够提高系统的灵活性和安全性。
34 3
|
6月前
|
网络协议 PHP
Swoole 源码分析之 Http Server 模块
想要了解到 `Http Server` 的全貌,其实只要把那张整体的实现图看懂就足以了。但是,如果想要有足够的深度,那么就还需要深入 `Swoole` 的源代码中,就着源码自行分析一遍。同时,也希望这一次的分析,能够给大家带来对 `Swoole` 更多的一些了解。并不要求要深刻的掌握,因为,很多的事情都不可能一蹴而就。从自己的实力出发,勿忘初心。
87 0
Swoole 源码分析之 Http Server 模块
|
7月前
|
Python
proxy配置
proxy配置
|
前端开发 中间件 应用服务中间件
webpack代理proxy配置
前端项目开发中我们经常会用到 proxy 代理来解决接口跨域问题,通常是在 webpack.config.js 或 vue.config.js 或 vite.config.js 中配置
199 0
|
缓存 应用服务中间件 nginx
重识Nginx - 11 使用ngx_http_proxy_module的proxy_cache搭建一个具备缓存功能的反向代理服务
重识Nginx - 11 使用ngx_http_proxy_module的proxy_cache搭建一个具备缓存功能的反向代理服务
211 0
proxy的基本用法
proxy的基本用法
263 0
|
设计模式 安全 Java
【Java设计模式】代理模式(Proxy Pattern)
为其他对象提供一种代理,以控制对这个对象的访问,代理对象在客户端和目标对象之间起到中介作用。
159 0
【Java设计模式】代理模式(Proxy Pattern)
Proxy 对象简介
关于Vue3 中的数据响应式功能,我们大家应该都知道,它是通过 ES6的代理模式——Proxy 对象实现的,今天我们来简单认识下何为 Proxy 对象。
319 0
你管这叫代理模式(Proxy Pattern)
代理模式即给一个真实类提供一个代理类,该代理类代替真实类完成其功能,一般还可在代理类上添加一些真实类不具有的附加功能,通俗来讲代理模式就是我们生活中常见的中介,代理模式又可分为静态代理和动态代理。