AS3教程12-MVC模式

2012-01-18 15:05  评论 0 条
在这一节中我们来看一下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:
  1. packagenet.smilecn.clock.model{
  2.    
  3.     import flash.events.EventDispatcher;
  4.     import flash.events.Event;
  5.    
  6.     public classModelLocatorextendsEventDispatcher{
  7.    
  8.         private var_hour:String;
  9.        
  10.         private var_minutes:String;
  11.        
  12.         private var_second:String;
  13.        
  14.         public functionModelLocator():void{
  15.         }
  16.        
  17.         public functiongethour():String{
  18.             return _hour;
  19.         }
  20.        
  21.         public functionsethour(value:String):void{
  22.             _hour = value;
  23.             dispatchEvent(new Event("changeHour"));
  24.         }
  25.        
  26.         public functiongetminutes():String{
  27.             return _minutes;
  28.         }
  29.        
  30.         public functionsetminutes(value:String):void{
  31.             _minutes = value;
  32.             dispatchEvent(new Event("changeMinutes"));
  33.         }
  34.        
  35.         public functiongetsecond():String{
  36.             return _second;
  37.         }
  38.        
  39.         public functionsetsecond(value:String):void{
  40.             _second = value;
  41.             dispatchEvent(new Event("changeSecond"));
  42.         }
  43.    
  44.     }
  45.    
  46. }
这个代码应该会好懂,这里ModelLocator继承了EventDispatcher这个类,继承这个类的原因是ModelLocator需要用dispatchEvent发消息出去。再来看一下Controller.as这个类:
  1. packagenet.smilecn.clock.control{
  2.    
  3.     import flash.utils.Timer;
  4.     import flash.events.TimerEvent;
  5.    
  6.     import net.smilecn.clock.model.ModelLocator;
  7.    
  8.     public classController{
  9.        
  10.         private var_model:ModelLocator;
  11.         private var_timer:Timer;
  12.        
  13.         public functionController(model:ModelLocator):void{
  14.             _model = model;
  15.         }
  16.        
  17.         public functionstartTime():void{
  18.             _timer = new Timer(1000,0);
  19.             _timer.addEventListener(TimerEvent.TIMER,timerHandler);
  20.             _timer.start();
  21.         }
  22.        
  23.         private functiontimerHandler(event:TimerEvent):void{
  24.             var nowDate:Date = newDate();
  25.             _model.hour = nowDate.getHours()>9?String(nowDate.getHours()):"0"+nowDate.getHours();
  26.             _model.minutes = nowDate.getMinutes()>9?String(nowDate.getMinutes()):"0"+nowDate.getMinutes();
  27.             _model.second = nowDate.getSeconds()>9?String(nowDate.getSeconds()):"0"+nowDate.getSeconds();
  28.         }
  29.        
  30.     }
  31. }
这个类中我们用到了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:
  1. packagenet.smilecn.clock.view{
  2.    
  3.     import flash.display.Sprite;
  4.     import flash.events.Event;
  5.     import flash.text.TextField;
  6.    
  7.     import net.smilecn.clock.model.ModelLocator;
  8.     import net.smilecn.clock.control.Controller;
  9.    
  10.     public classViewextendsSprite{
  11.        
  12.         private var_model:ModelLocator;
  13.         private var_controller:Controller;
  14.         private vartime_txt:TextField;
  15.    
  16.         public functionView(model:ModelLocator,controller:Controller):void{
  17.             _model = model;
  18.             _controller = controller;
  19.             time_txt = new TextField();
  20.             addChild(time_txt);
  21.             _model.addEventListener("changeHour",changeTimeHandler);
  22.             _model.addEventListener("changeMinutes",changeTimeHandler);
  23.             _model.addEventListener("changeSecond",changeTimeHandler);
  24.            
  25.             _controller.startTime();
  26.         }
  27.        
  28.         private functionchangeTimeHandler(event:Event):void{
  29.             time_txt.text = _model.hour+" : "+_model.minutes+" : "+_model.second;
  30.         }
  31.    
  32.     }
  33. }
在View里面,侦听了_model的事件,所以当收到数据改变的消息后,将_model的数据显示到文本框中。
要使程序运行,我们现加一个文档类:
  1. packagenet.smilecn.clock{
  2.    
  3.     import flash.display.Sprite;
  4.    
  5.     import net.smilecn.clock.model.ModelLocator;
  6.     import net.smilecn.clock.control.Controller;
  7.     import net.smilecn.clock.view.View;
  8.    
  9.     public classClockextendsSprite{
  10.        
  11.         private var_model:ModelLocator;
  12.         private var_controller:Controller;
  13.         private var_view:View;
  14.        
  15.         public functionClock():void{
  16.             _model = new ModelLocator();
  17.             _controller = new Controller(_model);
  18.             _view = new View(_model,_controller);
  19.             addChild(_view);
  20.         }
  21.        
  22.     }
  23. }
在文档类中建立了ModelLocator、Controller、View的实例,ModelLocator产生的实例被传到了 Controller和View中,这样就保证了Controller和View使用是相同的ModelLocator,其实要达到这种效果不用这种方法 也可以,可以用到上一节中用到的单例模式。
这里作一个总结,Controller是一个控制者,它去改变ModelLocator,ModelLocator的数据被改变后去更新View, 使我们能看到数据。如果界面上有一些按钮交互,那么就应该是Controller去响应View里的按钮交互,响应后去通过一些操作后改变 ModelLocator,ModelLocator数据改变后通知View去改变界面。
有人可以会说这个程序用更少的代码就可以完成,但这里只是演示程序的架构,当程序很大时,好的架构会使程序更清晰。
下节继续。
本文地址:http://blog.zd178.com/?p=694
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
新年快乐
新年快乐

发表评论


表情