基于puremvc的一个flexmp3播放器分析 (1)

做Flex做久了做大了，就会觉得之前写的的Flex代码开始有点乱，哪怕你写的规范了，但总觉得结构松散，维护不方便，相信很多人刚开始做Flex的时候，都是想到什么功能，就写什么功能，或者有些好点的，就先画了个大体的流程图之类的，因为现在Flex普及得还不够，很多人做Flex也是试探阶段，不敢用作商业项目或其它大项目，只会用来试水技术层面的，所以都是做些小应用的多，就会忽略了设计一个比较好的框架来开发。

所以Flex的开发框架就应运而生了。

目前，好的Flex开发框架还不多，官方有个Cairngorm的框架，可能有些人会说这个框架有点复杂，其实不然，对比起Ruby的Rails，Java的Struts,Spring之类的开发框架，就显得简单得多了。

只要清楚了解要MVC的概念，就会对这些框架并不陌生，但是今天的主角不是Cairngorm，而是另一个Flex框架PureMVC，如果说Cairngorm复杂的话，那么PureMVC就显得简单多了，PureMVC比较轻盈，核心也只有十来个类，是一个轻量级的Flex 框架，但PureMVC的通用性还是比较广的，有PHP的，有Java的有Python的。

可能直接说框架的使用会比较抽象，那么就由一个实例来开始讲解吧，就用一个PureMVC做的一个MP3播放器。

先来看看PureMVC的结构图：在图中，Facade，Model，View，Controller都是PureMVC的四个核心类，都是单例模式的，用户无需操作那Model,View,Controller类，而用户只需要操作Facade就够了，Facade类用来管理其它的三个单例类，顾名思义，那三个类都是分别对应MVC 模式的那三个元素，Facade也是个单例，它负责创建，激活，调用其它的三个类，管理MVC各屋的生命周期。

而我们看看Model类，又细分了一个Proxy类出来，我们称其为代理吧，就是对数据模型的一个代理，负责访问我们的数据对象（Data Object）也就是Cairngorm中的ValueObject，其实都是同一个概念。

而类结构上，对数据操作的代理Proxy类就只有一个，但可以从我们的应用上又分为Local Proxy，Remote Proxy，其实都只是Proxy ，只是根据用户的应用的不同，在Proxy里面实现不同的功能而已，比如如果你操作本地数据（内存中的数据，并非本地操作系统的文件），你可以写一些VO的getter/setter直接操作数据，而如果是Remote的数据的话，你可以在Proxy类里定义一些HttpService，URLLoader，WebService等等的访问远程数据的API，之后将获取到的远程数据放在VO中。

在Controller类里分出一个叫Command的类来，直接翻译的话，就是“命令”类，通常这些类都是用来处理一些业务流程，某些算法操作等等的操作。

比如现在用户单击了“获取数据”的按钮，程序将从Proxy类里访问服务器，服务器返回数据之后，那些都是程序看得懂的数据，比如是XML，而如果数据结构比较复杂，你不可能直接将数据显示给用户看吧？那就将解析这些数据的工作交给Command来做，比如写一个ParseCommand的类，将获得的XML数据传递给该Command，在Command里进行数据的过滤，排列，整理等等的功能。

再将组积好后数据交给Mediator来进行显示，而Mediator，就是下面我们要说的。

在View类里分出一个Mediator的类，该类是用来对ViewComponent操作的，我们暂且叫它“中介类”吧，为什么叫“中介”呢？其实就是用户界面（UI）与程序结构逻辑之间的中介，因为用户在界面上的操作，比如Button的Click事件不是直接反映到Command或者Proxy 类上的，而是反映给Mediator类，在Mediator里作一些简单处理，比如验证合法性，触发其它ViewComponent的状态等，在这里也会将用户的数据封装在VO里面，再交由Command 或Proxy来进一步处理。

基本上Mediator只对用户的操作或用户提交的数据进行封装并简单预处理，而业务逻辑，存储服务的就应交给Command和Proxy来做，这样MVC分工好，使得程序结构比较严紧，可读性强，实现松耦合。

