AS3MVC模式

在这一节中我们来看一下MVC模式，用MVC模式去构建我们的程序会使程序结构更清晰。

MVC模式是"Model-View-Controller"的缩写，中文翻译为"模式-视图-控制器"。MVC应用程序总是由这三个部分组成。Event(事件)导致Controller改变Model或View，或者同时改变两者。只要Controller改变了Models的数据或者属性，所有依赖的View都会自动更新。

MVC模式能使界面（Viwe）和数据（Model）能有效的分开，由控制器（Controller）去控制。

我们现在以一个比较简单的电子时钟的例子来看看如何使用MVC模式来架构我们的程序.

首先我们来看一下Model,Model按照我的理解是数据,就是所有的共用数据都是存储在Model里面的,时钟里有这样的数据,小时,分钟,秒;现在我们来建立一个Model,ModelLocator.as：

package  net.smilecn.clock.model{
    
     import  flash.events.EventDispatcher;
     import  flash.events.Event;
    
     public   class  ModelLocator  extends  EventDispatcher{
    
         private  var _hour:String;
        
         private  var _minutes:String;
        
         private  var _second:String;
        
         public  function ModelLocator(): void {
        }
        
         public  function get hour():String{
             return  _hour;
        }
        
         public  function set hour(value:String): void {
            _hour  =  value;
            dispatchEvent( new  Event( " changeHour " ));
        }
        
         public  function get minutes():String{
             return  _minutes;
        }
        
         public  function set minutes(value:String): void {
            _minutes  =  value;
            dispatchEvent( new  Event( " changeMinutes " ));
        }
        
         public  function get second():String{
             return  _second;
        }
        
         public  function set second(value:String): void {
            _second  =  value;
            dispatchEvent( new  Event( " changeSecond " ));
        }
    
    }
    
}

这个代码应该会好懂,这里ModelLocator继承了EventDispatcher这个类,继承这个类的原因是ModelLocator需要用dispatchEvent发消息出去。再来看一下Controller.as这个类：

package  net.smilecn.clock.control{
    
     import  flash.utils.Timer;
     import  flash.events.TimerEvent;
    
     import  net.smilecn.clock.model.ModelLocator;
    
     public   class  Controller{
        
         private  var _model:ModelLocator;
         private  var _timer:Timer;
        
         public  function Controller(model:ModelLocator): void {
            _model  =  model;
        }
        
         public  function startTime(): void {
            _timer  =   new  Timer( 1000 , 0 );
            _timer.addEventListener(TimerEvent.TIMER,timerHandler);
            _timer.start();
        }
        
         private  function timerHandler(event:TimerEvent): void {
            var nowDate:Date  =   new  Date();
            _model.hour  =  nowDate.getHours() > 9 ? String(nowDate.getHours()): " 0 " + nowDate.getHours();
            _model.minutes  =  nowDate.getMinutes() > 9 ? String(nowDate.getMinutes()): " 0 " + nowDate.getMinutes();
            _model.second  =  nowDate.getSeconds() > 9 ? String(nowDate.getSeconds()): " 0 " + nowDate.getSeconds();
        }
        
    }
}

 

这个类中我们用到了Timer类，因为我们用的是时钟，所以需要一个定时器，Timer是一个很好的定时器，Timer(1000,0)，这里1000是指1000毫秒，就是1秒钟触发一次定时钟，0表示次数，这里0是无限次，如果是大于0的数就是这个数的次数。侦听TimerEvent.TIMER事件就是1秒钟去执行一次timerHandler方法，timerHandler方法的功能是得到当前的时间然后去改变_model里面的值，再看一下ModelLocator.as里面的代码，当hour,minutes,second的值改变的时候就会去发消

息出去，那么谁来侦听这些消息呢，当然是View,现在来看下View.as：

package  net.smilecn.clock.view{
    
     import  flash.display.Sprite;
     import  flash.events.Event;
     import  flash.text.TextField;
    
     import  net.smilecn.clock.model.ModelLocator;
     import  net.smilecn.clock.control.Controller;
    
     public   class  View  extends  Sprite{
        
         private  var _model:ModelLocator;
         private  var _controller:Controller;
         private  var time_txt:TextField;
    
         public  function View(model:ModelLocator,controller:Controller): void {
            _model  =  model;
            _controller  =  controller;
            time_txt  =   new  TextField();
            addChild(time_txt);
            _model.addEventListener( " changeHour " ,changeTimeHandler);
            _model.addEventListener( " changeMinutes " ,changeTimeHandler);
            _model.addEventListener( " changeSecond " ,changeTimeHandler);
            
            _controller.startTime();
        }
        
         private  function changeTimeHandler(event:Event): void {
            time_txt.text  =  _model.hour + "  :  " + _model.minutes + "  :  " + _model.second;
        }
    
    }
}

在View里面，侦听了_model的事件，所以当收到数据改变的消息后，将_model的数据显示到文本框中。

要使程序运行，我们现加一个文档类：

package  net.smilecn.clock{
    
     import  flash.display.Sprite;
    
     import  net.smilecn.clock.model.ModelLocator;
     import  net.smilecn.clock.control.Controller;
     import  net.smilecn.clock.view.View;
    
     public   class  Clock  extends  Sprite{
        
         private  var _model:ModelLocator;
         private  var _controller:Controller;
         private  var _view:View;
        
         public  function Clock(): void {
            _model  =   new  ModelLocator();
            _controller  =   new  Controller(_model);
            _view  =   new  View(_model,_controller);
            addChild(_view);
        }
        
    }
}

在文档类中建立了ModelLocator、Controller、View的实例，ModelLocator产生的实例被传到了Controller和View中，这样就保证了Controller和View使用是相同的ModelLocator，其实要达到这种效果不用这种方法也可以，可以用到上一节中用到的单例模式。

这里作一个总结，Controller是一个控制者，它去改变ModelLocator，ModelLocator的数据被改变后去更新View，使我们能看到数据。如果界面上有一些按钮交互，那么就应该是Controller去响应View里的按钮交互，响应后去通过一些操作后改变ModelLocator,ModelLocator数据改变后通知View去改变界面。

有人可以会说这个程序用更少的代码就可以完成，但这里只是演示程序的架构，当程序很大时，好的架构会使程序更清晰。

 

作者：arrowyoung