AS3菜鳥教程12-MVC模式－佳佳的窩

來源：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