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. package net.smilecn.clock.model{
2.    
3.     import flash.events.EventDispatcher;
4.     import flash.events.Event;
5.    
6.     public class ModelLocator extends EventDispatcher{
7.    
8.         private var _hour:String;
9.        
10.         private var _minutes:String;
11.        
12.         private var _second:String;
13.        
14.         public function ModelLocator():void{
15.         }
16.        
17.         public function get hour():String{
18.             return _hour;
19.         }
20.        
21.         public function set hour(value:String):void{
22.             _hour = value;
23.             dispatchEvent(new Event("changeHour"));
24.         }
25.        
26.         public function get minutes():String{
27.             return _minutes;
28.         }
29.        
30.         public function set minutes(value:String):void{
31.             _minutes = value;
32.             dispatchEvent(new Event("changeMinutes"));
33.         }
34.        
35.         public function get second():String{
36.             return _second;
37.         }
38.        
39.         public function set second(value:String):void{
40.             _second = value;
41.             dispatchEvent(new Event("changeSecond"));
42.         }
43.    
44.     }
45.    
46. }

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

1. package net.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 class Controller{
9.        
10.         private var _model:ModelLocator;
11.         private var _timer:Timer;
12.        
13.         public function Controller(model:ModelLocator):void{
14.             _model = model;
15.         }
16.        
17.         public function startTime():void{
18.             _timer = new Timer(1000,0);
19.             _timer.addEventListener(TimerEvent.TIMER,timerHandler);
20.             _timer.start();
21.         }
22.        
23.         private function timerHandler(event:TimerEvent):void{
24.             var nowDate:Date = new Date();
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. package net.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 class View extends Sprite{
11.        
12.         private var _model:ModelLocator;
13.         private var _controller:Controller;
14.         private var time_txt:TextField;
15.    
16.         public function View(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 function changeTimeHandler(event:Event):void{
29.             time_txt.text = _model.hour+" : "+_model.minutes+" : "+_model.second;
30.         }
31.    
32.     }
33. }

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

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

1. package net.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 class Clock extends Sprite{
10.        
11.         private var _model:ModelLocator;
12.         private var _controller:Controller;
13.         private var _view:View;
14.        
15.         public function Clock():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去改变界面。

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