來源:smilecn.net作者:arrowyoung 2009-09-08

在這一節中我們來看一下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.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去改變界面。

有人可以會說這個程序用更少的代碼就可以完成,但這裡只是演示程序的架構,當程序很大時,好的架構會使程序更清晰。

下節繼續。


文章来自: 闪客居(www.flashas.net) 详文参考:http://www.flashas.net/asbc/20090908/4495.html
創作者介紹

佳佳的窩

天秤女~佳佳 發表在 痞客邦 PIXNET 留言(0) 人氣()