当你改变了UI时，只需要对Mediator进行相应的改变就行了，而你改变了业务的逻辑与算法之类的话，也相应的改变Command就可以了，对其它模块的影响不大。

在上面这个图中，没有列出来的一个很重的类，就是Notification 类，这个类为什么十分重要，可以说也是PureMVC的润滑剂，因为他是连接MVC各大部分的一个消息机制，就像是Cairngome里面的CairngomeEvent与FrontController，为了实现更好的松耦合，就是靠这个消息机制，因为各大部分中，很少直接的引用调用，而是以“发消息”（或者说是通知吧）来相互数据交流与通讯，这里是很好的使用了“观察者模式”，因此，在某一部分改变的处理逻辑的话，只是它所发送的消息没有改变，或者所侦听的消息没有改变，那么就不会影响到其它部分。

另外要注意几点，Command类是短生命周期的，也就是说，当有消息通知需要用到该Command进行处理时，Facade就会创建这个Command类，并将数据传入Command里面进行处理，当处理完成后，其生命周期就会结束，所以不要将一些长生命周期的数据存放在Command里，比如不要将一些状态数据信息存放在Command里面。

还有就是Proxy类只会发送“消息”（通知），而不会接收任何消息，而Mediator与Command则可以发送与接收，所以你不能直接发消息通知Proxy去加载数据，而是通过引用Proxy的实例调用相关的函数。

理论就说了一大堆了，我们来看看那个MP3播放器实例吧！我们先来看看主程序的代码，PureMVC的入口点：1<?xml version="1.0" encoding="utf-8"?>2<mx:Application xmlns:mx="/2006/mxml"3 xmlns:view="com.jiangzone.flex.pureplayer.view.ui.*"4 verticalGap="2"5 layout="vertical" creationComplete="fadace.startup(this)"6 backgroundColor="0x444444">7<mx:Style>8 //这里的CSS代码略去9</mx:Style>1011<mx:Script>12<![CDATA[13 import com.jiangzone.flex.pureplayer.ApplicationFacade;1415 private var fadace:ApplicationFacade = ApplicationFacade.getInstance ();1617]]>18</mx:Script>19<mx:Box width="131">20<view:ProgressBoard id="progressBoard"/>21<view:ControlBoard id="controlBoard"/>22<view:SongListBoard id="songListBoard"/>23</mx:Box>2425</mx:Application>从上面代码我们看到，定义了一个facade 这个就是Facade的一个实例，而ApplicationFacade是继承自Facade类的，这个就是PureMVC的整个架构的控制管理类，因为Facade是一个单例，所以不能直接new 的，所以在ApplicationFacade里面定义了一个静态方法来获取它的实例。

在程序的createComplete事实触发的时候，我们就调用facade.startup(this)这个方法，意思就是启动整个框架。

这里的代码都比较简单，我们再来看看ApplicationFacade的代码：1package com.jiangzone.flex.pureplayer2{3import org.puremvc.as3.interfaces.IFacade;4import org.puremvc.as3.patterns.facade.Facade;5import org.puremvc.as3.patterns.observer.Notification;67import com.jiangzone.flex.pureplayer.controller.StartupCommand;89public class ApplicationFacade extends Facade implements IFacade10 {11// Notification name constants12public static const STARTUP:String = "startup";131415/**16 * Singleton ApplicationFacade Factory Method17 */18public static function getInstance() : ApplicationFacade {19if ( instance == null ) instance = new ApplicationFacade( );20return instance as ApplicationFacade;21 }2223/**24 * Start the application25 */26public function startup(app:Object):void27 {28 sendNotification( STARTUP, app );29 }3031/**32 * Register Commands with the Controller33 */34 override protected function initializeController( ) : void35 {36super.initializeController();37 registerCommand( STARTUP, StartupCommand );38 }3940 }41}这里分析一下，在ApplicationFacade类里，我们定义了一个String的常量，这个只是一个消息的类型，跟Flex里的Event的常量一样的，注意，规范化一点的话，应该将消息类型的字符串都定义为常量，而我在后面的代码中为了省事就直接用“XXXXX”这样的字串代替了，还是建义写成静态常量。