PureMVC软件架构分析与鉴赏
李俊杰
概述
随着客户端程序的风起云涌,Adobe公司收购了Macromedia公司,针对Flesh的客户端进行研发,推出了Flex语言。Flex语言是类似与java的面向对象语言,编码格式又吸收了Delphi的编码风格,尽管Flex可以展现Flesh的炫目的客户端效果,全新的用户体验,但针对企业化的应用,仅有Flex是远远不够的,需要有合理的软件架构规范,于是Flex世界的MVC框架就应运而生了,PureMVC是Flex世界中的MVC模式的具体实现,相对于adobe官方的Cairngorm的Flex MVC框架,PureMVC更加简单实用。
PureMVC的整体架构
从使用者角度上讲,PureMVC设计的非常合理,对外的接口是Façade,由Façade来组织整个应用,其命名规范也显而易见,可以望文生义。其中Controller,Model,View是管理ICommand,IProxy,IMediator的容器,而ICommand,IProxy,IMediato是应用系统要扩展的MVC各层的接口。
这样,使用者就可以方便地扩展Façade,Command,Proxy,Mediator,来完成MVC各层的功能,没有特殊的需要,一般无需关注Model,View,Controller核心代码。
<v:shapetype o:spt="75" coordsize="21600,21600" filled="f" stroked="f" id="_x0000_t75" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t"><v:stroke joinstyle="miter"></v:stroke><v:formulas><v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f></v:formulas><v:path o:extrusionok="f" o:connecttype="rect" gradientshapeok="t"></v:path><o:lock v:ext="edit" aspectratio="t"></o:lock></v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" o:ole="" style="WIDTH: 344.25pt; HEIGHT: 252.75pt"><v:imagedata src="file:///C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\msohtml1\01\clip_image001.emz" o:title=""></v:imagedata></v:shape>
PureMVC的分层设计理念
PureMVC的各个层次各负其责,Façade实现统一管理,定义了系统的统一接口,使用者无需了解底层代码的运作方式。 Model层是实现与后台交互的层次,由Model类来管理Proxy,当然在Flex中也支持直接访问数据库,但大多数业务系统中,都是Flex作为客户端程序,而后台由Java或者.net来完成真正的业务操作。View层是显示层,在PureMVC中由Mediator实现对Viewcomponent的操作,如界面的简单校验等功能。Controller层是控制层,主要来处理一些数据转换等工作。下面具体介绍各层的具体功能及设计
Façade,外部应用的接口界面
从下图可以看出,Façade是对外的接口,同时管理Model,View, Controller,同时Façade是singleton。
1)在Java中实现singleton模式,构造方法都使用private方法,而这儿使用了public,但看第一句代码,呵呵!效果是一样的。但最好不要直接调用这个public方法
public function Facade( ) {
if (instance != null) throw Error(SINGLETON_MSG);
instance = this;
initializeFacade();
}
2)模板模式的应用
protected function initializeFacade( ):void {
initializeModel();
initializeController();
initializeView();
}
在Façade的构造方法中使用了模板模式,虽然Façade本身也实现了这些初始化方法,但都是获得Model,Controller,View,在具体应用中就可以initializeController()这三个方法,来注册相关的Proxy,Command,Mediator等。注意,实际上override initializeController()方法是比较常见的,而不常override initializeModel()和initializeView(), 最常见的是在Command的execute()中创建并注册Proxy,或者创建并注册Mediator。
3)如下的IFacade接口中,其中的Proxy,Command,Mediator管理方法都是借助于Model,Controller,View的管理方法来实现的。
4)Façade是实现INotifier接口的,所以Façade可以向系统发出消息或者通知,因为Flex是客户端的程序语言,其调用方式也是类似与Windows方式的观察者(observer)模式,Façade是统一的接口界面,所以几乎所有的外部调用都是通过sendNotification()方法。这个方法的调用的是notifyObservers()方法,而这个方法是如下的:
public function notifyObservers ( notification:INotification ):void {
if ( view != null ) view.notifyObservers( notification );
}
通常你只需要调用sendNotification()。
<v:shape id="_x0000_i1026" type="#_x0000_t75" o:ole="" style="WIDTH: 415.5pt; HEIGHT: 272.25pt"><v:imagedata src="file:///C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\msohtml1\01\clip_image003.emz" o:title=""></v:imagedata></v:shape>
下面具体介绍PureMVC的MVC各层的架构设计:
Model与 Proxy
1)如上所述,Model也是Singleton设计模式,也无需使用new的方式创建,另外在企业应用中也很少直接扩展这个类,如果需要扩展,可以扩展initializeModel(),就相当于对Model的扩展了。
public function Model( )
{
if (instance != null) throw Error(SINGLETON_MSG);
instance = this;
proxyMap = new Array();
initializeModel();
}
2)Model是管理Proxy的容器类,使用类似与Java中的HashMap的数据类Array,来管理Proxy,代码类似:
protected var proxyMap : Array;
proxyMap[ proxy.getProxyName() ] = proxy;
包括后面谈到的Controller及View,都是这样管理其对象的,如获取某个值对象,
return proxyMap[ proxyName ];//简单吧,呵呵!
3)在registerProxy()和removeProxy()方法中,分别调用了Proxy的onRegister(),onRemove()方法,看到这儿,你是不是感到很熟悉。onXxxx()的命名规则,表示由子类实现详细内容来override父类的内容。抽象的原则是:共性化的东西向上(父类)抽象,个性化的东西向下(子类)延伸。即在实际应用中Proxy的onRegister(),onRemove()这两个方法是用来扩展我们自己的功能代码的。
Model:
public function registerProxy( proxy:IProxy ) : void
{
proxyMap[ proxy.getProxyName() ] = proxy;
proxy.onRegister();
}
Proxy:
public function onRegister( ):void {}
<v:shape id="_x0000_i1027" type="#_x0000_t75" o:ole="" style="WIDTH: 3in; HEIGHT: 229.5pt"><v:imagedata src="file:///C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\msohtml1\01\clip_image005.emz" o:title=""></v:imagedata></v:shape>
4)Proxy是我们要扩展的类,可以看出Proxy类实现了数据的交互,setData()和getData()方法实现数据的装载和获取,onRegister( )和onRemove( )可以实现相关Proxy注册和注销时的功能。
5)proxyName,是唯一表示系统中这个Proxy的名称,如上所述,Model管理Proxy是依赖类似与Java中HashMap的Array,所以必须是key->value(名值对),类似这样的设计还包括Mediator,Command,Façade等。
6)Proxy还实现了INotifier接口,所以也可以向外发送通知(消息),后面会具体讲解观察者模式在Flex中的广泛应用。
7)Proxy继承了Notifier类,在Notifier类中有Protected属性façade,这个Façade是系统中单例,所以可以通过这个Façade来注册相关的Mediator。
<v:shape id="_x0000_i1028" type="#_x0000_t75" o:ole="" style="WIDTH: 252pt; HEIGHT: 192pt"><v:imagedata src="file:///C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\msohtml1\01\clip_image007.emz" o:title=""></v:imagedata></v:shape>
View与 Mediator
1)类似于Model ,View是管理Mediator的容器类,但View除了管理Mediator以外,还管理Observer,后面会专门讲Observer,其他如Mediator,Command,Proxy,Façade对Observer的注册都最终到View中来管理。
2)View作为管理Mediator和Observer的容器,利用的就是Flex的Array对象,Array对象如上面所说的Java的HashMap,也类似与Java中的Stack,其有push(), pop()等方法,
public function registerObserver ( notificationName:String, observer:IObserver ) : void
{
var observers:Array = observerMap[ notificationName ];
if( observers ) {
observers.push( observer );
} else {
observerMap[ notificationName ] = [ observer ];
}
}
这儿使用了push()方法,可以看出和Java 的HashMap的差异,HashMap是key/value,而Flex Array中一个key,可以对应多个Value,事实上是一个通知(消息),对应多个观察者(1..n)。
<v:shape id="_x0000_i1029" type="#_x0000_t75" o:ole="" style="WIDTH: 308.25pt; HEIGHT: 280.5pt"><v:imagedata src="file:///C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\msohtml1\01\clip_image009.emz" o:title=""></v:imagedata></v:shape>
3)Mediator作为应用中要扩展的对象,被View容器管理,根据Flex的Array特性,每个Mediator必须有唯一的名称mediatorName,作为key,保存在Array中,同样Mediator也是继承了Notifier类,这样拥有Façade protected属性,可以注册相关Command<